Analog Clock

A polished analog clock built with HTML, CSS, and JavaScript. Designed as a portfolio-ready single page with a refined dial, smooth motion, a supporting digital readout, and a background that shifts with the time of day.

Preview

https://carinotj19.github.io/CSS_JS_Clock/

Features

• Smooth second hand with requestAnimationFrame
• CSS-built dial with tick marks and layered face
• Digital time readout with local timezone
• Morning, afternoon, and evening background shifts
• Responsive layout with motion-safe entrance animation

Files Included

• index.html - Main HTML file containing the clock markup.
• styles.css - Styling for the clock and layout.
• script.js - JavaScript for live time updates.
• README.md - Project documentation.

Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Edge, Safari).

Installation

1. Clone the repository:

   git clone https://github.com/carinotj19/CSS_JS_Clock.git

2. Navigate to the project directory:

   cd CSS_JS_Clock

3. Open the application: Open index.html in your preferred browser.

Usage

Open the page to view the live clock and time-of-day background changes.

License

This project is open-source and available under the MIT License.