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

Calculator app with CSS grid

@alishertoshmurodov

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


I had trouble with the slider that changes the theme. Therefore I made my custom switchers.

Community feedback

@Mattvp21

Posted

Hi Alisher,

I just did this challenge and I had trouble with that slider as well. What I did was make the background with a little bit of border-radius and set the width to look right and then built 3 circles with the opacity: 0; on 2 and 3 and then toggled accordingly. For example, if I clicked theme 3, theme 1 and 2s opacity would be 0 and 3 would be set to 1 while setting the id attribute of the body based on the theme. You can use my code for reference if you'd like.

I like how you have functionality on the equal button after the original operation is performed. Really cool touch!

Hope this helps! Happy coding!

-Matt

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