Pricing component with toggle

Community feedback

• 

  Kaung Zin Hein•720

  @K4UNGPosted over 2 years ago

  Hey! Well done on this project. I noticed that I could only click on the circle inside of the toggle and not the toggle itself. It'd also make better sense if the toggle was a button, and not a div for accessibility. Also when I hover over the buttons, there were some shifting going on. You could prevent this by adding a border to the element. Happy Coding!

  Marked as helpful

  2

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @K4UNG Thanks for the feedback, helped a lot. Didn't realize it was happening due to the border. You can check again now, should be fixed

  1
• 

  Jordane Gengo•590

  @jgengo-altPosted over 2 years ago

  Hello Catherine 👋 good job completing this challenge. Keep up the good work 💪

  🪴 Your solution looks great however I think:

  🌱 • In terms of UX it would be better if your toggle button is clickable from the whole div and not only the circle

  🌱 • Also, your side buttons seems to change the border-radius on hover which makes it a bit weird to the user eye.

  🌱 • On wide screen it looks extremely huge, you would benefits having a container with a max-width

  Hope this help and happy coding!

  Marked as helpful

  1

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @jgengo-alt Thank you, helped a lot. I fixed the button and now it's clickable even one empty area. By side button did you mean 'learn more'? I fixed it and it's not changing size anymore.

  Also, which max screen size do you think is the most common? I usually don't pay much attention after 1440px

  0

  

  Jordane Gengo•590

  @jgengo-altPosted over 2 years ago

  Hi @catherineisonline 👋

  I, once, found an post in StackOverflow that was suggesting to go with a max-width of 1366px for your containers ;)

  Your freshly updated version looks dope!

  I hope it helps, don't hesitate to mark my comment as helpful if it was :) 💪

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @jgengo-alt Definitely need to look into it, thanks

  0

  

  Jordane Gengo•590

  @jgengo-altPosted over 2 years ago

  @catherineisonline

  In addition, don't hesitate to use your chrome dev tools (or firefox one) switch to responsive mode and put a custom width and height to see how your layout looks like :)

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @jgengo-alt Yeah, that's what I usually use

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey Catherine!! Cheers 🥂 on completing this challenge.. . Just a subtle suggestion.. Transitions on the toggle and buttons would be nice . Regardless you did amazing.. Happy coding!!!

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @Samadeen Thanks for the advice

  0
• 

  Nikesh Naik•270

  @nikeshnaikPosted over 2 years ago

  The Design is super perfect.

  Doesn't innerHTML reconstructs the DOM and thus lose the event listeners?

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @nikeshnaik Thanks! After each change I reset everything back by using setInterval and also the event itself is triggered by clicking on button and it's HTML element isn't being changed, only switches a second class - annual and monthly.

  1
• 

  shawky sobhy•340

  @shawkysobhyPosted over 2 years ago

  amazing ,but how you can make pixel so perfect like that

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @shawky55 Thank you, I use Chrome extension called Perfect Pixel as well as Figma

  0
• 

  Danteie•300

  @DanteiePosted over 2 years ago

  How do u make so perfect sizes do you eyeball it or u use some tools. Sorry my English is not so great

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @Danteie I use Chrome extension called Perfect Pixel as well as Figma

  0