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

Responsive Calculator App using HTML, CSS and JS (I use push and pop)

@cruz-jerwin15

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my 7th challenge and 1st under intermediate category. I just want to ask if the way I change the themes is okay.

Thanks in advance.

Community feedback

Nelson 2,390

@nelsonleone

Posted

Hello, congrats on completing this challenge🎊🎊🎊

The way you worked on your toggle is fine , but you can improve it for next time.

Because some users might not figure out they have to click a place in the toggle background to change theme. Don't you think ? would be better if clicking on the numbers or the toggle circle even changes theme. Nice work, Have fun coding🎊

0

@Mattvp21

Posted

The way you change the theme is fine. It's very similar to the way I did mine by having 3 circles and toggling the opacity. I think you could've made it easier if you put a theme-1 id on your body, set the colors to your elements accordingly, and then set your id attribute accordingly in your javascript. So for example, if you switch to theme 2, your css should be set to something like #theme-2 .calc {} and your javascript will be like document.body.setAttribute('id', 'theme-2'). Hope that makes sense.

Also, I think the theme box should be a little bigger and the circles should just about touch each other. I'm having trouble clicking the theme at times. Add cursor:pointer to the box so it's more clear on where the user should click.

It looks good! Great work and happy coding!

Matt

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