Calculator
Challenge
Make an on-screen calculator using JavaScript, HTML, and CSS.
Solution
Carefully constructed the Calculator to be modern, useful and enjoyable. Wrote from scratch all functions for math operations and display values. Designed on-screen product to have 3D features.
DESIGN THINKING
Ideation
Below questions document my thinking process while I tested different designs:
How should the numbers and operators be organized so that buttons are quick to find?
What should the visual display be like? 2-D or 3-D?
What will be the dimensions of the calculator? The iPhone and Samsung Galaxy are the most popular handheld devices, so a calculator with the same dimensions will be comfortable and familiar to the user.
How should the answer be displayed? Will the old value still show or disappear?
Visual Design
The buttons have a 3-D quality to them so that users are rewarded with a satisfaction of pushing a button. The deep grooves of a pressed button replicated the nostalgia of using a physical calculator.
Operation buttons are in high contrast colors so they are easy to identity. The most used button, the “equals” operator, is the largest button on the calculator and the quickest to reach by thumb. The “clear” operator is the farthest to reach so that users don’t accidentally press it; “clear” is also colored orange as to symbolize caution.
Previous display value is at a low opacity and floats about the current value. Current numbers displayed stand out with a drop shadow, adding further depth and realness to the virtual product.
3-D effect of button being pressed. Numbers are highlighted a bright pink when hovered upon so user is clear which number is being selected.
Tools Used
Web Development was made on Visual Studio Code with Vanilla JavaScript, HTML + CSS. Project was saved on Git and hosted on GitHub.
Next Steps
Create a mobile version where the calculator face covers the entirety of the mobile screen.