JavaScript DOM Challenges

As part of Hitesh sir’s and Piyush Sir’s Web Dev Cohort 1.0 I got a 10 JS DOM challenges. here is the summarizing article about my learning and approach to solve them.

Challenge 1: Light Bulb Toggle

In this challenge I have to create kind of theme toggle switch. Here I have to simulate switch on and off the bulb on button click. Also had to change background and text color accordingly.

Approach

• This was mostly done by CSS, In JS we only have to add and remove the classes on button click.

• If the status is off, user will see Turn On button and Status: Off, Once user click on it we need to remove “off“ from bulb elements classList and add the “dark-mode” in classList of body, and change button text to Turn On and Status: On. and vice versa to turn off the bulb.

Code Sandbox

Learnings

• Learned about theme toggle

• learn to dynamically add or remove classes

Challenge 2: Change Text Color

In this challenge I have to change text text color of “Change My Color!” text on button change. Have to change the color based which color’s button user is clicking.

Approach

• Once user click on the button we need to change the textElement.style.color property to change the color of text based on what button is clicked.

Code Sandbox

Learnings

• learn to dynamically change the text color

• learn about the NodeList in JS

Challenge 3: Real-time Form Input Display

In this challenge we have to display the real time data to user in Profile Preview sections as user types in input.

Approach

• Add a event listener to input on ‘input’ event and update the info in Profile Preview section

Code Sandbox

Learning

• Learned about ‘Input’ event

• Difference between ‘change’ and ‘input’ event

Challenge 4: Task List Application

For this challenge we have to create simple to-do task list application. This app has a features of add, delete, and mark as completed features. It also shows the count of total tasks and completed tasks.

Approach

• add event listener to add button that takes input from task Input. and if Input value is present add a task element to dom, which will contain input of check type and label to display text

• Once user checks the checkbox of task add a completed style to that tasks label which contains text-decoration: line-through; property.

• To delete a element once user clicks on tasks delete button remove that particular element from dom.

• To get total tasks and completed tasks count I have created a function that loops over all the task items and counts the checked items and completed elements

Code Sandbox

Learnings

• Learned about DOM Manipulation

• Learn how to dynamically create and add element to DOM and how to remove it.

Challenge 5: Images Carousel

For this challenge I have to create a Image Carousel, add next and prev slide functionality and auto play button and indicators for each slide, which start the autoplay and change the slide in 5s.

Approach

• Display the image as background image to carousel track and change image based on next and prev button click.

• if user clicks on next button increase the index by 1, instead of just doing index++ use currIdx = (length + currIdx + 1) % length this formula to find next index, it not only increment the counter but also ensure when user is at last slide it will give the index of first slide for prev button we can use the same formula with - sign.

• To start the auto play we have use the setTimeout() to change the slide after 5s and also setInterval() to update the countdown on screen.

Code Sandbox

Learnings

• Learn to create a image carousel

• Learn about setTimeout() and setInterval()

• learn about infinite array index looping using currIdx = (length + currIdx + 1) % length this function.

Challenge 6: Enhanced Digital & Analog Clock

In this challenge we have to create a analog and digital clock that displays the local time and date.

Approach

• Used transform: rotate() along with transform-origin: bottom; property to rotate the hands of the analog clock based on calculated degree for hands based on current time.

Code Sandbox

Learnings

• learned about transform: rotate() property of css

• also learned about the infinite attribute of transition property

• Learned about the Date object in JS

Challenge 7: Slick Accordion

In this challenge I have to implement simple accordion, where we have to expand the info section by clicking on the tab.

Approach

• Initially the max-height of content is set 0 max-height: 0; and after clicking on item change max-height of content to 200px max-height: 200px;

• This was done by adding “active” class by clicking on item. And removing it from other items to collapse rest.

Code Sandbox

Learnings

• Learn about the max-height property of css

Challenge 8: Simple Shopping Cart

In this challenge I have created a simple cart, where user can add items increase or decrease count of items and total price will get updated accordingly.

Approach

• Once user click on 'Add to Cart’ button store the reference of the product in cart object, and loop over the cart object keys to create and display product item element to shopping cart.

• If user click on + button increase the count in object display and vice versa for - button and update the display

• If user click on remove button remove, remove the product from cart object and update the display

• Calculate the total price of cart by looping over carts products and multiplying count to price.

Code Sandbox

Learnings

• Learn about Object.keys() method and how to loop over a object

• Learn to do CRUD operation on object.

Challenge 9: Sliding Menu

In this challenge I have to build a sliding menu which opens the menu by clicking on Open Menu button.

Approach

• This is done by using position: fixed and giving right: -360px; style by default. -360px will position the panel to outside of screen.

• Once user click on Open Menu button we will change the position to right: 0; this will bring the panel into the screen making it visible on screen.

Code Sandbox

Learnings

• learned about position property in css

• learned to build Sliding Menu

Challenge 10: Interactive Memory Card Game

In This challenge I have to build a Interactive Memory Card Game. Where once user starts the game he will see the flipped card, he can flip the card by clicking on it. He has to find the matching card of each card. If he finds all matching cards he will win the game. Game will calculate users moves and time he taken to win the game.

Approach

• First, implement the flip card logic by clicking on it, by adding or removing ‘flipped’ class to it wich contains transform: rotateY(180deg); which rotate the card at Y-axis to 180 deg.

• Then check if two flipped cards are same or not, it they are same keep them flipped, for this I have used two arrays currentFlippedCards = [] and checkedCards = [] which holds the reference of current flipped cards and corrected cards which makes life simpler.

• If user flips two cards that are not matching and user tries to flip third one, flip back the unmatched cards. and increment moves count by 1.

• If all 16 cards are flipped then user won the game.

Code Sandbox

Learnings

• Learn to implement simple algorithms for a game.

• Learned how to implement front and back side to card and how to flip the card

Summary

This article summarizes my experience and approach to solving 10 JavaScript DOM challenges as part of a web development cohort led by Hitesh and Piyush. The challenges covered a range of topics, including theme toggles, text color changes, real-time form input display, task list applications, image carousels, clocks, accordions, shopping carts, sliding menus, and interactive memory card games. Key learnings include dynamic class manipulation, DOM manipulation, CSS properties like transform and position, object operations, and implementing simple algorithms for interactive features.