How to Create a Stylish Analog Clock Using JavaScript

on

How to Create a Stylish Analog Clock Using JavaScript

Introduction

Creating an analog clock using JavaScript is a great way to practice working with HTML, CSS, and JavaScript. In this article, we’ll walk through the process of building a stylish, fully functional analog clock that dynamically updates with the correct time.




Setting Up the Basic HTML Structure

To start, we need a simple HTML structure that includes a container for the clock and some div elements for the clock hands.

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

Styling the Clock with CSS

Next, we add some CSS to make the clock visually appealing. We’ll use a circular design and position the clock hands appropriately.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: radial-gradient(circle, #141e30, #243b55);
    color: white;
    text-align: center;
}
.clock-container {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid white;
    background: black;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}
.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    background: white;
    border-radius: 5px;
}
.hour { width: 6px; height: 50px; transform: translateX(-50%); }
.minute { width: 4px; height: 70px; transform: translateX(-50%); }
.second { width: 2px; height: 90px; background: red; transform: translateX(-50%); }

Implementing the JavaScript Logic

Now, we’ll write JavaScript to make the clock hands move according to the current time.

function updateClock() {
    let now = new Date();
    let hours = now.getHours() % 12;
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    
    let hourDeg = (hours * 30) + (minutes / 2);
    let minuteDeg = (minutes * 6) + (seconds / 10);
    let secondDeg = seconds * 6;
    
    document.getElementById("hour-hand").style.transform = `rotate(${hourDeg}deg)`;
    document.getElementById("minute-hand").style.transform = `rotate(${minuteDeg}deg)`;
    document.getElementById("second-hand").style.transform = `rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock();

Enhancing with Additional Features

To make the clock more interactive and visually appealing, we can add:

  • Numbers for the clock face
  • A digital time display when clicked
  • A background image for customization

Conclusion

Building an analog clock with JavaScript is an excellent way to improve your skills in working with CSS animations and DOM manipulation. By following this guide, you now have a fully functional and stylish clock that updates dynamically.

Happy coding! 🚀

Analog Clock with Effects

Your Local Time

12
3
6
9

Comments

Post a Comment