JavaScript Tutorial

JavaScript Project: Digital Clock

A live clock using Date and setInterval so the time updates every second.

What you will build

A digital clock that shows hours, minutes, and seconds, plus the weekday and date. The digits change every second without a page reload.

Date reads the current time. setInterval calls a draw function once a second.padStart keeps each unit two characters so 9:05:03 does not jump the layout when a digit gains a leading zero.

Open an example with Try it in JavaScript. That loads /javascript/try — a live page and a console.

Methods you will use

Method	Job on this page
`Date`	Reads the current local time from the computer
`setInterval`	Runs the draw function every 1000 milliseconds
`padStart`	Pads hours, minutes, and seconds to two digits
`getHours`, `getMinutes`, `getSeconds`	Pull each unit from the Date
`textContent`	Writes the formatted time onto the page

Draw once immediately, then start the interval. If you only start the interval, the first second of the page shows a blank or a placeholder until the timer fires.

Build in slices

Two output nodes are enough: a time line and a date line. The script will replace their text every tick.

Example

<p id="time">00:00:00</p>
<p id="date">Loading date</p>

Format helpers keep the tick function short. padStart works on strings, so convert the number first.

Example

function two(n) {
  return String(n).padStart(2, "0");
}

function formatTime(now) {
  return two(now.getHours()) + ":" + two(now.getMinutes()) + ":" + two(now.getSeconds());
}

function formatDate(now) {
  const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  const months = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"];
  return days[now.getDay()] + ", " + months[now.getMonth()] + " " + now.getDate();
}

Tick writes both lines, then the interval repeats it. Store the interval id only if you plan to stop the clock later. This page lets it run.

Example

<p id="time">00:00:00</p>
<p id="date">Loading date</p>
<script>
  const timeEl = document.getElementById("time");
  const dateEl = document.getElementById("date");
  const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  const months = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"];

  function two(n) {
    return String(n).padStart(2, "0");
  }

  function tick() {
    const now = new Date();
    timeEl.textContent = two(now.getHours()) + ":" + two(now.getMinutes()) + ":" + two(now.getSeconds());
    dateEl.textContent = days[now.getDay()] + ", " + months[now.getMonth()] + " " + now.getDate();
  }

  tick();
  setInterval(tick, 1000);
</script>

Open /javascript/try with Try it in JavaScript and wait two seconds. If the seconds never change, the interval is missing or the ids do not match.

Complete document

This file is the clock you would keep. The time is large and monospaced so digits do not shift sideways. The date sits underneath in sentence case.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Digital Clock</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #fefce8;
      font-family: "Segoe UI", system-ui, sans-serif;
      color: #1c1917;
    }
    .card {
      width: min(24rem, 92vw);
      background: #fffbeb;
      border: 1px solid #fde68a;
      padding: 1.6rem 1.5rem 1.5rem;
      text-align: center;
    }
    h1 {
      margin: 0 0 0.75rem;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #854d0e;
    }
    #time {
      margin: 0;
      font-size: 3rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
    }
    #date {
      margin: 0.55rem 0 0;
      color: #78716c;
    }
  </style>
</head>
<body>
  <article class="card">
    <h1>Digital Clock</h1>
    <p id="time">00:00:00</p>
    <p id="date">Loading date</p>
  </article>
  <script>
    const timeEl = document.getElementById("time");
    const dateEl = document.getElementById("date");
    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    const months = [
      "January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"
    ];

    function two(n) {
      return String(n).padStart(2, "0");
    }

    function tick() {
      const now = new Date();
      timeEl.textContent = two(now.getHours()) + ":" + two(now.getMinutes()) + ":" + two(now.getSeconds());
      dateEl.textContent = days[now.getDay()] + ", " + months[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear();
    }

    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

Intervals and the 12-hour clock

setInterval(tick, 1000) is not a metronome. The browser can delay a tick if the tab is in the background. Reading new Date() every time still shows the correct clock; you only skip a frame, you do not drift away from wall time.

Hours from getHours are 0–23. A 12-hour clock needs extra math: hour % 12 || 12and an AM/PM label. The complete document stays on 24-hour time so the formatting stays one line.

Common mistakes

Calling setInterval(tick(), 1000). The extra parentheses run tick once and pass undefined to the timer.
Padding with string add: "0" + n turns 10 into "010". Use padStart.
Using getDay as the calendar date. getDay is weekday. getDate is the day of the month.
Creating a new interval inside tick. After a few seconds you would have dozens of timers.
Updating with innerHTML every second. Text is enough and cheaper.

Practice tasks

Switch to a 12-hour clock with AM or PM. Keep two-digit minutes and seconds.
Add a Pause button that calls clearInterval and a Resume button that starts a new interval.
Show milliseconds with getMilliseconds and a 100ms interval. Preview at /javascript/try.

FAQ: JavaScript Project: Digital Clock

Common questions about this page.

What is the StudyGrid JavaScript tutorial?

The StudyGrid JavaScript tutorial is a full beginner track: variables, functions, arrays, if/else, the DOM, events, storage, and fetch. Each chapter has copy-and-run examples.

Should I run javascript clock project examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn javascript clock project in this JavaScript JavaScript lesson (JavaScript Project: Digital Clock).

Is the JavaScript editor the same as Try Python?

No. Try JavaScript is a live page plus a console at /javascript/try. Try Python stays at /try. JavaScript lessons never open the Python editor.

Do I need to install anything to learn JavaScript?

No. Open a chapter, click Try it in JavaScript, and the page and console update in the browser.

Where should I start the JavaScript tutorial?

Start at JavaScript Intro, then Where To, Output, and Syntax. After variables and functions, continue to the DOM and events. Use Next at the bottom of each chapter.

Is the JavaScript tutorial free?

Yes. The JavaScript studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live editor.