Hosted Project
https://js-beginners.github.io/Calculator-JavaScript-Project/Github Source Files
https://github.com/JS-Beginners/Calculator-JavaScript-ProjectJavaScript Used
- DOM Manipulation
- Control Structures
- Array.forEach()
- JavaScript CSS Manipulation
- eventListeners
- Immediately Invoked Function Expressions
Project Description/Summary
This project involves using JavaScript to wire up a simple calculator.New Things Learned or Refreshed
I spent most my time starring at the screen. I got my numbers to show up but I couldn't figure out how to do the math and make it show up. I thought the easiest way was to use the eval() function but I read in the MDN documentation to never use eval(). So, I got stuck and lost patience. I remember doing a JavaScript calculator project about 5 months ago but it was clear today that that I must have just copied the solution as a code along as Brian Holt typed through it. The code above in nothing like the code for my previous Apple JavaScript Calculator Project. The Apple Calculator handles errors extremely well. It's more on the Intermediate side of the house, if you're up for a challenge. I ended up watching John's solution and implemented his since I had already been at this problem for more than an hour. Word of caution, the solution above works to the extent that the user uses the calculator flawlessly. If not, there are many use cases in which the code won't work and will throw errors. For example, if someone starts with an * operator instead of a number, the eval() function won't work. You'll get anUncaught SyntaxError: Unexpected token * at HTMLButtonElement.<anonymous> error.
Time to Code
This took about 2 hours, start to finish, including watching John's solution and then going back to finish my own solution.Lines of Code
This took 30 lines of code, including comments and white space.Biggest Take Away(s)
I couldn't for the life of me remember how I coded my last calculator project. This goes to show that continuous coding and going back to previous problems is just the name of the game.Your Turn!
What to Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - If you think you need to see a video solution first, be sure to pick up John's JavaScript Tutorial and Projects Course.
- Add a link to your finished project below!
What You Should See
- In the case of calculator above, you should be able to use the calculator to evaluate basic expression. There is no error handling in involved in the solution.
Need to see the video solution for this project?
Get John's JavaScript Tutorial and Projects Course
I would has love to add a link to my projects but don’t know how to commit to Github
Try John Smigla’s free tutorial here on YouTube: https://www.youtube.com/watch?v=lvF_9pf5p3Q
https://github.com/longetka/simple-js-calculator.git
first 10 project done
/*
NOTE:
I added the class “symbol-button” to the buttons “-“, “+”, “/”, “*”
I added the class “num-button” to buttons with the numbers 0-9 and the decimal
*/
const buttons = document.querySelectorAll(“.btn”);
const screen = document.querySelector(“.screen”);
const numberButtons = document.querySelectorAll(“.num-button”);
let screenLength = 0;
let mathOperator;
let [x, y] = [0, 0];
// Click on Number/decimal button and display on screen
numberButtons.forEach((button) => {
button.addEventListener(“click”, (e) => {
screen.value = screen.value.concat(button.dataset.num);
});
});
//Click on plus/division/Multiplicaiton/Subtraction symbol to set value of first number
const symbolButtons = document.querySelectorAll(“.symbol-button”);
symbolButtons.forEach((symbolButton) => {
symbolButton.addEventListener(“click”, () => {
x = Number(screen.value);
screen.value = screen.value.concat(symbolButton.dataset.num);
screenLength = screen.value.length;
mathOperator = symbolButton.dataset.num;
});
});
//Clear Screen When Ren Button is Pressed
const clearButton = document.querySelector(“.btn-clear”);
clearButton.addEventListener(“click”, (e) => {
screen.value = “”;
[x, y] = [0, 0];
});
//Solve Equation When Equal Button is Pressed
const equalButton = document.querySelector(“.btn-equal”);
equalButton.addEventListener(“click”, () => {
y = Number(screen.value.slice(screenLength));
screen.value = solve(x, y, mathOperator);
});
const solve = (a, b, operator) => {
switch (operator) {
case “+”:
return a + b;
break;
case “-“:
return a – b;
break;
case “*”:
return a * b;
break;
case “/”:
return a / b;
break;
}
};
small edit:
symbolButtons.forEach((symbolButton) => {
symbolButton.addEventListener(“click”, () => {
if (mathOperator) {
y = Number(screen.value.slice(screenLength));
screen.value = solve(x, y, mathOperator);
}
x = Number(screen.value);
screen.value = screen.value.concat(symbolButton.dataset.num);
screenLength = screen.value.length;
mathOperator = symbolButton.dataset.num;
});
});