jQuery Online Test

An HTML div element contains a list of the most endangered species for each continent.

<div>
    <ul>
        <li data-continent="North America">California condor</li>
        <li data-continent="Europe">Cave bear</li>
    </ul>
</div>

Implement the function endangeredSpecies that returns the species's name for a particular continent.

For example, endangeredSpecies("North America") should return "California condor".

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

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

Implement the setup function that registers a click event handler and implements the following logic: When the button of class remove is clicked, its parent <div> element 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 class="image">
  <img src="https://tinyurl.com/im-gal-2nd" alt="Second">
  <button class="remove">X</button>
</div>

The createProductCodeForm function is used to create a new form that accepts a product code from a user.

The current version of the form contains the hint: 'The product code can be found on the label'. This hint is currently always visible to the user.

Improve the form so that the hint is only rendered when the input element is the focused element.