How To Create Digital Clock Using HTML CSS & JavaScript | Display Time Using JavaScript

hi guys welcome back to another video and today in this video we will learn to make a digital clock using JavaScript let's check the current time in my laptop at the bottom right corner so the time is exactly same as the time displaying on my website we will Design This digital clock using HTML and CSS then we will update the local time using JavaScript this is very useful JavaScript project for your job portfolio so let's start to make this digital clock using JavaScript step by step here I have this folder and in this folder I have added one index.html file one style.css file let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file where I have added the margin padding font family and box sizing these CSS properties are applicable for all the HTML elements in this HTML file I have added this title digital clock using JavaScript easy tutorials and then I have added this link tag that will connect the HTML and CSS file because here I have added hdf style.css now we will add the code within the body tag so here let's create one div with the class name hero and now we will add the CSS for this class name write this class name here in this CSS file and here we will add the width height Min height will be 100 VH then we will add the background and in this background we will add the linear gradient color here we will add one angle and two color code then we will add the color this will be the white color and let's add the position relative after adding this let me come back to the folder and open this HTML file with any web browser so you can see this gradient colored on the complete web page let me close this browser and I will open it with the visual studio code extension called live server so that it will refresh the webpage automatically whenever we will add any changes in the code file and save the code file so you can see the same webpage again with the gradient color now let's come back and within this div with a class name hero here we will create another div with the class name container inside this container we will create another div with the class name clock and in this clock let's add the time like this save this and open the webpage you can see this time here at the top left corner 0 0 so let's add some CSS let's come back and here we have the class name container just add it here in this CSS file and here we will add the CSS for this container we will add the width it will be 800 pixel and then we will add the height height will be 180 pixel after that we will add the position absolute top 50 percent left 50 and transform Translate minus 50 and minus 50 percent so that this element will be in the center of the webpage for now here we will add one background so let's add the background red and open the web page so you can see this red color of box in the center of the web page now we'll remove this color let's come back to the HTML file and here we have the class name clock so let's add the CSS for this clock here we will add the width and height 100 percent after that we will add the background and in the background we will add some colored with less opacity so we will add RGB a so this is the color code for the background then we will add the Border radius of 10 pixel and let's add display Flex align items Center and justify content Center so that the text inside this clock will be in the center and after that come back to the webpage you can see this color in this box now we will add two other elements that is a square and circle so let's come back we will add the element with the help of Studio elements so here in this container we will add two Studio Elements which is before and after so add this container then write double column before and in this before we will add content content will be empty then let's add the width and height width will be 180 pixel and height also same 180 pixel then we will add the background here we will add one color code then border radius will be 5 pixel very small and Position will be absolute left minus 50 pixel and top also minus 50 pixel then write z index minus 1 after adding this you can see one element at the top left side of this horizontal box now we will create another element that will be one Circle so let's come back and duplicate this one here we will add after this is same content width height and we will change the background color and here we will add border radius of 50 percent so that it will be a circle Position will be absolute and here it will be on right side so right minus 30 pixel and it will be at the bottom so right bottom minus 50 pixel that's it now you can see one Circle in the right side next we have to make this horizontal box blur so let's come back and here we have the clock so in this clock we will add backdrop filter blur it will be 40 pixel after that you can see the web page it looks good next we have to change the size for this text and we will add the name also like minutes second hours so let's come back and here let's remove this one instead of writing the text directly we will add one span tag and in the suspend first we will add 0 0 Let's duplicate it here we will add the colon after updating this you can see again it is same we have just added the span tag for each number let's come back here we have the span inside this clock so come to the CSS file let's add dot clock and a span so for each span we will increase the font size so let's add the font size 80 pixel we will add the width 110 pixel and display will be inline block and text align Center and position relative after that you can see some space between these numbers and the font size is also increased next we'll add the name like ours minutes and seconds so let's come back to the code again and let's copy this clock span and write the pseudo element after in this after let's add the content in this content it will be empty font size 16 pixel position absolute bottom minus 5 pixel and left 50 percent transform translate x minus 50 percent in this content we can add the text so let's add hours it will be 16 pixel PX and after applying this you can see we have the text here hours hours hours hours like this and we have to remove this hours and it will be different in the first one we will add hours then minutes and seconds to change this one we will come back to the HTML file and in this HTML file let's add some IDs in the first span we will add the ID HRS for the RS then in the second number here we'll add ID Min that is four minutes and in the last one we'll add the ID Sac 40 seconds and let's come back to the CSS file and remove this content from here remove this and here at the end we will add that ID like Hrs and here we will add pseudo element after write content hours duplicate this line it will be minute and second and here also minutes and seconds after adding this let's come back to the website so you can see in the first number we are getting hours done in the second one minutes and last one seconds next we have to update the time and to add the current time we need to add the JavaScript so let's come back to the HTML file and here at the bottom just above this closing body tag we will add a script open and closing tag and within this script we will add all our JavaScript code so here we will add lit Hrs equal to document dot get element by ID and the ID is HRS that is from here let's duplicate it it will be minute and second to get the date and time we need to use the JavaScript object called date so here let's add let current time equal to new date and if we print this current time let's add console.log current time you will see the local time and date let's come back to the website and open the console here you can see it is displaying Tuesday May 30 2013 and this is the time so it is our local time now we have to get the time only we have to remove the date and day so let's come back here you can use the JavaScript methods get hours get minutes and get seconds to get the hours minutes and seconds from this time so let me show you here we will add current time Dot get ours and open the webpage you can see it is displaying the hours 15 if we come back and add get minutes it will display the minutes in current time 37 and like that we can get these seconds also so let's display all those things here we will add HRS dot inner HTML equal to current time Dot get hours so it will display the hours of current time duplicate this it will be minutes Min and it will be seconds and here also we will update the methods get minutes and another method called get seconds so after updating this let's come back to the website you can see the current time here which is 15 38 and 39 let me show you my laptop current time it is same 1538 but you can see this time is not updating so we have to update it at every second for that we will use the set interval so let's come back and we will add all those things in a set interval here we'll add comma 1000 milliseconds that means one second and within this we will add all these code so it will execute this code at every one second now just come back to the website again and you can see this seconds is increasing and this minute is also increasing right now it is displaying only one digit so suppose you have the numbers less than 10 we can add 1 0 in front of that number for that let's come back to the JavaScript again and here we will add one if condition so we will add the inline if condition copy this and here we'll add Plus this one and here we will add the condition if less than 10 if it is less than 10 then it will add 1 0 or if it is not less than 10 then it will be empty like this so we have to add the same thing in the other one here and here and update the methods it will be minutes minutes and seconds after updating this let's come back to the website again and finally you can see it will display the double digit in the numbers now you will see it is starting from 0 1 0 2 0 3 like that so finally we have completed our digital clock using HTML CSS and JavaScript I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 140,060

Keywords: JavaScript tutorials, JavaScript for beginners, JavaScript projects, project using JavaScript, JavaScript college project, JavaScript project ideas, JavaScript project for beginners, HTML and CSS, HTML CSS and JavaScript, Web development, JavaScript clock, digital clock in JavaScript, Display time using JavaScript

Id: 5tC46h022YE

Length: 18min 6sec (1086 seconds)

Published: Fri Jun 02 2023