Price component with toggle HTM, CSS and vanilla JS

Community feedback

• 

  Connor Z•5,115

  @zuolizhuPosted about 4 years ago

  Hey Mustafa,

  You work is very close to the design file and the switch button works well 👏!

  From the design point of view, the border-radius of the cards could be bigger, I believe it was 10px on the sketch file. The box-shadow is also lighter, box-shadow: 0px 20px 40px rgba(212, 210, 244, 50%); will looks better.

  Your JS code looks nice and clean, however, you don't need to use else if since this.checked only have two values, either true or false. if and else would be good enough.

  To make it even shorter

  if (this.checked) {
          prices[0].textContent = annualPrices[0];
          prices[1].textContent = annualPrices[1];
          prices[2].textContent = annualPrices[2];
      } else {
          prices[0].textContent = monthlyPrices[0];
          prices[1].textContent = monthlyPrices[1];
          prices[2].textContent = monthlyPrices[2];
      }
  

  Happy coding 🙌!

  3

  ---

  

  Mustafa•415

  @Mostafa-TPosted about 4 years ago

  @zuolizhu Thank you so much !! I really appreciate that you gave your self the time to review my code and give me a feedback. I will work on updating this project as soon as possible 😁

  1