# 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:**

```javascript
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](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](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:**

```javascript
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](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](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`:

```javascript
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](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](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](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](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](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](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:

```javascript
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](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](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:

```javascript
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](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](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](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](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
    

```javascript
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](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](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](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](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.