If you have learned Javascript recently, it is the high time to test your knowledge by making a project. Creating a Digital clock in Javascript might be simple, but a good beginner level Javascript project. You need some basic knowledge of Javascript variables and functions to complete this project. I am going to discuss step by step process of how you can create a digital clock in Javascript.
Let's start the tutorial. I am creating the digital clock in HH:MM:SS AM/PM format. You can add the date and day as well. I will discuss it as well. I am adding the code so that I can discuss it step by step and it seems clear to you. Check the following code.
See the Pen Digital clock by KAMAL DAS (@daskamal)on CodePen.
HTML:
You don't need too much HTML code. You just need to add a <div> in the body class and add an id to it.
CSS:
If you want your clock to look beautiful and want to change the font-size, you may add CSS styles. I have used the text-shadow property of CSS to make the digital clock beautiful. You can add any styles and font-type as you wish.
Javascript:
It is the most important part of creating a digital clock. Follow the following steps-
1. You need to create a function that shows the time. I have added the ShowTime function.
2. Now, you should have the actual time for showing. You can get it using the Date() object in Javascript. I have declared a variable to store the value. It consists of the time in 24 hour format, date, day and timezone as well. You need to get the hour, minute and second values of the date object. For this job, you need to use get methods. I am adding a list of the get methods.
1. getHours: Get the hour in 24-hour format2. getMinutes: Get the minute3. getSeconds: Get the seconds4. getFullYear: Get the year5. getMonth: Get the month as a number(0-11)6. getDate: Get the day as a number7. getDay: Get the weekday as a number 0 to 6
3. Then, declare variables to store the values of hour, minute and second.
4. For showing AM/PM, use an if statement to check if the hour is greater than 12 and check if the hour is 0. If the hour value is 0 then update the hour variable value to 12 and set AM.
5. Now, if you want to show the hour, min and sec value with a leading zero whenever it is less than 10, just use if statement like the code example.
6. Now, you need to set the value of the innerHTML of the <div> to the time value you want. So, use the rules of Javascript variables to get a format you want and set it to the innerHTML.
7. If you run the code after writing whatever steps I have described till now, you will find that the time does not change automatically, it only changes on refreshing. So, to make your clock automatic, you have to add the setInterval function and add your function name and the time interval, you want to repeat your function.
8. Call the function just like ShowTime() to call it on loading of the page.
I think it is clear to you. Congratulations on completing this project of creating a digital clock in Javascript. If you face any difficulty or have any other questions or any suggestions for the next post and improvement as well, you can comment and contact me through the contact us page as well. If you like this post please share and comment, so that others can take help also.
So, start building your digital clock in Javascript. Happy coding 😄.
No comments:
Post a Comment