Mini Project: Click Counter or Form Validator

Learners can choose one of two projects to complete. Each project is beginner-friendly and builds real-world interactivity.

Option 1: Click Counter

Project Description

Create a button that counts how many times it has been clicked and displays the count on the screen.

Learning Goals

• Use the click event
• Update the DOM dynamically
• Store and change data in a variable

HTML:

<h2>Click Counter</h2>
<button id="click-btn">Click Me!</button>
<p id="click-count">You’ve clicked 0 times.</p>

JavaScript:

let button = document.getElementById("click-btn");
let display = document.getElementById("click-count");

let count = 0;

button.addEventListener("click", function () {
  count++;
  display.textContent = "You’ve clicked " + count + " times.";
});

Optional Enhancements:

• Change the button color after 10 clicks
• Add a “Reset” button
• Save the count in localStorage (future module)

Option 2: Simple Form Validator

Project Description

Build a simple form with name and email input. When the user submits, check if the fields are filled in. Show messages on success or error.

Learning Goals

• Use the submit event
• Prevent default form submission
• Read values from input fields
• Show feedback using the DOM

HTML:

<h2>Simple Form</h2>
<form id="user-form">
  <input type="text" id="name" placeholder="Enter your name" />
  <input type="email" id="email" placeholder="Enter your email" />
  <button type="submit">Submit</button>
</form>
<p id="form-message"></p>

JavaScript:

let form = document.getElementById("user-form");
let nameInput = document.getElementById("name");
let emailInput = document.getElementById("email");
let message = document.getElementById("form-message");

form.addEventListener("submit", function (event) {
  event.preventDefault(); // stop the form from refreshing the page

  let name = nameInput.value.trim();
  let email = emailInput.value.trim();

  if (name === "" || email === "") {
    message.textContent = "Please fill in all fields.";
    message.style.color = "red";
  } else {
    message.textContent = "Form submitted successfully!";
    message.style.color = "green";
  }
});

Practice Tips

• Always trim inputs with .trim()
• Use event.preventDefault() to stop page reload
• Use .textContent to show feedback
• Use .style.color for simple visual feedback