An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- TutsPlus - Code
- Just Creative
- Spoon Graphics
- Naldz Graphics
- FanExtra - PSD
- Line 25
- Wal You
- Freelance Switch
- Codrops
- Hashedout
Help Webnuz
Referal links:
Create Digital Clock Using JavaScript
In this article I'm going to create a digital clock using html, css and javascript. below is the final output we'll be going to create:
The format of the clock is YYYY/MM/DD HH:MM:SS AM|PM, and our clock is also updating minutes seconds, hours and date accordingly.
To create a digital clock using JavaScript, we can use the setInterval function to update the time display every 1000 milliseconds (1 second). We will be using the Date object to get the current time, and then use methods like getFullYear, getMonth, getDate, getHours, getMinutes, and getSeconds to extract the current year, month, date, hour, minute, and second, so as of now we know what we have to do lets start, but before that Im going to split the code in three parts: HTML, CSS and JavaScript each one have their own file and in the end well connect CSS and JavaScript with HTML.
HTML Code
Create a directory called Digital Clock and CD into the Digital Clock directory and open this directory inside any code editor you want.
Once the code editor is loaded create a html file index.html, and paste the following code in that:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Clock Using HTML, CSS and JavaScript</title></head><body> <div class="box"> <div> <span> <h1 style="margin-bottom: -30px;">Digital Clock</h1> by programmingeeksclub </span> <p id="digitalClock">2022/12/18 10:22:05</p> </div> </div></body></html>As of now we dont have any css file yet create if you still try to open this file in browser youll see the following output:
Add CSS
Now lets add the css into our template to make it look good, for that in the same direcotory lets create a style.css file and add the following code into it:
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');@import url('https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap');body { background-color: midnightblue; color: whitesmoke; font-family: 'Bungee Shade', cursive; letter-spacing: 0.1em;}#digitalClock { font-size: 5px; margin-top: -5px; text-align: center; font-family: 'Diplomata SC', cursive;}.box { display: flex; align-items: center; justify-content: center;}h1 { font-size: 15px;}span { font-size: 5px;}Now if you look at the output youll see the new look of our digital clock:
Add JavaScript
Below is the javascript code:
// make div gloabally accessablevar containingItem = document.getElementById('digitalClock');// give us the zero leading valuesfunction ISODateString(d) { function pad(n) { return n < 10 ? '0' + n : n } return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) + ' ' + pad(d.getHours() >= 12 ? 'PM' : 'AM')}let doc = () => { let t = new Date(); containingItem.innerHTML = ISODateString(t);}// set interval 1 sec so our clock// our clock output can update on each// secondsetInterval(() => { doc() }, 1000);If you found this helpful then you can give this article a heart, also checkout my website there, I upload more article like that and you'll found it helpful.
My Personal Blogging Website : Programming Geeks Club
My Facebook Page : Programming Geeks Club
My Telegram Channel : Programming Geeks Club
My Twitter Account : Kuldeep Singh
My Youtube Channel: Programming Geeks Club
Original Link: https://dev.to/mavensingh/create-digital-clock-using-javascript-4gk8
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To