DEV Community

Cover image for Simple JavaScript Clock!
CristoferK
CristoferK

Posted on

Simple JavaScript Clock!

Hello! If you want to see the video:https://www.youtube.com/watch?v=SibpZL6dgbE&t=55s
Don't forget to subscribe!

But here is the code:



<!DOCTYPE html>
<html>
<head>
    <title>JS Clock</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300&display=swap" rel="stylesheet">
<style>
* {
    color: white;
    margin: 0;
    font-family: 'Montserrat Alternates', sans-serif;
}
p {
    font-size: 200px;
    position: absolute;
    color: #9999ff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0px 0px 200px darkblue;
}
</style>
</head>
<body>
<p id="clock"></p>


<script>
setInterval(displayclock, 500);
function displayclock() {
    var time = new Date();
    var hrs = time.getHours();
    var min = time.getMinutes();
    var sec = time.getSeconds();

    document.getElementById('clock').innerHTML = hrs + ":" + min + ":" + sec;
}
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
sloan profile image
Sloan the DEV Moderator

Heyo,

Would you please consider embedding your video here instead of just linking to it? This way folks can see your content and discuss things on DEV without having to navigate elsewhere.

You might not have realized, but DEV actually allows folks to embed YouTube & Vimeo videos via Liquid Tags:

https://dev-to-uploads.s3.amazonaws.com/i/jbiro72vueo6fi9k9rww.png

By the way, here's a link to the editor guide where you can see other liquid tags and formatting options.

Hope this is helpful! 🙂

Collapse
 
cristoferk profile image
CristoferK

Sorry but it's saying error

Collapse
 
instanceofgod profile image
instanceofGod

Good job Well done!

Collapse
 
cristoferk profile image
CristoferK

thanks!