Created a digital clock but also needed to look up on google for help. for the next step I wrote on paper of what I did, is this a good idea for a beginner? Want to learn my mistakes and challenge myself for the next challenges

Don’t have to read what I wrote but the main question I want to ask is what can I do next after creating the digital clock. What is similar to the digital clock that I have created, that I can challenge and make myself? Just want to make stuff step-by-step by creating functions, loops, etc.

I have learned to automatically update the browser for the digital clock to show the time and count down the seconds. This was done by creating a function called updateTime. Then, inside the function was four variables. One variable called currentTime, which has the new Date() method in the variable. And one varable for minutes, one for hours and one for seconds, these three variables has the currentTIme variable inclueded and the getMinutes, getHours and getSeocnds method. Next was to update the minutes by an if loop. The update for the minutes was to tell the browser when it reaches less than 10 add a “0” (string) to the remaining minutes left. This was the same for seconds. After that another variable was created to display it in the browser screen. So hour (var) + “:” + min (var) + “:” + seconds. This was followed by another if loop to say if the the hour variable is greater than 11 display 11 in the browser, if not, display AM. An easy and simple way to change the AM/PM by checking if the current time (right now) is greater than 11. Finally, it was to tell JavaScript to get the document.ById(“Time”) in the body HTML and to equal it with digitalClock. And an setInterval (updateTime, 1000) which is an method to countdown the updateTime function, 1000 miliseconds = 1 second.

56

Try extending your digital clock. Take a look at ES6 classes (https://devdocs.io/javascript/classes), and make your clock so that it’s a completely self-contained entity. Doing so, you could do something like this:

let myClock = new DigitalClock();
let myClockDisplay = myClock.getDomEl();

document.querySelector("#clock-container").appendChild(myClockDisplay);

At that point, the clock would be displayed and running. The advantage to this approach? You could allow for settings (for example, time zones, or 12/24hr display, or what have you), and display multiple clocks on the same page!

The possibilities are ENDLESS!!