how does this work?

Follow the steps below to create your own digital clock

1. Create the elements in Webflow to hold the digital clock.

Use Webflow to style the elements and link the classes in the code

<div id=".clock-section" class="clock-num"></div>

2. Calculate the current time using the Date object.

This function is continued in the following steps

<script>
function displayTime(){
    let date = new Date();
    let dayOfWeek;
    let hour;
    let min;
    let sec;
    let time;
    let timeOfDay = "AM";

    let daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    numOfDay = date.getDay();
    dayOfWeek = daysOfWeek[numOfDay];
		
  
    // converting the hours to standard time and setting AM to false if it's past noon
    if (date.getHours() == 0){
    	hour = 12;
    } else if (date.getHours() > 12) {
      timeOfDay = "PM";
      hour = date.getHours() - 12;
    } else if (date.getHours() < 10){
      hour = `0${date.getHours()}`;
    } else {
      hour = date.getHours();
    }

    // adding a 0 to the minutes if it is less than 10
    min = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();

    // adding a 0 to the seconds if it is less than 10
    sec = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

    time = `${dayOfWeek}, ${hour}:${min}:${sec} ${timeOfDay}`;

3. Display the current date in the elements created on Step 1.

Remember to use Webflow to style the class for "clock-section"

    // copying time to the div (using inner text and text content to support 
    // Firefox and IE
    document.getElementById(".clock-section").innerText = time;
    document.getElementById(".clock-section").textContent = time;

4. Call the function to calculate the current time every second.

You can also use the setInterval method and call it outside of the function.

    // call the displayTime method every 1000 milliseconds 
    setTimeout(displayTime, 1000);
  }
  displayTime();
</script>

Your entire script should look like:

<div id = ".clock-section" class="clock-num"></div>
<script type="text/javascript">

  function displayTime(){
    let date = new Date();
    let dayOfWeek;
    let hour;
    let min;
    let sec;
    let timeOfDay = "AM";

    let daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    numOfDay = date.getDay();
    dayOfWeek = daysOfWeek[numOfDay];

    // converting the hours to standard time and setting AM to false if it's past noon
    if (date.getHours() == 0) {
      hour = 12;
    } else if (date.getHours() > 12) {
      timeOfDay = "PM";
      hour = date.getHours() - 12;
    } else if (date.getHours() < 10){
      hour = `0${date.getHours()}`;
    } else {
      hour = date.getHours();
    }

    // adding a 0 to the minutes if it's less than 10
    min = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();

    // adding a 0 to the seconds if it's less than 10
    sec = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

    let time = `${dayOfWeek}, ${hour}:${min}:${sec} ${timeOfDay}`;

    // copying time to the div (using inner text and text content to support 
    // Firefox and IE
    document.getElementById(".clock-section").innerText = time;
    document.getElementById(".clock-section").textContent = time;

    // call the displayTime method every 1000 milliseconds 
    setTimeout(displayTime, 1000);
  }
  displayTime();
</script>

NOTE: This guide is outdated (will update soon), but should still work. However, if you are having issues replicating this project my entire site is cloneable on Webflow here. Also, feel free to send me an email.