Calculator project
This is the last project under Odin Project fundamentals. It was built using HTML, CSS, and Javascript. The style attempts to emulate TI calculators, with the pixelated font and display color Overall it was good practice using javascript to add functionality to each of the calculator buttons, and changing the front-end in response to calculations.
Note: it only evaluates a pair of numbers at a time (This was in the specifications). Subsequent operations can be added after each calculation (see demo).
Demo
Screen.Recording.2021-12-12.at.12.15.03.PM.mov
A live demo can be found here.
Features
- Digits 0-9
- Exponents
- Square roots
- Sign change
- 4 function (+, -, /, ÷)
To-do
- EXTRA CREDIT: Users can get floating point numbers if they do the math required to get one, but they can’t type them in yet. Add a . button and let users input decimals! Make sure you don’t let them type more than one though: 12.3.56.5. It is hard to do math on these numbers. (disable the decimal button if there’s already one in the display)
- EXTRA CREDIT: Add a “backspace” button, so the user can undo if they click the wrong number.
- EXTRA CREDIT: Add keyboard support!
- EXTRA CREDIT: Make it look nice! This can be a good portfolio project… but not if it’s UGLY. At least make the operations a different color from the keypad buttons.