Create Glowing Analog Clock with HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a glowing analog clock using HTML, CSS, and JavaScript with our easy guide.

Join us on Telegram
create-glowing-analog-clock-with-html-css-and-javascript.webp
Read Alsobuild a professional article details page from scratch with html, css, and vanilla javascript.jpgBuild a Professional Article Details Page from Scratch with HTML, CSS, and Vanilla JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Creating a glowing analog clock with HTML, CSS, and JavaScript is a fantastic project for anyone interested in web development. This project is not only fun but also educational, helping you understand how to combine different web technologies to create something visually appealing and functional. By following this guide, you’ll learn how to build a classic analog clock that features a cool glowing effect. It’s a great way for beginners to practice coding and design skills.

Before we dive in, make sure you have a basic understanding of HTML for structuring your clock, CSS for styling it, and JavaScript for adding functionality. You’ll need a code editor, like VS Code, and a web browser to see your work. Let’s get started on creating your glowing analog clock!

Source Code

Step 1 (HTML Code):

Open index.html and add the basic HTML structure for your clock. Here's a breakdown of each part:

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used. Here, it specifies HTML5.

<html lang="en">: This tag starts the HTML document and sets the language of the document to English.

<head>: Contains meta-information about the HTML document, such as the character set, viewport settings, and links to stylesheets or scripts.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports many languages and symbols.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive and scales properly on different devices by setting the viewport width to the device width and the initial zoom level to 1.
  • <title>Analog Clock</title>: Sets the title of the web page, which appears in the browser's title bar or tab.
  • <link rel="stylesheet" href="styles.css">: Links to an external CSS file (styles.css) for styling the clock.

<body>: Contains the content that will be displayed on the web page.

  • <div class="clock">: A container for the clock elements. It has a class of clock, which will be used in CSS and JavaScript for styling and functionality.
    • <div class="hour-hand"></div>: Represents the hour hand of the clock.
    • <div class="minute-hand"></div>: Represents the minute hand of the clock.
    • <div class="second-hand"></div>: Represents the second hand of the clock.
    • <div class="center-pin"></div>: Represents the center pin of the clock where the hands are fixed.
    • <div class="marker marker1"></div>: Represents a clock marker, styled with marker and marker1 classes.
    • <div class="marker marker2"></div>: Another clock marker with different styling.
    • <div class="marker marker3"></div>: Another clock marker with a third style.
    • <div class="marker marker4"></div>: Another clock marker with a fourth style.

<script src="script.js"></script>: Links to an external JavaScript file (script.js) that will contain code to animate the clock hands and update their positions based on the current time.

Read Alsocreate-id-card-generator-using-html-css-and-javascript.webpCreate ID Card Generator Using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Open styles.css and add styles to center the clock and give it a classic analog look. Here’s a detailed explanation of each section:

Body Styling

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #825CFF;
  margin: 0;
}
  • display: flex;: Uses Flexbox to lay out child elements.
  • justify-content: center;: Centers the clock horizontally within the viewport.
  • align-items: center;: Centers the clock vertically within the viewport.
  • height: 100vh;: Sets the body height to 100% of the viewport height.
  • background: #825CFF;: Applies a purple background color to the entire page.
  • margin: 0;: Removes default margin around the body.

Clock Styling

