Calculator

➡️ 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.

Goal

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!

Extra credit

• 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.

Built with

• HTML5
• CSS3
  • Design is my own
  • I used Flexbox to arrange the buttons
• JavaScript (Vanilla)

Lessons Learned

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.

Resources

The favicon is from Icons8.