Frontend Mentor | Flexbox, W3schools coding challenge solution

@MasonBoom

Posted almost 2 years ago

Hi Issac,

Your web application looks great and functions perfectly, but I did notice that there was some code that was a bit repetitive. In the future, I would implement the use of a for loop or a forEach function.

Here is an example of what I did to reset my rating button classes when one of the buttons is clicked:

const toggleButton = index => { const buttons = document.getElementsByClassName('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].classList.remove('active'); } buttons[index].classList.add('active'); setRating(index + 1); }

the setRating function there is a function that I used to update my rating, but what this function is doing is finding all of my buttons (1-5) and removing the 'active' class and setting the one I clicked on to active.

You can also set multiple variables to the same value with one line, so instead of this,

let rating = 0 let rating1 = false let rating2 = false let rating3 = false let rating4 = false let rating5 = false let ratingSelected = false

you can do this instead and it does the same thing:

let rating, rating1 rating2, rating3, rating4, rating5, ratingSelected = false

I think you'll eventually get better at writing more efficient javascript code with practice, keep up the good work :)

yishak abrham• 2,150

@yishak621

Posted almost 2 years ago

@MasonBoom hey mason thats possible but also there is a cool method for these type of things ...just give the elments an data-id add a event listener for the parent container and when a user clicks on that container area the forEach method will look for if that place have an id ...if it have it will add that functionality if it hasnt it will not add that functionality for more check my result that will help u in future works

  //logic-when we click on the btns container[ratingbtns] 
   ratingBtns.addEventListener('click', (e) => { 
     const id = e.target.dataset.id; 
     console.log(id); 
     if (id) { 
       //remove active state from btns 
       eachBtns.forEach((btn) => { 
         btn.classList.remove('btn-active'); 
         e.target.classList.add('btn-active'); 
         textResult.innerHTML = `You selected <span class="result-number"> ${id}</span> out of 5`; //printing the selected value to result 
       }); 
     } 
   });

Flexbox, W3schools

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community