TimesCoding

Learn, Practice, and Excel with our Coding Tutorials!

Create a Stylish Analog Watch with HTML, CSS, and JavaScript

June 12, 2024 3 Min read CSS HTML JAVASCRIPT

Creating a stylish analog watch using HTML, CSS, and JavaScript involves simulating the appearance and movement of clock hands. We’ll build a simple analog clock with rotating hour, minute, and second hands.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylish Analog Watch</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="clock">
        <div class="center"></div>
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand second-hand"></div>
        <div class="number number1">1</div>
        <div class="number number2">2</div>
        <div class="number number3">3</div>
        <div class="number number4">4</div>
        <div class="number number5">5</div>
        <div class="number number6">6</div>
        <div class="number number7">7</div>
        <div class="number number8">8</div>
        <div class="number number9">9</div>
        <div class="number number10">10</div>
        <div class="number number11">11</div>
        <div class="number number12">12</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

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

.clock {
    position: relative;
    width: 300px;
    height: 300px;
    background: linear-gradient(145deg, #1c1c1c, #444);
    border-radius: 50%;
    box-shadow: 10px 10px 20px #111, -10px -10px 20px #555;
    border: 10px solid #000;
}

.center {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensure the center is above the hands */
}

.hand {
    position: absolute;
    width: 50%;
    height: 6px;
    background-color: #fff;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: transform 0.5s ease-in-out;
}

.hour-hand {
    height: 8px;
    background-color: #00ff00;
    z-index: 2; /* Ensure the hour hand is below the center */
}

.minute-hand {
    height: 6px;
    background-color: #00ffff;
    z-index: 3; /* Ensure the minute hand is below the center */
}

.second-hand {
    height: 4px;
    background-color: #ff0000;
    z-index: 4; /* Ensure the second hand is below the center */
}

.number {
    position: absolute;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}

.number1  { top: 15%; left: 72%; transform: translate(-50%, -50%); }
.number2  { top: 28%; left: 85%; transform: translate(-50%, -50%); }
.number3  { top: 50%; left: 90%; transform: translate(-50%, -50%); }
.number4  { top: 72%; left: 85%; transform: translate(-50%, -50%); }
.number5  { top: 85%; left: 72%; transform: translate(-50%, -50%); }
.number6  { top: 90%; left: 50%; transform: translate(-50%, -50%); }
.number7  { top: 85%; left: 28%; transform: translate(-50%, -50%); }
.number8  { top: 72%; left: 15%; transform: translate(-50%, -50%); }
.number9  { top: 50%; left: 10%; transform: translate(-50%, -50%); }
.number10 { top: 28%; left: 15%; transform: translate(-50%, -50%); }
.number11 { top: 15%; left: 28%; transform: translate(-50%, -50%); }
.number12 { top: 10%; left: 50%; transform: translate(-50%, -50%); }

JavaScript (script.js)

function setClock() {
    const now = new Date();
    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours();
    
    const secondsDegree = ((seconds / 60) * 360) + 90;
    const minutesDegree = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
    const hoursDegree = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
    
    document.querySelector('.second-hand').style.transform = `rotate(${secondsDegree}deg)`;
    document.querySelector('.minute-hand').style.transform = `rotate(${minutesDegree}deg)`;
    document.querySelector('.hour-hand').style.transform = `rotate(${hoursDegree}deg)`;
}

setInterval(setClock, 1000);
setClock();  // Initial call to set the clock immediately

This setup creates a visually appealing analog clock that updates in real time. You can further enhance the design and functionality as needed.

Related Post:
Trendy Website Color Combinations for 2024 − Here are some trending color combinations to consider for your website, including header, footer, sidebar, and content section colors with codes: 1. Balanced Brights: 2..
How to Create a Stylish Digital Watch with HTML, CSS, and JavaScript − Creating a digital watch similar to an Apple Watch using HTML, CSS, and JavaScript involves several steps. We’ll build a simple, functional digital clock that.
Creating a Stylish and Responsive Bootstrap Menu with Colorful Toggle Icon − Below is a simple responsive Bootstrap 5 template that you can use as a starting point for your project. This template includes a stylish &.
Responsive Web Design with CSS: A Short Tutorial − Responsive web design is a crucial aspect of modern web development. It ensures that your website looks and functions well on a variety of devices,.
How to Create a Modern Stylish Accordion with Arrows Using Only HTML and CSS − This modern and stylish accordion is created using only HTML and CSS, featuring smooth transitions and interactive arrows that change direction upon expansion. It’s perfect.
How to Create a Stylish and Modern HTML Select Field Using CSS − Creating a modern and stylish HTML “Select” field involves using CSS to enhance the default styling. Here’s an example of how you can achieve this:.
Modern and Stylish Button with Gradient and Hover Effects − This modern and stylish button features a vibrant gradient background that seamlessly transitions on hover, coupled with a subtle box shadow for added depth. Its.
Creating a Modern Responsive Menu with HTML & CSS Only − Learn how to design a stylish and modern website header section and responsive menu using just HTML and CSS, with a responsive menu that toggles.
Design a Modern and Stylish Login Form using HTML and CSS − This is a modern and stylish login form using HTML and CSS, featuring 3D effects, colorful fields, and a button. The “Not registered? Create an.
Creating a Modern Button with Stylish Hover Effects Using CSS − This is a modern and stylish button with a simple hover effect using CSS. The button has a bold border & the border color will.
How to Create a Colorful Tic-Tac-Toe Game with HTML, CSS and JavaScript − Here’s a colorful Tic-Tac-Toe game implemented using HTML, CSS, and JavaScript only. The game includes a restart button, winner message, and special effects for the.
Pure CSS Custom Modern and Stylish Checkboxes − Creating a custom modern and stylish checkboxes using pure CSS can enhance the visual appeal of your web forms. Here’s a simple and elegant checkboxes.