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

Static Site using SCSS and Flexbox

@fredrikjohanssonnn

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


Would like feedback on the app.js file. How I could have solved the price update easier without Template Literals. Also how I can control the switch button with spacebar. Since if you know change the state with the spacebar. The priced isn't updated. Which means that if you change the switch to annually with the spacebar, the monthly prices is till shown.

Community feedback

@rafaelmaiach

Posted

Hello Fredrik, congrats on your solution.

About the feedback you asked for:

  • You are listening to the click event. Try to add a second event listener to listen for the space key.
  • Or, you can use another kind of element for that, for example, an input checkbox (https://www.w3schools.com/howto/howto_css_switch.asp)

About the Template Literals you did. I think it's a good workaround to have the elements changed, but, you could simplify it just changing the values you need to change. Your templates are too long, because you replace the whole information. Try to replace just the piece of element you need.

1

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