Here is the link to the project we will be building https://digitalclock-rho.vercel.app/?vercelToolbarCode=aJS30SsxtruOrlJ

Prerequisites

Knowledge in HTML
knowledge in CSS
Knowledge in JavaScript

Let's write the HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>clock</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Russo+One|Exo|Exo:wght@700|Rajdhani:wght@600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="digitalclock" onload="getTime()" class="clock"></div>
  </body>
  <script src="index.js"></script>
</html>

Added our font, will be using Exo, added our div, and id, which we will use in our javascript code, class "clock" for styling, and the function that will be called when the page loads.

Now our CSS function

body {
  background-color: black;
}
.clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 7em;
  letter-spacing: 9px;
  color: #39b0ef;
  font-family: "Exo", sans-serif;
  font-weight: 700;
}

@media screen and (max-width: 720px) {
  .clock {
    font-size: 4em;
  }
}

Now let's start creating our clock, first, we will state the things the clock should have

Should be a 12-hour display
Should display AM or PM depending on the day
There should be no single digit

First, we define our function, make an instance of the javascript Date function, and then we set our hour, minute, and seconds.

function getTime() {
  let date = new Date();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let seconds = date.getSeconds();

}

function getTime() {
  let date = new Date();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let seconds = date.getSeconds();

  let session = "AM";

  if (hour == 0) {
    hour = 12;
    session = "AM";
  }
  if (hour >= 12) {
    session = "PM";
    if (hour > 12) hour = hour - 12;
  }

If the hour is 0, we set it to 12 and the session to AM, if it's greater or equal to 12, we set the session to PM, and if the hour is greater than 12, we subtract 12 from the hour.

function getTime() {
  let date = new Date();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let seconds = date.getSeconds();

  let session = "AM";

  if (hour == 0) {
    hour = 12;
    session = "AM";
  }
  if (hour >= 12) {
    session = "PM";
    if (hour > 12) hour = hour - 12;
  }

  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  let time = hour + ":" + minute + ":" + seconds + " " + session;
  document.getElementById("digitalclock").innerText = time;
}
getTime();
setInterval(getTime, 1000);

If the hour, minute, or second is less than 10, we prefix it with 0, get the div, and put the time in the inner text. We want the clock to refresh by itself, for that we use setInterval and set the time to 1 second.

That's it we are done, now let's deploy.

Push your code to GitHub, and sign in to Vercel or log in if you have an account.

Add your GitHub profile

Click install

My github desktop wasn't not working so I had to use my password, just click use password.

Vercel now has access to all your public repos, that was the one selected or a specific repo. We are almost done. Import the repo you want to deploy, in our case digital clock.

We don't configure anything in build and output settings so we leave it blank,

As well as Environment and variables. Click deploy and that's it.

To visit our deployed website, continue to Dashboard.

And Visit your deployed Site.

Please note that I had a mistake in my code at the time of deploying, which is why some are in 24-hour format, that has been corrected in the code.

Conclusion

That is how to create a digital clock in javascript and deploy it with Vercel. I encourage you to type the code, instead of copying and pasting it will help you learn better.

Create a Digital Clock with Javascript And Host It On Vercel.

Conclusion