Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pricing component Sass/Flexbox

@Mattvp21

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I could use help on the javascript for this. My approach was going to be to change the innerHTML when the checkbox became inactive, but it did not work and it all went downhill from there. I ended up spending the next couple of hours trying to fix it and decided it wasn't worth the hassle. I figured I would submit what I got and seek help. Any suggestions?

Community feedback

Elizabeth 460

@gelizabeth

Posted

Hi Matthew, Great work with HTML and CSS!

For javascript - I've seen your code, here are some suggestions:

1.Select element, not its property because element can emit events. let checkBox = document.querySelector('#myonoffswitch');

  1. Input, in this case checkbox, has special event - change when element is checked/unchecked. checkBox.addEventListener('change', myFunction());

  2. In myFunction check checkbox.checked and change innerHTML of elements. function myFunction(){ if(checkbox.checked) { //change prices to year} else {//change prices to month} }

Hope this helps, If you have more questions I'll try to answer. Happy coding!

1

@Mattvp21

Posted

Youre solution worked! :D

Thanks for saving me alot of time!

Just a quick question: Why use the change event in this case instead of checking the boolean?

Thanks again,

Matt

0
Elizabeth 460

@gelizabeth

Posted

@Mattvp21 you are welcome:)

If you check Boolean it will call your myFunction only once - when page is loaded, so you will not see any change; and you need to call it every time you click year/month switch.

1

@Mattvp21

Posted

@gelizabeth So I guess that would explain why checking the condition in the console worked but not in the code. Got it!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord