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

uiGuy• 255

@uiGuys

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


Feedback required

Community feedback

Ahmed Faisal• 5,095

@afrussel

Posted

Add a background color in .calculator class

Marked as helpful

1

uiGuy• 255

@uiGuys

Posted

@afrussel OK

0
Ahmed Faisal• 5,095

@afrussel

Posted

Also on .theme class make border: 0

2

uiGuy• 255

@uiGuys

Posted

@afrussel alright

0
P
Patrick• 14,325

@palgramming

Posted

You should limit the . key so on each value entered to be calculated there can only be one . in each entry and so the user cannot enter a number that looks like this 1.2.3.4.5.6.7.8.9

1
LetsFrontend• 500

@B1N4R1

Posted

Hi uiguy,

Great solution to the challenge! Both the layout and the calculator logic are great.

Here some little suggestions:

  • I would get rid of the max-width: 770px on the 600px media-query the calculator looks too stretched to my eyes.
  • I would avoid letting the user type in multiple periods (......). This is causing some problems when making calculations. Like for example you can calculate 8 + 6...... which is giving some syntax error.

Btw, nice work with the theme toggle too.

Cheers!

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