.clock {
  position: relative;
  width: 350px;
  height: 350px;
  border: 12px solid #333;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #f0f0f0);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}
  • position: relative;: Allows positioning of child elements (hour-hand, minute-hand, etc.) relative to the clock.
  • width and height: Sets the clock’s size to 350px by 350px.
  • border: 12px solid #333;: Adds a 12px solid border around the clock with a dark color.
  • border-radius: 50%;: Makes the clock circular.
  • background: radial-gradient(circle, #fff, #f0f0f0);: Creates a gradient background that transitions from white to light gray.
  • box-shadow: Adds a shadow effect to give a 3D appearance.

Center Pin Styling

.center-pin {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #666, #333);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.7); 
}
  • position: absolute;: Positions the pin absolutely within the clock.
  • width and height: Sets the size of the pin to 20px by 20px.
  • background: radial-gradient(circle, #666, #333);: Creates a gradient background from gray to dark gray.
  • border-radius: 50%;: Makes the pin circular.
  • top: 50%; and left: 50%;: Centers the pin in the middle of the clock.
  • transform: translate(-50%, -50%);: Adjusts the pin’s position so its center aligns with the clock's center.
  • box-shadow: Adds shadows to the pin for a 3D effect.

Clock Hands Styling

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: rotate(90deg);
  border-radius: 2px;
}
  • position: absolute;: Positions the hands absolutely within the clock.
  • bottom: 50%; and left: 50%;: Places the base of each hand at the center of the clock.
  • transform-origin: bottom center;: Sets the rotation point at the bottom center of each hand.
  • transform: rotate(90deg);: Rotates the hands by 90 degrees to position them correctly.
  • border-radius: 2px;: Rounds the edges of the hands slightly.

Hour Hand Styling

.hour-hand {
  width: 8px;
  height: 90px;
  background: linear-gradient(to bottom, #444, #222);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.7);
}
  • width and height: Sets the size of the hour hand.
  • background: linear-gradient(to bottom, #444, #222);: Creates a gradient from dark gray to almost black.
  • box-shadow: Adds a shadow effect.

Minute Hand Styling

.minute-hand {
  width: 6px;
  height: 130px;
  background: linear-gradient(to bottom, #666, #333);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.7);
}
  • width and height: Sets the size of the minute hand.
  • background: linear-gradient(to bottom, #666, #333);: Creates a gradient from gray to dark gray.
  • box-shadow: Adds a shadow effect.

Second Hand Styling

.second-hand {
  width: 3px;
  height: 150px;
  background: linear-gradient(to bottom, #cc0000, #800000);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 25px rgba(255, 0, 0, 1); 
}
  • width and height: Sets the size of the second hand.
  • background: linear-gradient(to bottom, #cc0000, #800000);: Creates a gradient from bright red to dark red.
  • box-shadow: Adds a red shadow effect.

Clock Markers Styling

.marker {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #333; 
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
  • position: absolute;: Positions the markers absolutely within the clock.
  • width and height: Sets the size of the markers.
  • background-color: #333;: Sets the marker color to dark gray.
  • border-radius: 50%;: Makes the markers circular.
  • box-shadow: Adds a shadow effect.

Marker Positioning

.marker1 { top: 5px; left: calc(50% - 5px); }
.marker2 { bottom: 5px; left: calc(50% - 5px); }
.marker3 { left: 5px; top: calc(50% - 5px); }
.marker4 { right: 5px; top: calc(50% - 5px); }
  • marker1: Positioned at the top center of the clock.
  • marker2: Positioned at the bottom center of the clock.
  • marker3: Positioned at the left center of the clock.
  • marker4: Positioned at the right center of the clock.
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #825CFF;
  margin: 0;
}

.clock {
  position: relative;
  width: 350px;
  height: 350px;
  border: 12px solid #333;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #f0f0f0);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}

.center-pin {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #666, #333);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.7); 
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: rotate(90deg);
  border-radius: 2px;
}

.hour-hand {
  width: 8px;
  height: 90px;
  background: linear-gradient(to bottom, #444, #222);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.7);
}

.minute-hand {
  width: 6px;
  height: 130px;
  background: linear-gradient(to bottom, #666, #333);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.7);
}

.second-hand {
  width: 3px;
  height: 150px;
  background: linear-gradient(to bottom, #cc0000, #800000);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 25px rgba(255, 0, 0, 1); 
}

.marker {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #333; 
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.marker1 { top: 5px; left: calc(50% - 5px); }
.marker2 { bottom: 5px; left: calc(50% - 5px); }
.marker3 { left: 5px; top: calc(50% - 5px); }
.marker4 { right: 5px; top: calc(50% - 5px); }

Step 3 (JavaScript Code):

Open script.js and add the JavaScript to update the clock hands based on the current time. Here's a detailed breakdown:

Variable Declarations

const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');
  • hourHand, minuteHand, secondHand: These constants store references to the clock hand elements in the HTML document. The document.querySelector method is used to select the elements with the respective classes.

setClock Function

function setClock() {
  const now = new Date();

  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  const secondDegrees = (seconds / 60) * 360;
  const minuteDegrees = (minutes / 60) * 360 + (seconds / 60) * 6;
  const hourDegrees = (hours % 12 / 12) * 360 + (minutes / 60) * 30;

  secondHand.style.transform = `rotate(${secondDegrees}deg)`;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
  • const now = new Date();: Creates a Date object representing the current date and time.
  • const seconds = now.getSeconds();: Retrieves the current seconds.
  • const minutes = now.getMinutes();: Retrieves the current minutes.
  • const hours = now.getHours();: Retrieves the current hours.
  • const secondDegrees = (seconds / 60) * 360;: Converts the current seconds into degrees for the second hand. Since the second hand completes a full circle (360 degrees) in 60 seconds, the formula (seconds / 60) * 360 calculates its current rotation.
  • const minuteDegrees = (minutes / 60) * 360 + (seconds / 60) * 6;: Converts the current minutes and seconds into degrees for the minute hand. The minute hand completes a full circle in 60 minutes, so (minutes / 60) * 360 gives its rotation. Additionally, the seconds are converted to degrees to account for the small movement of the minute hand as seconds pass.
  • const hourDegrees = (hours % 12 / 12) * 360 + (minutes / 60) * 30;: Converts the current hours and minutes into degrees for the hour hand. The hour hand completes a full circle in 12 hours, so (hours % 12 / 12) * 360 gives its rotation. Additionally, (minutes / 60) * 30 accounts for the minute hand’s effect on the hour hand’s position.
  • secondHand.style.transform = rotate(${secondDegrees}deg);: Sets the CSS transform property of the second hand to rotate it by secondDegrees degrees.
  • minuteHand.style.transform = rotate(${minuteDegrees}deg);: Sets the CSS transform property of the minute hand to rotate it by minuteDegrees degrees.
  • hourHand.style.transform = rotate(${hourDegrees}deg);: Sets the CSS transform property of the hour hand to rotate it by hourDegrees degrees.

setInterval and Initial Call

setInterval(setClock, 1000);

setClock();
  • setInterval(setClock, 1000);: Calls the setClock function every 1000 milliseconds (1 second), ensuring the clock updates in real-time.
  • setClock();: Calls setClock immediately to set the clock’s initial position when the page loads.
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');

function setClock() {
  const now = new Date();

  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  const secondDegrees = (seconds / 60) * 360;
  const minuteDegrees = (minutes / 60) * 360 + (seconds / 60) * 6;
  const hourDegrees = (hours % 12 / 12) * 360 + (minutes / 60) * 30;

  secondHand.style.transform = `rotate(${secondDegrees}deg)`;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setClock, 1000);

setClock();

Final Output:

create-glowing-analog-clock-with-html-css-and-javascript.gif
Read AlsoCreating a Candy Crush Clone HTML, CSS, and JavaScript Tutorial.jpgCreating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

Conclusion:

You’ve successfully created a glowing analog clock using HTML, CSS, and JavaScript! This project has allowed you to practice essential web development skills and see how different technologies can work together to build something cool. You now have a stylish, functional clock that can be customized to fit your preferences.

Feel free to experiment with different styles, colors, and effects to make the clock uniquely yours. The skills you’ve gained from this project can be applied to many other web development tasks.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: create glowing analog clock html css javascript, how to build a glowing analog clock, glowing clock tutorial html css js, glowing wall clock, how to make a glowing wall clock, glowing clock, html css clock, glowing analog clock, html analog clock, javascript clock
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