Exercise 17

Create the following folder/file structure:

/ex_17
  |-- index.html

index.html

Create a basic HTML document
Create a script tag on the document head element
Add the following html code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Attributes</title>
    <style>
      a {
        font-family: Arial, Helvetica, sans-serif;
      }

      .menu {
        display: block;
        width: 400px;
        border: 1px solid black;
        background-color: #eee;
        padding: 5px 0 5px 10px;
      }

      a.menu {
        color: black;
        text-decoration: none;
      }

      a.menu:hover {
        background-color: #ddd;
      }

      a.green {
        color: green;
      }
      a.blue {
        color: blue;
      }
      a.red {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="#" class="menu">Link 1</a>
    <a href="#" class="menu">Link 2</a>
    <a href="#" class="menu">Link 3</a>
    <a href="#" class="menu">Link 4</a>
    <a href="#" class="menu">Link 5</a>
  </body>
</html>

Ask the user to select a color showing the following message:

Please choose & input one of the following colors: green, blue or red

Select the first link element
Add the user selected color as class name to the selected element (first link)
Avoid adding the class if the user inputs a color that's not an option
So if the user selects blue as color we need to add the blue class to the first link

Exercise 17

index.html​

index.html