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!

Related Articles

Responses

Your email address will not be published. Required fields are marked *