There's a moment, right around step three of this project, when a kid watches the seconds tick on a clock they built themselves, and their face changes. It's this mix of surprise and pride. "Wait, I made that? It's actually keeping time?" I've seen it dozens of times, and it never gets old.
Building a digital clock makes one of the best first JavaScript projects for kids 10 and older. Kids write real code, create something visual that updates live, and finish the whole thing in about 30–45 minutes. Let's walk through it together.
Why a Digital Clock Works So Well for Beginners
Many early coding exercises feel pointless. "Print your name to the console." A digital clock stands out because it does something visible. The numbers change every second. Your code comes alive on screen.
Kids quickly see how JavaScript grabs the current time and updates the page. Open the browser console and type new Date() to show them the full date object first. They love watching it tick before they even write code.
If your child wonders whether JavaScript suits them, this project gives a clear answer. Once the clock runs, they usually ask, "What else can I build?"
What Your Kid Needs to Know First
Parents often wonder if their child must master HTML and CSS first. A little exposure helps, but they don't need a full course.
This project uses three main pieces:
- HTML creates one spot to show the clock
- CSS makes it look nicer (but the clock works fine without it)
- JavaScript grabs the time and updates the display
If your child has never seen HTML, spend ten minutes explaining that a <div> or heading simply makes a box on the page. Our guide on building your kid's first interactive web page covers exactly what they need.
Many kids also reach the point where they want to move from block-based tools to typing real code. This clock project offers a smooth bridge. See our article on real code versus block coding for timing advice.
Step 1: Create the HTML Page
Every clock needs a place to appear. Here's the complete HTML file your child can start with:
<!DOCTYPE html>
<html>
<head>
<title>My Digital Clock</title>
</head>
<body>
<h1 id="clock">00:00:00</h1>
<script src="clock.js"></script>
</body>
</html>
The id="clock" works like a name tag so JavaScript can find and update that exact spot. Save this file as index.html.
Step 2: Add the JavaScript
Create a second file called clock.js in the same folder and add this code:
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.getElementById("clock").textContent =
hours + ":" + minutes + ":" + seconds;
}
setInterval(updateClock, 1000);
setInterval tells the browser to run the function once per second. Open the HTML file in a browser and the numbers should start changing right away.
Add console.log("Tick!") at the top of updateClock() to see proof in the browser console. Kids enjoy watching their code fire every second.
Step 3: Make It Your Own
A plain clock is fine. A personalized one feels special. Try adding AM/PM next:
// Add these lines inside updateClock, before the display line
var period = "AM";
if (hours >= 12) period = "PM";
if (hours > 12) hours = hours - 12;
if (hours === 0) hours = 12;
// Then change the final display line to:
document.getElementById("clock").textContent =
hours + ":" + minutes + ":" + seconds + " " + period;
Kids can also adjust colors, font size, or add the current date using CSS and a few more JavaScript lines. Each change teaches something new while letting them express their style. Kids who enjoy this creative side often like our creative coding art projects next.
When the Clock Stops (Easy Fixes)
The most common problem is a frozen display at "00:00:00". Usually the JavaScript file isn't linked correctly, check that the filename in the <script> tag matches exactly and both files sit in the same folder.
Another frequent bug happens when leading zeros appear in the wrong order. The if statements must run before the line that updates the page.
Treat debugging like a detective game. Ask, "What do you think this line does?" or "What happens if we temporarily remove it?" Our post on what a bug is in programming helps kids see mistakes as part of the fun.
Next Projects After the Clock
Finishing a project gives kids momentum. The same ideas, functions, variables, and updating the screen, appear in many other beginner projects.
A quiz game adds buttons and user choices. A to-do list app shows how to store information. Each step feels familiar yet introduces something fresh.
The digital clock your child built uses the same JavaScript that powers real websites and games. If they want to keep building, Learnspace offers structured JavaScript lessons with a built-in code editor and an AI tutor that gives hints when they get stuck. Start learning JavaScript with Learnspace and watch what they create next.