Best matchRelated: setIntervalBeginner
Simple Stopwatch
Create repeating updates that keep the interface moving.
Build a simple stopwatch →Analogue Clock
Build an analogue clock with HTML, CSS, and JavaScript while practicing setInterval and DOM selection.
Beginner20–30 minutesHTML5CSS3JavaScript
You’ll practice
setIntervalDOM SelectionDates and Time
01 — What you’ll build
Analogue Clock
This project shows you how HTML, CSS, and JavaScript work together in an analogue clock. You’ll calculate the current time and keep the interface updated, then practice setInterval, DOM selection, and dates and time as you build the complete project from scratch.
02 — Included
- Automatic timed updates
- Analogue Clock interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Create repeating actions with setInterval
- Select HTML elements from the DOM
- Work with dates and time
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, The JavaScript Date object, JavaScript functions and callbacks, Browser timers.
Complete project files
Build It from the Source Code
This project uses timed JavaScript updates.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Leave the tab open to see the timed behavior update.
- Keep an internet connection available for external assets.
Project structure
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>Clock</title>
</head>
<body>
<div class="clock">
<div class="numbers">
<div class="twelve">12</div>
<div class="three">3</div>
<div class="six">6</div>
<div class="nine">9</div>
</div>
<div class="arrows">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<img
src="https://upload.wikimedia.org/wikipedia/en/thumb/9/95/Rolex_logo.svg/1200px-Rolex_logo.svg.png"
alt=""
/>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice setInterval, javaScript calculations, and dates and time with these related projects.
Best match
Related: JavaScript calculations
Pomodoro Timer
Turn JavaScript calculations into clear visual results.
Build a pomodoro timer →
Related: dates and timeBeginner
Digital Clock
Calculate the current time and keep the display updated.
Build a digital clock →Related: setIntervalBest match
Simple Stopwatch
Create repeating updates that keep the interface moving.
Build a simple stopwatchRelated: JavaScript calculations
Pomodoro Timer
Turn JavaScript calculations into clear visual results.
Build a pomodoro timerRelated: dates and time
Digital Clock
Calculate the current time and keep the display updated.
Build a digital clock