DEV Community

developer
developer

Posted on

1 1 1 1 1

HOW I MADE MY DIGITAL CLOCK WITH HTML

THOUGHT

I never had a clock in my house and if a clock was there it was broken by me . so, once I decided to make a clock using my coding skills and I started to make one . I first thought I can make it only using an API and then saw a video and got amazed seeing it

Image description

I saw that we can make a real-time working clock using little JavaScript and html

I started making my clock

After the thought I sat down near my computer and began to work

Image description

After that in W3 schools I saw that there are in-built functions in JS that will help us make a clock but after some time I got mad seeing those JAVASCRIPT functions

Image description

But soon I understood those functions

HOW TO DO IT 1) HTML

There is only one line of code in html and basic Html. We should first put a h1 and give it an ID That's all and I thought Woof...

2) JAVASCRIPT

After messing up with JavaScript for literally Four Hours

ALSO CHECK OUT MY WEBSITE=JINX-clock.web.app

` function Clock(){
let d= new Date();
hours = d.getHours()
minutes = d.getMinutes()
seconds = d.getSeconds()
document.getElementById('clock').innerText = hours + ':' + minutes + ':' + seconds;
}

Clock()

setInterval(()=>{Clock()},1000)`

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
dino2328 profile image
developer

This is how I made my clock

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay