create a digital clock using html css and js

Hey, I am Ajink, and today in this blog, we’re going to create a digital clock using HTML, CSS, and JavaScript. This simple yet effective digital clock will display the current time, providing a dynamic and interactive user experience.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Digital Clock</title>
</head>
<body>
  <div class="clock-container">
    <div id="time"></div>
  </div>
  <script src="app.js"></script>
</body>
</html>

HTML Code Explanation:

  • The HTML structure consists of a container for the clock and a div to display the current time.

CSS Code:

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.clock-container {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

#time {
  font-size: 36px;
}

CSS Code Explanation:

  • The CSS provides styling for the clock container and the displayed time.

JavaScript Code:

function updateTime() {
  const timeElement = document.getElementById('time');
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  const currentTime = `${hours}:${minutes}:${seconds}`;
  timeElement.innerText = currentTime;
}

// Update the time every second
setInterval(updateTime, 1000);

// Initial update
updateTime();

JavaScript Code Explanation:

  • The JavaScript code defines a function updateTime to get the current time and update the displayed time.
  • The setInterval function is used to call updateTime every second, ensuring the clock is always showing the correct time.

Conclusion:

In this blog, we successfully created a digital clock using HTML, CSS, and JavaScript. The digital clock dynamically updates to display the current time, providing users with a real-time experience. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Ajink Gupta
Ajink Gupta
Articles: 38