What Can JavaScript Do?

1. A Live Clock

JavaScript can read the current time from your computer and keep it updating, second by second.

--:--:--

Show the code

function updateClock() {
  const now = new Date();
  clockDisplay.textContent = now.toLocaleTimeString();
}
setInterval(updateClock, 1000);

2. Click Counter

A variable that remembers how many times you've clicked a button.

Clicked 0 times

Show the code

let count = 0;
counterButton.addEventListener("click", function () {
  count = count + 1;
  counterValue.textContent = count;
});

3. Random Colour Generator

Math.random() picks a new colour every time you click.

#ffffff

Show the code

function randomColour() {
  const letters = "0123456789ABCDEF";
  let colour = "#";
  for (let i = 0; i < 6; i++) {
    colour += letters[Math.floor(Math.random() * 16)];
  }
  return colour;
}

4. Show / Hide Panel

Toggling a CSS class is how most "accordions" and dropdown menus work under the hood.

Show the code

toggleButton.addEventListener("click", function () {
  panel.classList.toggle("hidden");
});

5. Live Character Counter

The page reacts as you type, without needing to click anything.

0 characters

Show the code

charInput.addEventListener("input", function () {
  charCount.textContent = charInput.value.length;
});

6. Tip Calculator

Real arithmetic, reacting live as you change either input.

Bill total: £ Tip percentage: %

Tip: £2.00 | Total: £22.00

Show the code

function updateTip() {
  const bill = parseFloat(billAmount.value) || 0;
  const percent = parseFloat(tipPercent.value) || 0;
  const tip = bill * (percent / 100);
  tipValue.textContent = tip.toFixed(2);
  totalValue.textContent = (bill + tip).toFixed(2);
}

7. Copy to Clipboard

One line of JavaScript can copy text for the user, no manual selecting required.

Show the code

copyButton.addEventListener("click", async function () {
  await navigator.clipboard.writeText(copyInput.value);
  copyStatus.textContent = "Copied!";
});

8. Countdown Timer

Combines variables, setInterval and a bit of decision-making logic.

Seconds:

-

Show the code

let remaining = parseInt(countdownInput.value);
const timer = setInterval(function () {
  countdownDisplay.textContent = remaining;
  if (remaining <= 0) {
    clearInterval(timer);
    countdownDisplay.textContent = "Go!";
  }
  remaining = remaining - 1;
}, 1000);

9. Bouncing Balls (Canvas)

The Canvas API lets JavaScript draw and animate graphics directly, frame by frame.

Show the code

function drawFrame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  balls.forEach((ball) => {
    ball.x += ball.dx;
    ball.y += ball.dy;
    if (ball.x < ball.r || ball.x > canvas.width - ball.r) ball.dx *= -1;
    if (ball.y < ball.r || ball.y > canvas.height - ball.r) ball.dy *= -1;
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    ctx.fillStyle = ball.colour;
    ctx.fill();
  });
  requestAnimationFrame(drawFrame);
}

10. Text-to-Speech

The browser has a built-in speech engine. JavaScript can hand it any text you like.

Show the code

speakButton.addEventListener("click", function () {
  const utterance = new SpeechSynthesisUtterance(speechInput.value);
  window.speechSynthesis.speak(utterance);
});

11. Where Am I? (Geolocation)

With permission, JavaScript can ask the device itself for its location.

Location not requested yet.

Show the code

navigator.geolocation.getCurrentPosition(function (position) {
  const { latitude, longitude } = position.coords;
  locationStatus.textContent = `Lat ${latitude.toFixed(3)}, Lon ${longitude.toFixed(3)}`;
});

12. Live Data from the Internet (Fetch API)

JavaScript can reach out to a server and pull back real, live data - the same technique used to load posts, prices or search results.

Click the button to fetch a fact from a live API.

Show the code

async function getCatFact() {
  const response = await fetch("https://catfact.ninja/fact");
  const data = await response.json();
  factOutput.textContent = data.fact;
}