DEV Community

Pratik Pathak
Pratik Pathak

Posted on • Originally published at pratikpathak.com on

I created a Digital Clock using Javascript in a Min

#html #css #javascript

Digital Clock using javascript is a project that shows the time along with the Date. It uses your system time to fetch the current time and displays it.

Source Code for Digital Clock Javascript

Simple digital clock application built with HTML, CSS, and JavaScript. The JavaScript file (index.js) would contain the logic to get the current date and time, format it appropriately, and update the dayName and time elements in the HTML.

Live Preview Source Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Digital Clock</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!--Display day information e.g Wednesday March 12,2021-->
    <div id="dayIntro">
      <p id="dayName"></p>
    </div>
    <div class="container">
      <!-- Display time -->
      <div class="dispClock">
        <div id="time"></div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>


/* Google font */
@import url("https://fonts.googleapis.com/css?family=Orbitron");

* {
  margin: 0;
  padding: 0;
}
html,
body {
  display: grid;
  place-items: center;
}
#dayIntro {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 3px;
  border: 7px solid rgb(17, 129, 134);
  border-radius: 10px;
  margin: 20px;
  font-family: "Times New Roman", Times, serif;
  padding: 15px;
  background: linear-gradient(180deg, #a8b9d3, rgb(173, 227, 229));
}
.container {
  height: 120px;
  width: 550px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
}
.container .dispClock,
.container {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container .dispClock {
  top: 50%;
  height: 105px;
  width: 535px;
  background: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
  border-radius: 6px;
  text-align: center;
}
.dispClock #time {
  line-height: 85px;
  color: #fff;
  font-size: 70px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: "Orbitron", sans-serif;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


setInterval(currentTime, 1000);

function currentTime() {
  let time = new Date(); // creating object of Date class
  let dayName = time.getDay();
  let month = time.getMonth();
  let year = time.getFullYear();
  let date = time.getDate();
  let hour = time.getHours();
  let min = time.getMinutes();
  let sec = time.getSeconds();

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

  hour = hour < 10 ? "0" + hour : hour;
  min = min < 10 ? "0" + min : min;
  sec = sec < 10 ? "0" + sec : sec;

  //value of current time
  let currentTime = hour + ":" + min + ":" + sec + " " + am_pm;

  // value of present day(Day, Month, Year)
  var months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  var week = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];

  var presentDay =
    week[dayName] + ", " + months[month] + " " + date + ", " + year;

  const clock = document.getElementById("time");
  const dayIntro = document.getElementById("dayName");

  clock.innerHTML = currentTime;
  dayIntro.innerHTML = presentDay;
}

currentTime(); //calling currentTime() function to initiate the process
Enter fullscreen mode Exit fullscreen mode

More about Index.html – Digital Clock

  • The HTML structure includes a div with the id dayIntro to display the day information (e.g., “Wednesday March 12, 2021”). The p element with the id dayName is likely updated with JavaScript to display the current day.
  • There’s another div with the class container that contains a div with the class dispClock. Inside this div, there’s another div with the id time. This is likely where the current time is displayed, updated by JavaScript.
  • The CSS file (linked as style.css) would be responsible for styling these elements to look like a digital clock.
  • The JavaScript file (linked as index.js) would contain the logic to get the current date and time, format it appropriately, and update the dayName and time elements in the HTML.

More about Style.css – Digital Clock

This CSS file is styling the HTML elements for the digital clock application. Here’s a breakdown of the styles:

  • @import url("https://fonts.googleapis.com/css?family=Orbitron");: This line imports the Orbitron font from Google Fonts.
  • *: This is a universal selector that targets all elements. It sets the margin and padding of all elements to 0.
  • html, body: These elements are set to display as a grid with items centered both vertically and horizontally.
  • #dayIntro: This id selector targets the div that displays the day information. It sets the font size, weight, letter spacing, border, border radius, margin, font family, padding, and background color. The background is a linear gradient.
  • .container: This class selector targets the main div that contains the clock. It sets the height, width, position, background color (a linear gradient), border radius, and cursor style.
  • .container .dispClock, .container: These selectors target the div that displays the time and the container div. They set the position, top, left, and transform properties to center the div both vertically and horizontally.
  • .container .dispClock: This selector targets the div that displays the time. It sets the top, height, width, background color (a linear gradient), border radius, and text alignment.
  • .dispClock #time: This selector targets the div that displays the current time. It sets the line height, color, font size, weight, letter spacing, font family, and background color. The background is a linear gradient and the -webkit-background-clip and -webkit-text-fill-color properties are used to make the text transparent and show the background gradient through the text.

These styles are likely used in combination with the HTML structure to create a digital clock with a modern, colorful design.

More about Script.js – Digital Clock

This JavaScript file is responsible for the functionality of the digital clock application. Here’s a breakdown:

  • setInterval(currentTime, 1000);: This line sets up a timer that calls the currentTime function every 1000 milliseconds (or 1 second). This is how the clock updates every second.
  • currentTime(): This function gets the current date and time, formats it, and updates the HTML elements to display it.
    • let time = new Date();: This line creates a new Date object with the current date and time.
    • The next several lines get the current day, month, year, date, hour, minute, and second.
    • The if statements determine whether it’s AM or PM and adjust the hour accordingly.
    • The next three lines add a leading zero to the hour, minute, and second if they’re less than 10.
    • let currentTime = hour + ":" + min + ":" + sec + " " + am_pm;: This line formats the current time as a string.
    • The months and week arrays hold the names of the months and days of the week.
    • var presentDay = week[dayName] + ", " + months[month] + " " + date + ", " + year;: This line formats the current date as a string.
    • const clock = document.getElementById("time"); const dayIntro = document.getElementById("dayName");: These lines get references to the HTML elements that display the time and date.
    • clock.innerHTML = currentTime; dayIntro.innerHTML = presentDay;: These lines update the HTML elements with the current time and date.
  • currentTime();: This line calls the currentTime function to start the process.

This script enables the digital clock to display the current date and time, updating every second.

Top comments (0)