How to make a simple cool looking digital clock with HTML/CSS/JS

How to make a simple cool looking digital clock with HTML/CSS/JS

So you figured out some HTML and CSS. What’s next? Well, how about making a digital clock!

So you figured out some HTML and CSS. What’s next? Well, how about making a digital clock!

1. Index.html

But first, we need an index.htmlfile. Make a new index.html file and add the code below.

<!DOCTYPE html>
    <html>
    <head>
      <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" />
      <link rel="stylesheet" href="style.css" />
      <script src="script.js" async></script>
    </head>
    <body onload="startTime()">
      <div class="line">
        <div class="time">
           ERROR
           ERROR
        </div>
      </div>
    </body>
    </html>

2. Script.js

We’ve added the skeleton but the clock is useless without actually telling the time. Make a new file called script.js and add the code below.

function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById("time").innerHTML = h + ":" + m + ":" + s; //Add Time to id="time"
        var t = setTimeout(startTime, 500);
        n = new Date();
        y = n.getFullYear();
        m = n.getMonth() + 1;
        d = n.getDate();
        document.getElementById("date").innerHTML = m + "•" + d + "•" + y; //Add Date to id="date"
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    setInterval(() => {
        document.title = new Date().toLocaleTimeString(); //Update title tag
    }, 1);

css js html digital digital-clock

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Build Digital Clock with JavaScript - Beginner HTML, CSS & JS Tutorial

We'll be building a simple Digital Clock using only HTML, CSS and JavaScript. This demonstrates how we can use web languages/tech to build something tangible.

How To Make Digital Clock in JavaScript | Digital Clock in JS

Download the File: https://drive.google.com/file/d/1szRSGeeo0KwTW6VXM_sKiRsw0XTVm5zk/view?usp=sharing In this tutorial, we will develop a digital clock using...

Digital Clock | HTML, CSS & Vanilla JS

You will learn in this video how to make a digital watch step by step, using only HTML / CSS and some Vanilla JS. Link for the Picture: https://i.imgur.com/7...

CSS Digital Clock Animation | CSS Clock - GS Code

In this post, we've cataloged 30+ Creative CSS Digital Clock Animation around the web.20+ Cool CSS Clock Code Snippets

Digital Clock With HTML , CSS and Vanilla Javascript

In this video, will going to show how to make a digital clock using HTML , CSS and Javascript . If you enjoyed the video don't forget to subscribe and turn on...