Calculator
Completed: 9 November 2025
My first JavaScript project turned out to be much easier than I thought it would be. I imagined that it would require mapping each mathmatical operation button with a specific function, but it turns out that JavaScript has an eval() function that can calculate the result of the current display.
Other things I learned how to do:
- Organize page elements into a grid
- Map a button click to a JavaScript function
- Call a page element's content into a script
- Change a page element with a script
-
Use a 'try...catch' block if I anticipate input errors
(e.g.: two operators in a row would otherwise break this code)
Outcome:
Relevant Code:
const display = document.getElementById("display");
function appendToDisplay(inp) { display.value += inp }
function clearDisplay() { display.value = "" }
function backSpace() { display.value = display.value.slice(0, -1) }
function calculateResult() {
try {
display.value = eval(display.value);
} catch {
display.value = "Error";
}
}
Ways to Improve:
- Make the calculator recieve cooresponding input from the keyboard
- Have the on screen buttons appear pressed at the keyboard input
- Add keystroke sounds when a button is pressed
- Add more mathmatical functions to the calculator
- Make the display unable to receive input when it reads 'Error'