Untitled

<!DOCTYPE HTML>
<html>
  <head>
    <title>Greeting Demo</title>
  </head>
  <body>
    <!-- TODO You should probably move the contents of this script tag into
      your .js file and link it up top in the <head> !-->
    <script>

      /**
        * Util function to return either Morning, Afternoon or Evening
        * depending on time
      */
      function getTimeOfDay() {
        // Create a new date object for right now
        let now = new Date();
        // Retrieve the current hour
        let hour = now.getHours();

        // If it's between 0:00 and 12, it's morning
        if(hour < 12 && hour >= 0) {
          return "Morning";
        }

        // If it's between 12:00 and 17:00 it's Afternoon
        if(hour >= 12 && hour < 17) {
          return "Afternoon";
        }

        // If it's between 17:00 and 0:00 it's evening
        if(hour >= 17) {
          return "Evening";
        }
      }

      /**
        * Called when the input form is submitted to retrieve the
        * user's name, get the time of day and print the greeting
      */
      function onSubmit() {
        // Get the inputted name from the form and assign to variable
        let name = document.getElementById("name").value;
        // Use utility function to get the time of day
        let timeOfDay = getTimeOfDay();
        // Concatinate both variables and display to user
        // TODO: Maybe replace the Alert with some actual HTML content that looks
        // nice (https://www.w3schools.com/jsref/prop_html_innerhtml.asp)
        alert("Good " + timeOfDay + ", " + name);
      }
    </script>

    <!-- Notice the id attribute of the below input tag, this used in the
    above javascript to get the contents of the input -->
    <input id="name" type="text" placeholder="Enter your Name"></input>
    <button onclick="onSubmit()">Greet</button>
  </body>
</html>