JS Mini Projects
In this page:
Click Counter
A click counter combines an event listener with a piece of state, a variable tracking the current count, and updates the visible text every time that state changes. It's a compact demonstration of the core interactive pattern nearly every JavaScript app uses: react to an event, update state, reflect that state in the DOM.
Example: Click Counter
<button id="btn">Clicked 0 times</button>
<script>
let count = 0;
document.getElementById("btn").addEventListener("click", function () {
count++;
this.textContent = `Clicked ${count} times`;
});
</script>To-Do List
A to-do list combines reading a value from a text input, creating a new DOM element for each item, and appending it to a list container, typically triggered by a button click or form submission. It's a small but complete example of turning user input into persistent, visible page content.
Example: To-Do List
<input id="taskInput">
<button id="addBtn">Add</button>
<ul id="taskList"></ul>
<script>
document.getElementById("addBtn").addEventListener("click", () => {
const li = document.createElement("li");
li.textContent = document.getElementById("taskInput").value;
document.getElementById("taskList").appendChild(li);
});
</script>Modal Popup
A modal popup is a hidden panel, usually styled to sit above the rest of the page, that toggles visible when triggered and hides again when dismissed, commonly by clicking outside of it or a close button. The core logic is just adding or removing a class, or toggling the display style, in response to click events.
Example: Modal Popup
<button id="openBtn">Open Modal</button>
<div id="modal" style="display:none;">Modal content <button id="closeBtn">Close</button></div>
<script>
document.getElementById("openBtn").onclick = () => document.getElementById("modal").style.display = "block";
document.getElementById("closeBtn").onclick = () => document.getElementById("modal").style.display = "none";
</script>Form Validation
Client-side form validation checks input values before allowing a submit to proceed, typically by preventing the default submit behavior and inspecting field values for emptiness or an expected pattern. It gives users immediate feedback without waiting for a round trip to the server, though server-side validation is still required for real security.
Example: Form Validation
<form id="form">
<input id="email">
<button type="submit">Submit</button>
</form>
<script>
document.getElementById("form").addEventListener("submit", (e) => {
e.preventDefault();
if (!document.getElementById("email").value) {
console.log("Email is required");
}
});
</script>Combining Concepts: A Mini Quiz Widget
A small quiz widget ties together rendering data-driven content, listening for clicks on dynamically created options, comparing the selection against a known correct answer, and updating running state like a score. It's a good exercise for practicing how several smaller JavaScript concepts combine into one interactive feature.
Example: Combining Concepts: A Mini Quiz Widget
<p id="question">2 + 2 = ?</p>
<button data-answer="4">4</button>
<button data-answer="5">5</button>
<p id="score">Score: 0</p>
<script>
let score = 0;
document.querySelectorAll("button").forEach(btn => {
btn.addEventListener("click", () => {
if (btn.dataset.answer === "4") score++;
document.getElementById("score").textContent = "Score: " + score;
});
});
</script>Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: