Logo

Building a Sleek Analog Clock with HTML, CSS, and JavaScript

Codewithhridoy

Codewithhridoy

· 2 min read
Building a Sleek Analog Clock with HTML, CSS, and JavaScript

In today's tutorial, we're going to create a stylish analog clock using HTML, CSS, and JavaScript. This project is perfect for web developers looking to enhance their front-end skills while creating a functional and visually appealing component.

The Final Result

Before we dive into the code, let's take a look at what we'll be building:

Image

Our clock features a sleek dark theme with vibrant, color-coded hands for hours, minutes, and seconds. The design is modern, minimalist, and highly readable.

The HTML Structure

Let's start with the HTML structure of our clock:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Analog Clock</title>
  </head>

  <body>
    <div class="container">
      <div class="clock">
        <div style="--clr: #ff3d58; --h: 74px" id="hour" class="hand">
          <i></i>
        </div>
        <div style="--clr: #00a6ff; --h: 84px" id="min" class="hand">
          <i></i>
        </div>
        <div style="--clr: #ffffff; --h: 94px" id="sec" class="hand">
          <i></i>
        </div>

        <span style="--i: 1"><b>1</b></span>
        <span style="--i: 2"><b>2</b></span>
        <span style="--i: 3"><b>3</b></span>
        <span style="--i: 4"><b>4</b></span>
        <span style="--i: 5"><b>5</b></span>
        <span style="--i: 6"><b>6</b></span>
        <span style="--i: 7"><b>7</b></span>
        <span style="--i: 8"><b>8</b></span>
        <span style="--i: 9"><b>9</b></span>
        <span style="--i: 10"><b>10</b></span>
        <span style="--i: 11"><b>11</b></span>
        <span style="--i: 12"><b>12</b></span>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

This structure creates a container for our clock, defines the clock face, and sets up the hands and number markers.

Styling with CSS

Now, let's add some style to our clock with CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #ffffff;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #212121;
}

.container{
    position: relative;
}

.clock{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock span{
    position: absolute;
    transform: rotate(calc(30deg * var(--i))); 
    inset: 12px;
    text-align: center;
}

.clock span b{
    transform: rotate(calc(-30deg * var(--i)));
    display: inline-block;
    font-size: 20px;
}

.clock::before{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
}

.hand{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.hand i{
    position: absolute;
    background-color: var(--clr);
    width: 4px;
    height: var(--h);
    border-radius: 8px;
}

This CSS creates the sleek, dark theme of our clock and positions the elements correctly.

Adding Functionality with JavaScript

Finally, let's bring our clock to life with JavaScript:

let hr = document.getElementById('hour');
let min = document.getElementById('min');
let sec = document.getElementById('sec');

function displayTime(){
    let date = new Date();

    // Getting hour, mins, secs from date
    let hh = date.getHours();
    let mm = date.getMinutes();
    let ss = date.getSeconds();

    let hRotation = 30*hh + mm/2;
    let mRotation = 6*mm;
    let sRotation = 6*ss;

    hr.style.transform = `rotate(${hRotation}deg)`;
    min.style.transform = `rotate(${mRotation}deg)`;
    sec.style.transform = `rotate(${sRotation}deg)`;

}

setInterval(displayTime, 1000);

This script updates the position of the clock hands every second, creating a smooth, real-time clock.

Conclusion

And there you have it! A sleek, functional analog clock created with HTML, CSS, and JavaScript. This project demonstrates the power of combining these three technologies to create interactive and visually appealing web components.

Some key takeaways from this project:

  1. CSS variables can be used creatively for dynamic styling.
  2. JavaScript's Date object is powerful for time-based applications.
  3. CSS transforms can create smooth animations without heavy JavaScript.

Feel free to customize the colors, size, or add additional features to make this clock your own.

Happy coding!

Comments

No approved comments available yet