I am a beginner in JavaScript, so to enhance my skills, I am trying to build a calculator. However, I have been trying to figure out for many hours how to make the operator buttons work (more specifically the plus and equal button) but I just can't seem to do it. How can I make them work like a normal calculator would make them work? Please help :(
More specifically, I am trying to convert the strings to an actual number with the help of the plus and equal operators so I can get a proper result, but I don't know how to (For example: 12 + 12 should equal 24, but it's giving me equal 12 + 12). I tried to use the eval() method, but it doesn 't work. I tried to convert the string to a number with Number(), but it didn't work either. I tried a bunch of different things, but it didn't work either.
"use strict";
// ===============NUMBERS
const screen = document.querySelector(".screen");
const zero = document.querySelector(".zero");
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
const four = document.querySelector(".four");
const five = document.querySelector(".five");
const six = document.querySelector(".six");
const seven = document.querySelector(".seven");
const eight = document.querySelector(".eight");
const nine = document.querySelector(".nine");
const buttons = document.querySelectorAll(".buttons");
// ==============OPERATORS
const dot = document.querySelector(".dot");
const equal = document.querySelector(".equal");
const plus = document.querySelector(".plus");
const minus = document.querySelector(".minus");
const multiplication = document.querySelector(".multiplication");
const division = document.querySelector(".division");
const clear = document.querySelector(".clear");
const openParenthesis = document.querySelector(".open-parenthesis");
const closeParenthesis = document.querySelector(".close-parenthesis");
// ACTUAL COMPUTING CALCULATOR
let currentInput = "";
let fullExpression = "";
let result = "";
three.addEventListener("click", function() {
currentInput += "3";
screen.textContent = currentInput;
console.log(currentInput);
});
one.addEventListener("click", function() {
currentInput += "1";
screen.textContent = currentInput;
console.log(currentInput);
});
two.addEventListener("click", function() {
currentInput += "2";
screen.textContent = currentInput;
console.log(currentInput);
});
plus.addEventListener("click", function() {
fullExpression = fullExpression + currentInput + " +";
currentInput = " ";
console.log(
`Current input: ${currentInput}`,
`Full expression: ${fullExpression}`
);
/* screen.textContent = fullExpression; */
});
equal.addEventListener("click", function() {
fullExpression = fullExpression + currentInput;
console.log(fullExpression);
/* screen.textContent = fullExpression; */
});
clear.addEventListener("click", function() {
currentInput = "";
fullExpression = "";
screen.textContent = "";
});
// Button click
/* buttons.forEach(function (button) {
button.addEventListener("click", function () {
const buttonClicked = true;
console.log(buttonClicked);
});
}); */
/* two.addEventListener("click", function () {
screen.textContent += "2";
});
three.addEventListener("click", function () {
screen.textContent += "3";
});
four.addEventListener("click", function () {
screen.textContent += "4";
});
five.addEventListener("click", function () {
screen.textContent += "5";
});
six.addEventListener("click", function () {
screen.textContent += "6";
});
seven.addEventListener("click", function () {
screen.textContent += "7";
});
eight.addEventListener("click", function () {
screen.textContent += "8";
});
nine.addEventListener("click", function () {
screen.textContent += "9";
}); */@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap");
/*=========================================
=================RESETS===================
=========================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background-color: black;
font-family: "Nunito Sans", sans-serif;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container {
width: 400px;
/* background-color: red; */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 150px;
grid-auto-rows: 80px;
gap: 5px;
padding: 1em;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
.buttons:hover {
transform: scale(0.95);
}
.orange {
background-color: orange;
}
.soft {
background-color: rgb(143, 143, 143);
}
.dark {
background: rgb(66, 66, 66);
}
/* ========BUTTONS====== */
.screen {
grid-column: 1 / 5;
display: flex;
justify-content: end;
align-items: end;
padding: 1em 2em;
font-size: 2rem;
}
/* FIRST ROW */
.open-parenthesis {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.close-parenthesis {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
.clear {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.division {
grid-row: 2 / 3;
grid-column: 4 / 5;
}
/* SECOND ROW */
.multiplication {
grid-row: 3 / 4;
grid-column: 4 / 5;
}
/* THIRD ROW */
.minus {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
/* FOURTH ROW */
.plus {
grid-row: 5 / 6;
grid-column: 4 / 5;
}
.dot {
grid-row: 6 / 7;
grid-column: 3 / 4;
}
/* FIFTH ROW */
.zero {
grid-column: 1 / 3;
}
.equal {
grid-column: 4 / 5;
grid-row: 6 / 7;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Calculator</title>
</head>
<body>
<div class="container">
<div class="screen dark"></div>
<div class="buttons one dark">1</div>
<div class="buttons two dark">2</div>
<div class="buttons three dark">3</div>
<div class="buttons four dark">4</div>
<div class="buttons five dark">5</div>
<div class="buttons six dark">6</div>
<div class="buttons plus orange">+</div>
<div class="buttons minus orange">-</div>
<div class="buttons multiplication orange">x</div>
<div class="buttons division orange">÷</div>
<div class="buttons equal orange">=</div>
<div class="buttons dot dark">.</div>
<div class="buttons clear soft">C</div>
<div class="buttons seven dark">7</div>
<div class="buttons eight dark">8</div>
<div class="buttons nine dark">9</div>
<div class="buttons zero dark">0</div>
<div class="buttons open-parenthesis soft">(</div>
<div class="buttons close-parenthesis soft">)</div>
</div>
<script src="script.js"></script>
</body>
</html>
I added:
and it works fine