Extra Credit: Clock

As we take Javascript further in our projects, we can begin to experiment with conditional statements – determining whether or not a condition is true to alter the outcome of a webpage.

To test the potential of conditional statements, we well as the opportunity of temporality on the web, we will add a simple "clock" to our personal class websites. In this case just checking if it is the daytime or nighttime. With the optional extension of adding a fully functional clock to your website.

Instructions

1. Add a check to your personal class website to see the current time:

window.onload = function() {
      var visitTime = new Date();
      var hours = visitTime.getHours(); // Get the current hour (0-23)
}

the code will automatically run when the window loads, checking the time, then getting the current hour.

2. If you'd like to see what hour it is, add an alert to your code displaying the time.

window.onload = function() {
      var visitTime = new Date();
      var hours = visitTime.getHours(); // Get the current hour (0-23)

      alert(hours);
}

3. Check if the hours are between 8am and 8pm.

window.onload = function() {
      var visitTime = new Date();
      var hours = visitTime.getHours(); // Get the current hour (0-23)

      if (hours >= 8 && hours <= 20) {
          // do something here
      } else {
          // do something else here
      }
} 

5. Once you have confirmed if it is daytime or nighttime (roughly) consider how you may temporally experiment with your website. The most simple thing would be to add an additional class to your webpage – similar to darkmode:

window.onload = function() {
      var visitTime = new Date();
      var hours = visitTime.getHours(); // Get the current hour (0-23)

      if (hours >= 8 && hours <= 20) {
          document.getElementsByTagName('body')[0].classList.add('day');
      } else {
          document.getElementsByTagName('body')[0].classList.add('night');
      }
} 

Yet, consider what other opportunities such a feature may entail. Do you share a different message with your visitor based on day or night, or perhaps a new message every hour of the day? Do you assign a different favicon to your website depending on when you visit your site? Or show totally different information?

There is no right or wrong answer, just the hope you will experiment with these potentials!

6. Optional Extension: Add a fully functioning clock to your website. you can use this code as a starting point:

   function updateClock() {
     var currentTime = new Date();
     var hours = currentTime.getHours();
     var minutes = currentTime.getMinutes();
     var seconds = currentTime.getSeconds();
     var formattedTime = currentTime.toLocaleString();
   
     // Add leading zero to minutes and seconds if needed
     minutes = minutes < 10 ? '0' + minutes : minutes;
     seconds = seconds < 10 ? '0' + seconds : seconds;
   
     var message = hours + ":" + minutes + ":" + seconds;
     document.getElementById("clock").innerText = message;
   }

   window.onload = function() {
     updateClock(); // Initial call to display the time immediately
     setInterval(updateClock, 1000); // Update the clock every second
   }

   make sure to add an HTML element to your page with the ID of "clock" in order for this code to work.