Skip to content

Latest commit

 

History

History
150 lines (114 loc) · 5.42 KB

Readme.md

File metadata and controls

150 lines (114 loc) · 5.42 KB

Analog Clock with Continuous Movement

This project showcases the implementation of an animated analog clock using JavaScript. It replicates the smooth movement of the hour, minute, and second hands, ensuring accurate time representation while dynamically updating the clock hands in real time.

📂 Features

Feature Description
Smooth Animation The clock hands move continuously without abrupt jumps.
Real-Time Updates Synchronizes with the current system time and updates every second.
Accurate Rotations Uses mathematical calculations to determine the correct angle for each hand.
Seamless Initialization Dynamically initializes the clock's state based on the current time.

📝 Code Breakdown

1. Constants and Variables

The code defines key constants and variables to control the clock's rotation:

  • Degrees Per Second/Minute: 6 degrees (360°/60 = 6° per tick).
  • Hour Hand Movement: 30 degrees per hour (360°/12 = 30° per hour).

Code:

const deg = 6; // Degrees per second/minute
const hour = document.querySelector(".hour-hand");
const min = document.querySelector(".minute-hand");
const sec = document.querySelector(".second-hand");

let initialSecondsDeg, initialMinutesDeg, initialHoursDeg;
let startTime;

2. Initializing the Clock

The initClock function sets the clock to the current time:

  • Retrieve Current Time: Uses Date() to get hours, minutes, and seconds.
  • Calculate Initial Degrees:
    • Hour Hand: (hours % 12) * 30 + (minutes / 2) (to account for partial hour progress).
    • Minute Hand: (minutes * 6) + (seconds / 10) (to account for partial minute progress).
    • Second Hand: seconds * 6.
  • Update Clock Hands: Applies the calculated angles using CSS transform.

Code:

const initClock = () => {
  const now = new Date();

  const hh = (now.getHours() % 12) * 30; // Hours in degrees
  const mm = now.getMinutes() * deg; // Minutes in degrees
  const ss = now.getSeconds() * deg; // Seconds in degrees

  initialSecondsDeg = ss;
  initialMinutesDeg = mm + ss / 60; // Account for partial seconds
  initialHoursDeg = hh + mm / 12;   // Account for partial minutes
  startTime = now.getTime();

  // Apply transformations
  hour.style.transform = `rotateZ(${initialHoursDeg}deg)`;
  min.style.transform = `rotateZ(${initialMinutesDeg}deg)`;
  sec.style.transform = `rotateZ(${initialSecondsDeg}deg)`;

  requestAnimationFrame(updateClock); // Start the animation loop
};

3. Updating the Clock

The updateClock function handles the continuous animation:

  • Calculate Elapsed Time: Determines the time elapsed since the clock was initialized.
  • Update Rotations:
    • Second Hand: initialSecondsDeg + elapsedSeconds * 6.
    • Minute Hand: initialMinutesDeg + (elapsedSeconds / 60) * 6.
    • Hour Hand: initialHoursDeg + (elapsedSeconds / 3600) * 30.

Code:

const updateClock = () => {
  const now = new Date();
  const elapsedSeconds = Math.floor((now.getTime() - startTime) / 1000);

  sec.style.transform = `rotateZ(${
    initialSecondsDeg + elapsedSeconds * deg
  }deg)`;
  min.style.transform = `rotateZ(${
    initialMinutesDeg + (elapsedSeconds / 60) * deg
  }deg)`;
  hour.style.transform = `rotateZ(${
    initialHoursDeg + (elapsedSeconds / 3600) * 30
  }deg)`;

  requestAnimationFrame(updateClock); // Continuously update the clock
};

4. Starting the Clock

The clock is initialized by calling initClock(), which:

  • Sets the clock to the current time.
  • Starts the animation loop with requestAnimationFrame.

Code:

initClock();

💡 Key Learnings

  1. Time and Rotation Mapping:

    • Hours, minutes, and seconds are mapped to angles on a circular clock face.
    • Smooth transitions are achieved by accounting for partial progress (e.g., seconds affecting the minute hand).

  2. Animation with requestAnimationFrame:

    • Provides a smooth, efficient way to update the clock in real time.
    • Avoids performance issues compared to traditional interval-based methods.

  3. Dynamic CSS Transformations:

    • The rotateZ property is used to control the hands' positions based on calculated angles.

  4. Responsive Initialization:

    • Ensures the clock reflects the accurate time upon loading by dynamically setting initial states.

📂 Folder Structure

AnalogClock/
├── index.html      # HTML file containing the clock structure
├── style.css       # CSS file for styling the clock
├── main.js         # JavaScript logic for clock functionality
└── README.md       # Documentation

🎨 Suggested Enhancements

  • Add Tick Marks: Display hour and minute markers on the clock face.
  • Digital Clock: Include a digital display below the analog clock.
  • Theming: Allow users to switch between light and dark themes.

This analog clock project beautifully combines mathematical precision with visual aesthetics and serves as an excellent demonstration of JavaScript's capabilities in dynamic and interactive UI development. 😊