Digital Clock in JS | JavaScript Tutorials | Web Development Tutorials

hello everyone does the din in this tutorial I’m going to coach you how to create a digital clock consuming HTML and JavaScript okay so now I am opening my text editor I am employing lofty let me name it as digital clock that HTML okay generate a new folder in in the desktop okay now I’m saving it this is the doctor for any HTML file let me define the eighth part of the HTML element so my entitle is chess digital POC okay and I’m going to define the body and learn the body I am going to create a development and the ID is my claw display okay so after this I am going to add my dialogue so actually this is going to show the time so let me define a function called show time and I am characterizing a year okay I’m creating a deed objective so by using this object we can get us minutes and seconds okay so or equivalent to t scattered get to us get instants eight seconds okay so this method bill to ten zero to 23 so this will to ten zero to fifty nine this this also will return zero to three nine okay so it’s a 24 -hour clock let me create available time ah the: m8: seconds okay so now what I’m going to do is I’m going to set this significance to this particular div okay so I’m copying this call and report speck get k21 by ID and in the text equal to time now I am copying this argument and gluing down now and going to change in the verse into verse material okay so why I am doing this is in attaches in the verse will not work in Firefox and the textbook material will not work in IE so to support the cross process I am computing these two texts okay I am going to open this page in my Chrome browser okay okay nothing is showing okay let me find out okay we need to call the function okay so Showtime so no ticket okay it’s presenting the time so there are actually three problems one is this minutes hour and instant cost are showing in a single ticket so if it is a single digit we need to show it as zero zero so we need to append one more zero here and oh no problem is it’s showing the time but it’s not running so we need a leading clock okay so for that we need to use sit interval method okay Showtime and Tosun so what the method used will do is it will call this Showtime function you know one second of delay okay let me go first this sheet – okay you know it sure doubled fastening is running but the problem is it it’s taking one second to show the time receive so it is taking one second of time to show the time okay it is because it will call the function after the one second simply so it may call this function here like this now it it will it avoids that problem okay so instead of doing like this we can do one more thing also instead of doing like this you only announce this method like this show time and inside this miss method I am going to add six time out thousand seconds okay the difference between the setinterval and settimeout programme is set interval method will call the given method in a specified time okay so the name duration with the time wood method will call the given specified technique once the time endeavoured okay okay let me check this now okay it’s okay but we need to fix this okay let me take this now okay I don’t want to see the zero in ours so if or equal to zero sit experiment well okay I want to shoot a 12 -hour clock so one more check easier if H is greater than 12 then we need to subtract by 12 okay to fix the single digit issue so we can do like this if we are only less than 10 H equal to zero plus h if M is less than 10 p-m equal to zero plus M yes equivalent to less than 10 is equal to 0 plus yes okay so instead of writing this nine front of system words of magnets of code we can write like this h equal to H less than 10 0 3 0+ H+ H okay so it is like a realms milieu encounter this is a condition and this will be all true part and this will be a false bottom again your health this will be a true part and this will be a false part you can write lip you can use any of these methods okay now we fix both issues now check the time okay now we need to show the session okay I am sorry session equal to a.m.So we know if the R is greater than 12 the session is p.m. okay so let me add this here okay perfect now it’s register the time now I am going to add some CSS to make it better okay so first thing I want to do is I am going to change the background pigment of this document okay in order to do that okay sit the body background color to block okay to do these things it is necessary to some little knowledge in CSS and I’m going to add a class called clack now what do you want to do is I want to show this time at the centre of this sheet so in order to do that caste absolute and top 50 percentage left likewise 50 percentage I am sorry for the typos and transform change X minus 50 percentage and change y2 minus 50 percentage now okay it’s because we conversion the background dye to black and the textbook colouring is also black so this is okay now I am determining the text hue to white what’s happening let me find out what’s wrong with this document of instance I’m sorry we need to add this class here okay now the time is aligned to the center of this page now I increase the font width to 80 pixels and lend international borders your 1 pixel solid some gray colouring and some padding to this okay top right down left okay I don’t think the clock is rowed on the center of the page okay something is wrong with this oh I’m sorry okay now it is a link to the center way this is how you can create a digital clock exerting HTML and JavaScript little bit of Caesars likewise so thanks for watching this video hope you experienced it satisfy agree thank you


As found on YouTube

Share this article

Leave a comment