HTML, CSS, JavaScript

Community feedback

• 

  Eileen dangelo•1,600

  @EileenpkPosted over 2 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!

  Marked as helpful

  1

  ---

  

  Valter Kampos•140

  @VKampos2Posted over 2 years ago

  @Eileenpk hi, thanks a lot for your feedback, it means a lot, i tried to apply what you said but it didnt work out, i think i might be doing something wrong.

  0

  

  Eileen dangelo•1,600

  @EileenpkPosted over 2 years ago

  @VKampos2 hi, I tried to look at your code to see what's happening, but I need you to update the GitHub with a new commit for me to be able to see what you have changed. I had just copied your code into vs code on my pc and made the changes there to make sure it worked. Once I see the updated code I can look over it. I can also make a fork/pull request and we can work on it together on GitHub.

  0

  

  Valter Kampos•140

  @VKampos2Posted over 2 years ago

  @Eileenpk it was updated only in my computer, there is a new update of the code on github, could you please check it?:)

  0

  

  Eileen dangelo•1,600

  @EileenpkPosted over 2 years ago

  @VKampos2 hey,

  1 - Add the keyword defer on the inside of your script tag.

  Here is a link to an article with more info on why the placement/ not having defer in the tag was causing trouble with the JavaScript. https://javascript.info/script-async-defer

  2 - Add to CSS

   .show {
  display:none
  }
  

  3 -

  checkBox.addEventListener('click', () => {
      hiddenPrice.forEach(el => {
          el.classList.toggle('show');
      });
      yearlyprice.forEach(el => {    // you missed the el and the arrow 
  // function  in the last for each.
          el.classList.toggle('yearly-price');
      });
   });
  

  Marked as helpful

  0

  

  Valter Kampos•140

  @VKampos2Posted over 2 years ago

  @Eileenpk once again thanks a lot, i've been a litle busy, i went through the code today, and it worked, it wasnt working because: const checkBox=document.getElementById("toggle") // i wrote cconst 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'); //missed el and arrow }); });

  0