Submitted 8 months ago

Calculator Enhanced, Animated, responsive, accessible, installable

Jack Smith• 350

@Clonephaze

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Calculator app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my second submission for the calculator, but this time I went my own direction. Features:

Better Layout (imo)
Keyboard controls: numbers, functions, and tabbing if wanted.
History Section that can be viewed, or selected to continue that entry
Ability to add manual parenthesis if desired to control pemdas order
A small number screen on top of the normal for keeping track of the whole number sentence.
Custom Icons, favicon and app icons for android, iphone, microsoft, and macOS.
Rich Install, if you open the link in chrome or a mobile browser you can choose to install the app locally as though it were a regular app. It has preview screenshots and a description just like normal apps. If installed the app can and will work offline. It NEVER reaches outside of its local installation for anything other than fetching new css if I add it.

Community feedback

Comfort• 310

@comfortprince

Posted 8 months ago

I have to say amongst the solutions I have seen (including mine), this one is the best. However there is small bug. The keyboard's num keys remain operational when the user views the history tab. I think its more intuitive to disable the keys or switch to keypad in such a case. Otherwise I think its great.

I'm definitely gonna learn something from your source code.

Marked as helpful

Jack Smith• 350

@Clonephaze

Posted 8 months ago

@comfortprince That's a great point! Next time I'm at my station I'll add a check for the history page. Hope the code can be useful, I'm fairly proud of this one, and did my best to comment throughout the all the scripts but let me know if you need/want any clarification.

Please log in to post a comment

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