What I Learned From 10 DOM Manipulation Projects

Over the past 2 weeks, I embarked on a journey to strengthen my JavaScript skills by tackling 10 DOM manipulation challenges. These projects, while seemingly simple, provided invaluable hands-on experience with core web development concepts. In this blog post, I'll share what I learned and how these small projects helped build a strong foundation for creating interactive web applications.

Project 1: Light Bulb Toggle Button

What I Built: A simple toggle button that changes Color of bulb ,button text and updates a status message when clicked.

Key Learnings:

• Event handling with addEventListener

• Manipulating text content with .innerText and .textContent

• Using .classList.toggle() to add/remove CSS classes dynamically

• The importance of state management (on/off states)

Code Insight:

function ToggelText() {
  if (document.getElementById("toggleButton").innerText === "Turn On") {
    document.getElementById("toggleButton").innerText = "Turn Off";
    document.getElementById("status").textContent = "Status: On";
  } else {
    document.getElementById("toggleButton").innerText = "Turn On";
    document.getElementById("status").textContent = "Status: Off";
  }
}

This toggle functionality is a fundamental pattern in web development, appearing in everything from theme switchers to form controls.

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/1-5/challenge-1

Live : https://raw.githack.com/patelajay745/chai-cohort/main/dom-challenges/1-5/challenge-1/index.html

Project 2: Color Changer

What I Built: A series of buttons that change the color of a heading when clicked.

Key Learnings:

• Handling multiple event listeners efficiently

• Passing parameters to event handler functions

• Manipulating inline styles with JavaScript

• Organizing code for reusability

Code Insight:

function ChangeColorTo(color) {
  document.getElementById("mainHeading").style.color = color;
}

This project taught me the value of creating reusable functions that can accept parameters, rather than writing separate functions for each color change.

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/1-5/challenge-2

live : https://raw.githack.com/patelajay745/chai-cohort/main/dom-challenges/1-5/challenge-2/index.html

Project 3: Live Form Preview

What I Built: A form that updates a preview section in real-time as the user types.

Key Learnings:

• Handling input events

• Real-time DOM updates

• Two-way data binding concepts

• Working with form elements

The input event listener provides a more responsive user experience than older methods like onchange:

document.getElementById("nameInput").addEventListener("input", () => {
  document.getElementById("nameDisplay").textContent = 
    document.getElementById("nameInput").value;
});

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/1-5/challenge-3

live : https://raw.githack.com/patelajay745/chai-cohort/tree/main/dom-challenges/1-5/challenge-3

Project 4: Task Manager

What I Built: A todo list application with add, complete, and delete functionality.

Key Learnings:

• Creating and appending elements dynamically

• Managing state across multiple elements

• Implementing complete user flows (create, read, update, delete)

• Working with counters and statistics

This project involved more complex DOM manipulation:

I learned how building even a simple task manager requires thinking about state management and component composition.

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/1-5/challenge-4

Live : https://raw.githack.com/patelajay745/chai-cohort/main/dom-challenges/1-5/challenge-4/index.html

Project 5: Image Carousel

What I Built: An image slideshow with navigation controls, auto-play feature, and timer display.

Key Learnings:

• Working with arrays of objects (image data)

• Implementing timers with setInterval

• Building navigation controls

• Dynamic background image manipulation

• State management for cycling through content

This project taught me about managing intervals and the importance of cleanup to prevent memory leaks.

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/1-5/challenge-5

Live : https://raw.githack.com/patelajay745/chai-cohort/tree/main/dom-challenges/1-5/challenge-5

Project 6: Analog & Digital Clock

What I Built: A dual-display clock showing both analog and digital time representations.

Key Learnings:

• Working with the Date object

• Using setInterval for continuous updates

• CSS transformations with JavaScript

• Mathematical calculations for hand rotations

• Dynamic styling with .style.transform

The code for rotating the clock hands was a great exercise in applying mathematics to visual elements:

const secondsDeg = (currentTime.getSeconds() / 60) * 360;
const minutesDeg = ((currentTime.getMinutes() + currentTime.getSeconds() / 60) / 60) * 360;
const hoursDeg = (((currentTime.getHours() % 12) + currentTime.getMinutes() / 60) / 12) * 360;

secondElement.style.transform = `translateX(-50%) rotate(${secondsDeg}deg)`;

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/6-10/challenge-6

live : https://raw.githack.com/patelajay745/chai-cohort/main/dom-challenges/6-10/challenge-6/index.html

Project 7: Accordion Menu

What I Built: An expandable accordion component that shows one section at a time.

Key Learnings:

• Managing active states across multiple elements

• Using parent-child relationships in the DOM

• Implementing show/hide functionality

• Event propagation management

A key insight was how to ensure only one accordion item is open at a time:

btnToOpenClose.forEach((button) => {
  button.addEventListener("click", function () {
    const accordionItem = button.parentElement;
    if (accordionItem.classList.contains("active")) {
      accordionItem.classList.remove("active");
      return;
    }

    allAccordionItem.forEach((item) => {
      item.classList.remove("active");
    });
    accordionItem.classList.add("active");
  });
});

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/6-10/challenge-7

Live : https://raw.githack.com/patelajay745/chai-cohort/main/dom-challenges/6-10/challenge-7/index.html

Project 8: Shopping Cart (My Favourite Project)

What I Built: A functional shopping cart with add, remove, and quantity adjustment features.

Key Learnings:

• Complex state management

• Array manipulation methods (map, filter, reduce)

• Working with numerical calculations and formatting

• Creating a complete user flow for e-commerce

• DOM traversal with parent-child relationships

This project required the most complex state management:

I learned how to use array methods effectively to maintain application state.

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/6-10/challenge-8

Live : https://raw.githack.com/patelajay745/chai-cohort/main/dom-challenges/6-10/challenge-8/index.html

Project 9: Slide-in Panel

What I Built: A mobile-style slide-in navigation panel with toggle functionality.

Key Learnings:

• Event propagation and handling

• Using stopPropagation() to control event bubbling

• CSS transitions triggered by JavaScript

• Managing UI state for panels and overlay effects

toogleBtn.addEventListener("click", function (event) {
  !panel.classList.contains("active") ? panel.classList.add("active") : null;
  event.stopPropagation();
});

content.addEventListener("click", function () {
  panel.classList.remove("active");
});

This taught me how event propagation works and how to control it.

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/6-10/challenge-9

Live : https://raw.githack.com/patelajay745/chai-cohort/tree/main/dom-challenges/6-10/challenge-9/index.html

Project 10: Memory Card Game

What I Built: A complete card-matching memory game with scoring and timer features.

Key Learnings:

• Game state management

• Working with randomization

• Implementing game logic and win conditions

• Using setTimeout for animation timing

• Score calculation and formatting

This final project brought together many concepts

Code : https://github.com/patelajay745/chai-cohort/tree/main/dom-challenges/6-10/challenge-10

Live : https://raw.githack.com/patelajay745/chai-cohort/tree/main/dom-challenges/6-10/challenge-10/index.html

Key Takeaways From All Projects

After completing these 10 projects, I've noticed significant improvement in my JavaScript skills and understanding of web development concepts:

1. DOM Manipulation Mastery: I'm now comfortable selecting, creating, and modifying DOM elements dynamically.

2. Event Handling: I've learned to create responsive interfaces by handling user interactions effectively.

3. State Management: Even without frameworks, I've developed strategies for managing application state effectively.

4. Code Organization: I've improved at writing reusable, maintainable code with cleaner functions and structure.

5. Practical Problem-Solving: Each project presented unique challenges that required creative solutions.