JS Clone Project [Clock] - 2, PadStart

To fix the problem at the first version of the clock, we have to consider the time String to always have two characters. To make "1" -> "01" 

 

PadStart --> it is used to String, to display in a "N digit form" of the user desire. 

Ex) "1".padStart(2,"0") --> "01" 

*The first argument is the "2 digit form" that the user desires to represent the "1" string as. 

*The second argument fills the rest of the character from the beginning of the character that is required to satisfy the user's first argument. --> Giving "Padding"

 

const clock = document.querySelector("#clock");

function getTime () {
    //Call for Date object
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");

    clock.innerHTML = `${hours} : ${minutes} : ${seconds}`;


}
//As soon as the web is loaded, it calls for getTime ();
getTime ();
//setInterval --> Repeat calling sayHi() after 5 seconds since it's loaded 
setInterval(getTime, 1000);

//setTimeout --> It gives 5s timeout once the page is loaded and runs the function once
//setTimeout(sayHi, 5000);

*Key Points 

1. .padStart()

2. Calling getTime(), first to display time as soon as the page is loaded

3. Use of setInternval.