DOM stands for Document Object Model, a programming interface that allows scripts and programs to access and manipulate web Content. For example - we can use DOM to change the content and style of an HTML

The DOM tree looks like this

In this article I am going to share my learnings after completing all 10 DOM challenges from Chai Code Cohort .

Challenge Part 1 (1-5)

Code Live

Challenge 1: Light Bulb Toggle 💡 🌚

The Task: Create a webpage featuring a light bulb image or representation with Turn On and Turn Off Functionality

My Approach: First, I checked the current background color. If there is no color or it is white, I changed the inner style of the background to black and the bulb color to yellow. I also dynamically changed the text of the Toggle Button.

Learning: By completing this challenge, I learned about the methods document.getElementById(), addEventListener(), etc.

Challenge 2: Change Text Color 🦎

The Task: When a color button is clicked, the heading’s text color should change to the corresponding color.

My Approach: Here we have 5 color buttons, and when clicked, the header text should change to that color. There is also 1 reset button, which, when clicked, should change the header text back to black. So, first, we select these 6 buttons by their IDs and then add an event listener ("click"), which will eventually change their colors.

Learning: After completing this assignment, I learned how to add different event listeners (e.g. “Click”) .

Challenge 3: Real-time Form Input Display📋

The Task: Create a profile form that dynamically displays entered information in real-time.

My Approach: First, I selected all 4 input fields (name, job, age, bio) and 4 display fields (name, job, age, bio) with their respective IDs. Then I added an event listener “input” that updates the respective display field with its input field continuously.

Learning: By completing this challenge, I came across a new event listener “input”, which continuously updates the value, unlike “change”, which only updates once after completing it.

Challenge 4: Task Management 🧏🏻‍♂️

The Task: Build a simple task management app where users can add, complete, and delete tasks, with dynamic stats updates and a message when no tasks are present.

My Approach: I created an input field for users to add tasks using an "Add" button or the "Enter" key, dynamically appending them to the list. Each task includes a checkbox to toggle completion with a strikethrough effect and a delete button to remove it. A message appears when no tasks are present and disappears when tasks are added. Task counters update dynamically based on additions, completions, and deletions.

Learning: Improved event handling for user input, dynamically manipulated the DOM, managed CSS classes for visual updates, and maintained real-time task state updates.

Challenge 5: Image Carousel Application 🖼️

The Task: Create an image carousel with navigation, auto-play, and indicators.

My Approach: First, take one variable named currIndex for storing the current index. Next, add an event listener on the previous and next buttons, where the previous button decrements currIndex and the next button increments it. Also, focus on edge cases, like if currIndex is equal to 0, then set it to n (for the previous button), and if it is equal to n, then set it to 0 (for the next button). For auto-play, change the current index at an interval of 5 seconds. Also, create a stop auto-play button to stop the auto-play.

Learning: By solving this challenge, I learned about setInterval() and also about event listeners.

Challenge Part 2 (6-10)

Code Live

Challenge 6: Enhanced Clock ⏰

The Task: Create a Clock with Digital and Analog Display. Also, show the Date, and the hand movement should be smooth.

My Approach: First, we take the current time from “new Date()”. Then, we use different properties (.getDate(), .getMonth(), .getFullYear(), .getHours(), .getMinutes(), .getSeconds(), .getDay()) of Date to store the current date, month, hours, minutes, seconds, and day, respectively. For the digital clock, we can directly update their inner text with these. But for the analog clock, we first have to convert hours to degrees, similarly for minutes and seconds.

Lastly, update the clock data every 1 second.

Learning: This is my favorite assignment. I have learned a lot about the different properties of Time and Date (mentioned above) and also about moving the clock hands (hrHand, minHand, secHand).

Challenge 7: Accordion 🪗

The Task: Create an interactive accordion with multiple collapsible sections, ensuring only one is open at a time with a smooth transition.

My Approach: I implemented an accordion using “querySelectorAll” to select buttons and content sections, adding event listeners for click handling. Clicking a section toggles its visibility while closing others using classList.toggle. The dropdown arrow rotates accordingly, and maxHeight ensures smooth expansion/collapse with a fade-in effect.

Learning: Used JavaScript for dynamic DOM manipulation, efficient event handling, and smooth CSS transitions with maxHeight and transform. Managed state to keep only one section open at a time for better usability.

Challenge 8: Simple Shopping Cart 🛒

The Task: Create a Simple Cart where users can add or remove items and adjust quantities. A list of selected items with quantities and the total price should also be displayed.

My Approach: First, I created an object called cartItems. Next, I created a function, addToCart, that takes 2 parameters (product name and price) and stores them in cartItems. I also created a removeFromCart function that takes 1 parameter (product name) and removes that item from cartItems. Lastly, I created an updateCart function that performs all necessary calculations, changes the DOM, and updates the DOM with these results.

Learning: By completing this challenge, I learned how to dynamically update the DOM with JavaScript and how to properly format numbers using .toFixed(2).

Challenge 9: Sliding Menu 🪟

The Task: Create a sliding menu with a toggle button to open the menu and a close button. Also, clicking a menu item should show an alert message indicating which item was clicked and automatically close the menu.

My Approach: On the toggleButton, I added an event listener ("click") which sets the right-side padding to 0, and for the close button, it sets it to -360px. I added a forEach loop on every item that shows an alert with the item's title. Lastly, I added a "click" event listener that closes the panel when clicked outside.

Learning: By completing this challenge, I learned about the concept of querySelectorAll() instead of document.getElementById(). We can select multiple similar items using it.

Challenge 10: Interactive Memory Card Game 🂫

The Task: Build a 4×4 memory card game where players match pairs, track moves and time, shuffle cards at the start, and see a victory message upon completion.

My Approach: I created an array of shuffled emoji pairs and dynamically generated cards. Clicking flips a card using CSS, and two selected cards are compared for a match. If matched, they stay flipped; otherwise, they revert after a short delay. A move counter and timer track progress, and the game ends when all pairs are matched, with a restart function resetting the game.

Learning: Improved event handling, DOM manipulation, and game logic by dynamically creating elements, managing interactions, and tracking state. Also learned to use setInterval() for real-time updates and control timers within game logic.

If you found this helpful, like it ❤ and feel free to share your thoughts.🚀.