Build a Digital Clock in JavaScript | HTML, CSS & JS Tutorial for Beginners

hi in today's video we are going to be using html css and javascript to create a digital clock we will be using javascript date object and various methods to bring out current time information so hope you enjoy by the end of this video you will be able to make this let's get started i will create a folder on desktop and name it clock today i am using atom text editor i have put a link in description for downloading atom open atom click add folders and select the folder called clock let's make a new file here called index.html and this file will be the main entry point for the application write html and press enter and it will give us an html5 template we can now insert the title digital clock we can now create both the css and javascript external files for our project so make a new file called styles.css and this one will contain all the styles and make a second file name it script.js and this one will contain all the javascript let's go to index.html and include both the files styles.css in the src attribute of the script tag write the external javascript file name that is script.js so now we have all the html css and javascript linked up we can begin working on creating the clock itself we will be doing the html first before moving on to css and javascript in html we are going to need to have a main container for the clock so add a div in the body and give this an id named container inside this container dip add a paragraph tag and give this an id named clock let's move on to css to style up the clock write hash container open close curly braces mean height 800 pixel position relative next write the css for id clock text align should be center font size should be set to 72 pixel background color hash 33333 for font color or color i am giving hash fff or white for mean width i am setting it to 380 pixel keep some padding and border radius position should be set to absolute top 50 left 50 transform translate within parenthesis minus 50 comma minus 50 percent so that is basically all we need to do for both html and css we can now move on to javascript let's create a javascript method and i will name it display time create a new date object and store in variable d call gatehouse method on d and this will give us the current hours value between 0 and 23. for example if it was 10 pm at night it will give us 22. call get minutes method on d and that will give us the current minutes value between 0 and 59 call get seconds method on d and this one will give us the current seconds value between 0 and 59. now concatenate the full time get the paragraph element with id clock using document.getelementbyid method and put the time inside it next call set interval method and pass the method name display time and 1000 milliseconds as parameters what this method will do is it will call this displaytime method in one second of interval so basically every second we are going to check the time and update the value this ensures that the time does not lag behind check the output now ok the clock is being shown here but we want to show 12 hour clock at a leading zero when any of the values for hour minute and second become single digit and show am or pm let's fix this now define a variable called am or pm and store the string am in it if the value for hour is greater than or equal to 12 we will replace the value of am or pm with pm since we want to show 12 hour clock check if the value of hours is greater than 12 if true subtract 12 with hours for example if it was 13 it will give 1. next we want to show a leading zero when any of the values for hour minute and second becomes a single digit so check if the value of hour is less than 10 if true concatenate a leading zero do the same for minute and second if minute less than 10 minute equals to zero within double quotes plus minute semicolon if second less than 10 second equals to zero within double quotes plus second semicolon finally concatenate a space and the variable am or pm with the time string check the output now refresh the page [Music] perfect so this is how to create a digital clock using pure html css and javascript and hopefully you have learned something from this video thanks for watching subscribe for more and i will see you in the next one

Channel: Sandip Bhattacharya

Views: 7,501

Keywords: code, coding, programming, tutorial, beginner, simple, easy, how, to, web, website, web development, project, mini project, html, html5, css, css3, javascript, javascript tutorial, js, class, classes, date object, time, date time, format, 12 hour, 24 hour, display, selectors, elements, dom, document object model, methods, functions, how to create clock in javascript, how to make javascript clock, css javascript digital clock, css javascript clock, clock with javascript, js tutorials, digital clock in js

Id: d9HGoFf6yyw

Length: 8min 16sec (496 seconds)

Published: Fri May 06 2022