Hi Friends 👋 Today in this blog, we're gonna learn to create a Digital Clock using HTML, CSS and JavaScript. I will...
Hi Friends 👋
Today in this blog, we're gonna learn to create a Digital Clock using HTML, CSS and JavaScript. I will explain all the main concepts step by step. So, you will learn all the concepts in this project 99.99% without any doubts.
In this blog, I will give my video tutorial and source code to download. If you have any doubts, ask me in the comments section. (Probability to ask doubts 0.01% 😉)
Let's Start to Code...
First, we want to create a skeleton of the project. HTML (Hyper Text Markup Language) is the only way to create a skeleton for any web-based project. So, let's dive into it...
Index.html
Style.css
01. Basic Reset for all elements
These three lines are basically needed for most web developers. Box-sizing: border-box is essential for most web projects, and I believe some beginners might not be aware of its significance. By using this property, the width of an element remains consistent even when additional padding is added. This helps in maintaining layout stability and avoiding unexpected shifts in design.
02. Styling of the Body
I want to cover the entire full screen of any device (responsiveness of the body section). So, I set the height of the body to 100vh (it means 100% of any screen size).
Next, I want to center the whole content with responsiveness. So, I decided to use flexbox. Within just 3 lines, I can cover the full responsiveness of the body section by centering the content.
Finally, I made my basic styles for eyecatchy UI Designs.
03. Stylings for all Other elements
In my point of view, there are no big things in that styling; there are very simple styling codes. So, I decided to move our main core engine of the project. If you want to ask anything about any small doubts about that, use the comment section, and our subscribers will clear your small doubts.
Script.js
For all JavaScript files, it’s best to start with HTML references and declare variables at the beginning. This approach is considered a key practice for becoming a professional programmer.
In the script, I referenced the two elements named timeEl and dateEl using their ID names because these elements need to have their values updated dynamically. This is the reason I included them in the JavaScript file.
Next, I declared and initialized the variables for days and months as constants days and months. This decision was made because these values are not going to change in future programming, making them perfect candidates for constants.
02. Function format()
This function is mainly created for maintaining a correct number format with two digits. Instead of displaying 7, this function will return 07. This way, it helps ensure that our time digits have a consistent two-digit format.
Now let's examine the mechanism behind this function. The function receives a parameter called t, which is a number in this project. The second line indicates that if t is smaller than 10, it returns it as '0t'; otherwise, it simply returns t. We can achieve the same functionality using an if-else statement, as shown below.
The same procedure applies, but there are too many lines. In programming, our main target is to "simplify the code." Therefore, I chose the first approach, known as the "ternary operator method," to create this function in just three lines.
03. Function updateClock()
This function is the Heart of this project. Let's break down the mechanism of this function step by step.
The first line of this function represents the now object, which gets the system's current time and date at the moment. Then I planned to get hours, minutes, and seconds through the format function to make the time look formatted with two digits, and they are separated as constants: hours, minutes, and seconds. Finally, I displayed them using timeEl.textContent. as same as I followed these steps to display the date also.
04. Let's run the clock
After all these functions, I want to run the heart function with a one-second time interval. So, I used the setInterval method to make the clock work. Finally, for immediate execution, I call the function as soon as the page loads.
[Get the Source Code ##download##]
COMMENTS