<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Native keyboard accessibility</title>
    <style>
      input {
        margin-bottom: 10px;
      }

      button {
        margin-right: 10px;
      }

      a:hover, input:hover, button:hover, select:hover,
      a:focus, input:focus, button:focus, select:focus {
        font-weight: bold;
      }
    </style>
  </head>
  <body>

    <h1>Links</h1>

    <p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>

    <p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>

    <h2>Buttons</h2>

    <p>
      <button data-message="This is from the first button">Click me!</button>
      <button data-message="This is from the second button">Click me too!</button>
      <button data-message="This is from the third button">And me!</button>
    </p>

    <h2>Form</h2>

    <form>
      <div>
        <label for="name">Fill in your name:</label>
        <input type="text" id="name" name="name">
      </div>
      <div>
        <label for="age">Enter your age:</label>
        <input type="text" id="age" name="age">
      </div>
      <div>
        <label for="mood">Choose your mood:</label>
        <select id="mood" name="mood">
          <option>Happy</option>
          <option>Sad</option>
          <option>Angry</option>
          <option>Worried</option>
        </select>
      </div>
    </form>

    <script>
      const buttons = document.querySelectorAll('button');

      for(let i = 0; i < buttons.length; i++) {
        addHandler(buttons[i]);
      }

      function addHandler(button) {
        button.addEventListener('click', function(e) {
          let message = e.target.getAttribute('data-message');
          alert(message);
        })
      }
    </script>
  </body>
</html>
