Project: Calculator

Live Demo 👉 Calculator

PC View 👇

Overview

This was the final project the Calculator assignment on the foundation course of The Odin Project. I have combind everything I've learned so far. Using JavaScript, HTML, and CSS I have created an on-screen calculator.

Provided Assets

• none

Objectives

1. Function for each math operator
2. Operator function that takes an operator and calls one of the previous functions
3. Display with button for each digit, operation function, "plus" "divide" "equals"
4. Functions to populate display
5. String multiple operations together (12 + 7 - 5 * 3 = 42)
6. Do not evaluate more than one pair of numbers at a time
7. Round long decimal numbers to avoid overflow
8. 'Clear' button should wipe all existing data
9. Error message for divide-by-zero
10. (+) Decimal button for floating point numbers
11. (+) Different colors for operation and number buttons
12. (+) 'Backspace' button for wrong entries
13. (+) Keyboard support

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 it look nice! This is a great project to practice your CSS skills
• Add a “backspace” button, so the user can undo if they click the wrong number
• Add keyboard support!

Languages & Tools

Rozla-Dev 00-00-2023

Back to top 👆