How to Create Digital Clock in HTML CSS and Java Script #digitalclock #htmlcssjavascript

hello guys welcome to my channel create knowledge in this video I'll show you how to make a simple digital clock by using HTML CSS and JavaScript in Visual Studio code now I am going to open my visual studio code now I am going to create a folder in my desktop I am giving the name of this folder is digital clock and in this folder I will keep the image of background image you see this is my background image I am going to keep this background image in my folder here I'll just copy it and paste it in my my this folder is blank I'm going to paste it here and close it and go to Open my Visual Studio code here I am right open folder I will select folder from desktop this is my digital clock now here I have open a folder open my folder digital clock here you see there is no file here only background image is there so now I am going to create three file one JavaScript one CSS one HTML first I'm going to create a HTML file I am giving the name HTML index.html and next one is Style dot CSS the third one is script Dot JS JavaScript okay now I have created the three folder now in HTML code in HTML index.html I'll write the HTML code yeah right and I got the Boiler code and here I am going to change the title and give me the title name is digital clock okay in body I'll try it I'll take a deep class clock ID clock right here deep ID IDM given clock and here I write the time now I'm here writing 9 colon 15 and 30 and here I am going to link link my CSS file Style dot CSS and here I am giving the link of my Js file here right here script SRC am I giving the name Skip judges script dot Js okay now only I am use D plus clock and here I am giving the link of my JavaScript and you have the link up my CSS now I am going to see how it is looking go to live and you see it shows only 9 hour 15 minutes 30 seconds I have opened the style.css and here write the code here will I write the body first I'll give you the body in body URL I'll give the margin margin is zero font family you can choose any one here I am choose this first one Courier new and display s and flex Direction Flex Direction colon align item Center and height I am taken 100 BH justify content Center and background image background image I will take URL here background image I have taken this you can choose as per your choice you can put the background as per your size one choice so I am right here invented comma I will give the name of my background file background.jpg background dot jpg it will automatically come and then background size background size I will write it cover because it it will cover the one screen and overflow is hidden okay now my background is over now I am going to save it and show you how it is looking just going to save the file save and see the background this is my background and here it is giving the time 9 hour 15 minute and 30 seconds now I'll here use my clock class here I am use hashtag #clock here I write font size 175 pixel with with I have taken 950 pixel margin I have taken 175 pixel just a line Center color I am using aqua color as per user you can choose but I am choosing aqua because for match with my background color because Aqua is matching with my background color that's why I'm taking it border border I am taken I am taking border is 4 pixel solid and green yellow next border radius for the radius I am taking 50 pixel 50 pixels I am going to save it save and I see the output this is the output okay now I am going to write code in my JavaScript now I am going to open my JavaScript this is my Javascript file here I'll write set interval show time 1000 millisecond you write here set interval set interval so type 1000 millisecond and next so function function show time you'll write function show time here right late time late time to knew did our is equal to time dot gate hour time Dot get our and same late minute is equal to time dot get minute late second is equal to time dot get second and AM and PM am underscore pm is equal to am okay now here I use if you're right if our greater than 12 hour is equal to our minus is equal to 12. then if the r is minus is equal to 12 then Am Pm is equal to pm am underscore pm is equal to pm okay now I have set the N now I have to set the PM now I have set the PM now I have to say am again I have to write if our our is equal to 0 then R is equal to 12. AM PM is equal to am okay now I have said AM and PM I have set here now I have to write our is equal to R less than 10 L I write our is equal to our less than 10 hour is equal to hour less than 10 question mark 0 plus our column our same I have to write per minute just I'm going this copy this code and here write minute is equal to minute and year minute and same I have to write for second write the same code for second here right second here right second so I have set the hour minute and second next I have to write net current time yeah right late current time when time is equal to our us alone without the put the column here I am going to set the display our column and then it will come after hour it will come minute so I've write Plus minute the column our minute have said that I am going to set second right second and get some space here and here right AM and PM and PM now I have set the display now I have to write here document.getelement document Dot get element by ID here pass the clock Dot in our HTML inner inner HTML is equal to current time current time and column after that I write so time okay now I am complete the coding of my JavaScript now I am going to save the project now I'm going to save the project save and run my live server full screen it port go to live server and you see the output this outfit I'm getting the output now time is 7 hour 10 minutes 53 seconds now it is evening that's why it is in pm now I think you have understand how to write simple retail clock by using HTML CSS and JavaScript in Visual Studio code if you like this video please do subscribe my channel and share this video with your friends thanks for watching my video thanks a lot thanks

Channel: Create knowledge

Views: 444

Keywords: digital clock, digital clock in js, digital clock javascript, working digital clock javascript, css javascript digital clock with date and time, javascript clock, digital clock using javascript, digital clock with js, digital clock with glowing effect html css javascript, digital clock using html, digital clock with glowing effect, css javascript digital clock, css digital clock with javascript, learn how to tell time, analog and digital clock

Id: V8yhRFbmmZ0

Length: 13min 39sec (819 seconds)

Published: Tue May 09 2023