➡️ Live preview
This calculator lets you do simple operations like additions, subtractions, divisions, multiplications, and converting a number to a percentage or a negative number. I made it as part of The Odin Project curriculum, as the last assignment of the Foundations.
After learning the basics of HTML, CSS, and JavaScript, the goal was to make a simple online calculator. These are some of the conditions given by The Odin Project (see the complete assignment here):
- Users should be able to string together several operations and get the right answer, with each pair of numbers being evaluated at a time. For example, 12 + 7 - 5 * 3 = should yield 42.
- Your calculator should not evaluate more than a single pair of numbers at a time.
- You should round answers with long decimals so that they don’t overflow the screen.
- Pressing “clear” should wipe out any existing data.. make sure the user is really starting fresh after pressing “clear”
- Display a snarky error message if the user tries to divide by 0… don’t let it crash your calculator!
- Add a . button and let users input decimals!
- Make it look nice! This is a great project to practice your CSS skills. At least make the operations a different color from the keypad buttons.
- HTML5
- CSS3
- Design is my own
- I used Flexbox to arrange the buttons
- JavaScript (Vanilla)
This project pushed me to do some research and exchange with other developers. I took a better grasp of DOM manipulation, especially of event listeners.
The favicon is from Icons8.