Make A Simple Clock Using HTML, CSS And JavaScript

Hello world, I am back with another interesting and informative blog in this blog I am going to show you how you can make a simple clock using HTML, CSS And JavaScript.

Let's start

I am not going to make it tough, I have already perpared a code just paste it into notepad and it will work. Final code will be uploaded at the end.

HTML CODE

   <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=,initial-scale="/>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" 
  rel="stylesheet"/>
  <title>Clock</title>
  </head>
  <body>
  <div id="clock"></div>
  </body>
  </html>

CSS CODE

    body {
    margin: 5;
    padding: 3;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
    }

    #clock {
     height: 100vh;
     width: 100%;
     background-color:0FFFF;
     color:     #FF8C00;
     font-size: 100px;
     }

JavaScript Code

     let clock = () => {
     let date = new Date();
     let hrs = date.getHours();
     let mins = date.getMinutes();
     let secs = date.getSeconds();
     let period = "AM";
     if (hrs == 0) {
     hrs = 12;
     } else if (hrs >= 12) {
     hrs = hrs - 12;
     period = "PM";
     }
     hrs = hrs < 10 ? "0" + hrs : hrs;
     mins = mins < 10 ? "0" + mins : mins;
     secs = secs < 10 ? "0" + secs : secs;

    let time = `${hrs}:${mins}:${secs}:${period}`;
    document.getElementById("clock").innerText = time;
    setTimeout(clock, 1000);
     };

    clock();

You can adjust the background color and text color according to you.

Output

Screenshot 2021-05-19 162057.png

The final code is here

If you want to support me then please like my blog , subscribe newsletter so you get notified when I post a new blog and you can also follow me.

please let me know your opinion in comment box

Here is the link of my discord server

Shlok Dungrani's Blog

Shlok Dungrani's Blog

Make A Simple Clock Using HTML, CSS And JavaScript