create clock using html css javascript, clock, miniproject

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see a plugin called Moment.js. MomentJS is a JavaScript library which helps is parsing, validating, manipulating and displaying date/time in JavaScript in a very easy way. Moment JS allows displaying of date as per localization and in human readable format. You can use MomentJS inside a browser using the script method. It is an open source project and you can easily contribute to the library and add features in the form of plugins.

Here's a preview -

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Clock using moment.js</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="clock-container">
  <div class="clock-col">
    <p class="clock-day clock-timer">
    </p>
    <p class="clock-label">
      Day
    </p>
  </div>
  <div class="clock-col">
    <p class="clock-hours clock-timer">
    </p>
    <p class="clock-label">
      Hours
    </p>
  </div>
  <div class="clock-col">
    <p class="clock-minutes clock-timer">
    </p>
    <p class="clock-label">
      Minutes
    </p>
  </div>
  <div class="clock-col">
    <p class="clock-seconds clock-timer">
    </p>
    <p class="clock-label">
      Seconds
    </p>
  </div>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js'></script><script  src="./script.js"></script>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

.clock-day:before {
  content: var(--day);
}
.clock-hours:before {
  content: var(--hours);
}
.clock-minutes:before {
  content: var(--minutes);
}
.clock-seconds:before {
  content: var(--seconds);
}
body {
  background: #f6f7fc;
  font-family: "Montserrat", "sans-serif";
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clock-container {
  margin-top: 30px;
  margin-bottom: 30px;
  background: linear-gradient(45deg, #373b44, #4286f4);
  border-radius: 100px;
  padding: 60px 20px;
  box-shadow: 2px 53px 58px -15px rgba(107,107,107,1);
  display: flex;
}
.clock-col {
  text-align: center;
  margin-right: 40px;
  margin-left: 40px;
  min-width: 90px;
  position: relative;
}
.clock-col:not(:last-child):before,
.clock-col:not(:last-child):after {
  content: "";
  background-color: rgba(255, 255, 255, 0.3);
  height: 5px;
  width: 5px;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: -42px;
}
.clock-col:not(:last-child):before {
  top: 35%;
}
.clock-col:not(:last-child):after {
  top: 50%;
}
.clock-timer:before {
  color: #fff;
  font-size: 4.2rem;
  text-transform: uppercase;
}
.clock-label {
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-top: 10px;
}

Step - 4: Below is the JavaScript code which is the most important part in this Clock. In this we're using moment() to get the current date, time and location. And format() is used to format the current date and time according to your requirement.

For example - You want to format date, the see the following use cases of moment().

moment().format('MMMM Do YYYY, h:mm:ss a'); // September 1st 2021, 2:43:28 pm
moment().format('dddd');                    // Wednesday
moment().format("MMM Do YY");               // Sep 1st 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();

Now suppose you want to show relative time like 5 years ago from now, or 10 years later then you can see the following use cases.

moment("20111031", "YYYYMMDD").fromNow(); // 10 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 9 years ago
moment().startOf('day').fromNow();        // 15 hours ago
moment().endOf('day').fromNow();          // in 9 hours
moment().startOf('hour').fromNow();       // an hour ago

If you want to use the calender time -

moment().subtract(10, 'days').calendar(); // 08/22/2021
moment().subtract(6, 'days').calendar();  // Last Thursday at 2:45 PM
moment().subtract(3, 'days').calendar();  // Last Sunday at 2:45 PM
moment().subtract(1, 'days').calendar();  // Yesterday at 2:45 PM
moment().calendar();                      // Today at 2:45 PM
moment().add(1, 'days').calendar();       // Tomorrow at 2:45 PM
moment().add(3, 'days').calendar();       // Saturday at 2:45 PM
moment().add(10, 'days').calendar();      // 09/11/2021

Visit official website of Moment.js to learn more.

JS

document.addEventListener("DOMContentLoaded", () => requestAnimationFrame(updateTime));

function updateTime() {
    document.documentElement.style.setProperty("--day", "'" + moment().format("dd") + "'");
    document.documentElement.style.setProperty("--hours", "'" + moment().format("k") + "'");
    document.documentElement.style.setProperty("--minutes", "'" + moment().format("mm") + "'");
    document.documentElement.style.setProperty("--seconds", "'" + moment().format("ss") + "'");

    requestAnimationFrame(updateTime);
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

Create a Clock using Moment.js

HTML

CSS

JS