<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Person greeter app</title>
    <style>
      form {
        width: 300px;
      }

      div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }

      button {
        width: 120px;
      }
    </style>
  </head>
  <body>
    <h1>Give someone a greeting!</h1>
    <form>
      <div>
        <label for="name">Enter a name:</label>
        <input type="name" id="name" required>
      </div>
      <div>
        <button class="greet">Greet!</button>
      </div>
    </form>

    <p><button class="cancel">Cancel greeting</button></p>
    <script>
      // Store references to our form, input element, and buttons
      const form = document.querySelector('form');
      const nameInput = document.getElementById('name');

      const greetBtn = document.querySelector('.greet');
      const cancelBtn = document.querySelector('.cancel');

      // Disable the cancel button for now so it can't do anything if
      // a greeting is not already in progress
      cancelBtn.disabled = true;

      // Define our greeting function
      function sayHi(who) {
        alert('Hello ' + who + '!');
        // Disable the cancel button one greeting has been shown
        cancelBtn.disabled = true;
      }

      // Create a global variable that will act as our setTimeout reference
      let myGreeting;

      // Add event listener to our form to start the greeting
      form.addEventListener('submit', (e) => {
        // Prevent form submission; we don't want this
        e.preventDefault();
        // Enable the cancel button
        cancelBtn.disabled = false;
        // set the timeout to greet the name entered in the input
        myGreeting = setTimeout(sayHi, 5000, nameInput.value);
      });

      // Add event listener to the cancel button to cancel the greeting
      cancelBtn.addEventListener('click', () => {
        clearTimeout(myGreeting);
        // Disable the cancel button again
        cancelBtn.disabled = true;
        console.log('Greeting cancelled!');
      });
    </script>
  </body>
</html>
