Vue.js Online Test

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div>
  <div class="image">
    <img src="https://tinyurl.com/im-gal-1st">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://tinyurl.com/im-gal-2nd">
    <button class="remove">X</button>
  </div>
</div>

Implement the image-gallery component that accepts a links prop and renders the gallery described above so that the first item in the links prop is the src attribute of the first image in the gallery. It should also implement the following logic: When the button is clicked, the image that is in the same div as the button should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div>
  <div class="image">
    <img src="https://tinyurl.com/im-gal-2nd">
    <button class="remove">X</button>
  </div>
</div>

A website requires a component for adding users to a table. Users can be added by specifying their first name and last name with input elements, and then clicking on the "Add user" button. After a user is added, input elements should be cleared.

After a user is added, they should be listed in the table Users, where the index column should start from 1.

Implement the UserList component with the functionality described above.

For example, after adding the name "Ann Franklin", the tbody part of the Users table should be:

<tr>
  <td>1</td>
  <td>Ann</td>
  <td>Franklin</td>
</tr>

Page contains an anchor element and a paragraph below it. The paragraph's visibility should be toggled by clicking on an anchor element with the following logic:

• At start, paragraph should not be visible
• After a click, paragraph should be visible
• After another click, paragraph should not be visible again

Implement the following logic by adding missing attributes to anchor and paragraph elements.

A developer team wants a component that is made from a label and an input element. Implement the labeledinput component so that the reusable element defined as:

<labeledinput id="username">Username: </labeledinput>

is rendered as:

<div>
  <label for="username">Username: </label>
  <input type="text" id="username">
</div>

Developers should be able to specify different values for an element's id and an element's content.