HTML, CSS, JavaScript

Community feedback

• 

  Eileen dangelo•1,600

  @Eileenpk

  Posted about 3 years ago

  Hey Vkampos2!
  Great job on this project! You are very good at CSS! I went through your JS / HTML code and this might help you, if you make the changes and paste the JS code it should work.

  1- The QuerySelector might not have worked because you have your script for JavaScript in the head tag, put at the bottom of HTML page between the body tag and the html tag.

  2- Take off the onclick"myfunction" in the HTML (this is for separation of concerns)

  3- Add the class of yearly-price to all prices for the annual price in html

  4- Add the class of hidden to CSS and set to display none do NOT add the show class to the html it will mess it up!
  .show { display: none; }

  5- add the class of yearly-price to CSS and set to display none

  .yearly-price { display: none; }

  • Remove price display none in CSS file .price { display: none; }

  new JS code :)

  const checkBox = document.getElementById("toggle") const hiddenPrice = document.querySelectorAll('.price') const yearlyprice = document.querySelectorAll('.yearly-price')

  checkBox.addEventListener('click', () => { hiddenPrice.forEach(el => { el.classList.toggle('show'); }); yearlyprice.forEach(el => { el.classList.toggle('yearly-price'); }); });

  Also here is a link to my solution to this project if you want to see another way of doing the JS.

  https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC/hub/pricing-component-with-toggle-made-with-vanilla-js-and-flexbox-KFaG31YBzF

  Hopefully, this was helpful to you, and keep up the good work! Please let me know if you have any more questions!

  15

  Marked as helpful