LOCAL PROJECTS / DEBUGGING PRACTICE

Fix this page

A small counter has three bugs. Observe what happens, investigate one cause, and test a small repair.

Jump to editor ↓

What should happen?

  • The panel has a white background and 24px inner spacing.
  • The page starts at zero and its script runs without errors.
  • Each Add 1 click increases the visible number by one. Reset returns it to zero, and counting still works afterward.

Keep the supplied HTML. Repair the CSS and JavaScript. You can solve the bugs in any order; a script error may hide another behavior problem until you fix it.

New to debugging? Read the debugging guide →

Why this practice comes now

You have learned to observe, investigate, change, and test. Use that loop to repair familiar CSS and click-event code.

Concepts to recall

Start with one action

Run the supplied code and click Add 1 once. Write down what you expected and what happened. Investigate one symptom before editing anything.

Progress loads in this browser

HTML is your read-only reference. Edit CSS and JavaScript. The preview supports the three supplied IDs, textContent, and click listeners.

Live preview

Run the page to see how your current code behaves.

Run the page to observe the bugs, then change one thing at a time.

Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →

Hint 1: missing styling

Find the HTML element that should be the panel. Compare its class name with the rule meant to style it. A valid rule can still match no elements.

Hint 2: a script that stops

Trace the selected element used by the first failing operation. Compare the selector with the names in the HTML reference. What would a selection return if nothing matched?

Hint 3: a number that stays still

Follow the click handler in order. Track the number stored in memory separately from the number shown on the page. Compare the responsibilities of the two handlers.

See the explained solution

The HTML calls the panel counter-panel, so its CSS selector must match. The Add 1 button has ID add, so selecting a different ID returns null and prevents listener setup. Finally, changing count in memory does not change the output: the Add 1 handler must also assign the new value to textContent. Reset already does both.

CSS

body {
  margin: 0;
  padding: 24px;
  background: #eef2ff;
  color: #334155;
  font: 16px/1.5 system-ui;
}
.counter-panel {
  background: white;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
h1 {
  font-size: 22px;
  margin: 0;
}
output {
  display: block;
  font-size: 48px;
  color: #4338ca;
  margin: 16px;
}
button {
  font: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 16px;
  background: white;
  color: #334155;
  cursor: pointer;
}
button:first-child {
  background: #4338ca;
  color: white;
}
button:focus-visible {
  outline: 3px solid #818cf8;
  outline-offset: 3px;
}
#message {
  overflow-wrap: anywhere;
}

JavaScript

const countDisplay = document.querySelector("#count");
const addButton = document.querySelector("#add");
const resetButton = document.querySelector("#reset");
let count = 0;

addButton.addEventListener("click", () => {
  count = count + 1;
  countDisplay.textContent = count;
});

resetButton.addEventListener("click", () => {
  count = 0;
  countDisplay.textContent = count;
});

Equivalent working code is accepted. Viewing this solution does not mark the practice complete.

Reset your code

Restore all three bugs. Your completion achievement is kept.