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