Pricing component + toggle with HTML,CSS,JS and Bootstrap

Community feedback

• 

  Ynnk•170

  @HYannickPosted over 4 years ago

  Hi :D nice work !

  For the JS part you may not need this block :

  const card = document.querySelectorAll('.card');
  card.forEach((card) => {
      card.addEventListener('mouseover', (event) => {
          card.classList.add("card-over")
          card.addEventListener('mouseout', (e) => {
              card.classList.remove("card-over");
          });
      });
  });
  

  as you can do this in css like this instead of the "card-over" class:

  .card {
   // your beautiful css
   transition: transform 0.5s ease-out;
  }
  .card:hover {
      transform: scale(1.1);
      color: white;
      background-image: linear-gradient(135deg, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
  }
  

  For the toggle part I noticed a redundant process on the forEach. You could maybe refactor like this:

  const toggleDisplay = value => el => {
         el.style.display = value
     }
  }
  
  toggle.addEventListener("change", (e) => {
      if(e.target.checked) {
          annual.forEach(toggleDisplay("none"))
          monthly.forEach(toggleDisplay("block"))
      } else {
          annual.forEach(toggleDisplay("block"))
          monthly.forEach(toggleDisplay("none"))
      }
  })
  

  Hope that helps!

  1

  ---

  

  Paolo•20

  @ppasta90Posted over 4 years ago

  It definitely helps! Thank you so much for your feedback!

  0