Flexbox, W3schools

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted about 2 years ago

  And also guys i think these will help u too but did u notice the hover property is working in pc but for mobile that color is printed as active color? 👉thats because mobile and tabs doesn't have hover property they only accept it as an active color so to solve that in css write a media query

  @media (hover: hover) { 
     .btn-rating:hover { 
       background-color: var(--color-light-grey); 
       color: var(--color-white); 
     } 
   } 
   @media (hover: none) { 
     /*targets only medias that can not be hover for mobile devices or tabs <!--TODO:*/ 
     .btn-rating:hover { 
       background-color: var(--color-Orange); 
       color: var(--color-white); 
     } 
   }
  

  0
• 

  Mason Boomgaard•180

  @MasonBoomPosted about 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 :)

  0

  ---

  

  yishak abrham•2,150

  @yishak621Posted about 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 
         }); 
       } 
     });
  

  1