I am relatively new to coding and am currently practising making a good old calculator using html, css and javascript. I am however struggling with how the calculator handles user input errors. Doing "5++5" or "5+-5" for instance makes the calculator do nothing. The goal is for "5++5" to lead to "5+5" and "5+-5" to lead to "5-5" and so on. If anyone can help me implement this i would be more than thankful!
console.log("hi");
let screen = document.getElementById('display');
evalValue = "";
screenData = "";
screen.value = "0";
buttons = document.querySelectorAll('button');
for (item of buttons) {
item.addEventListener('click', function (e) {
buttonValue = e.target.innerText;
if (buttonValue == String.fromCharCode(215)) {
screenData += String.fromCharCode(215);
buttonValue = '*';
evalValue += buttonValue;
screen.value = screenData;
}
else if (buttonValue == String.fromCharCode(247)) {
screenData += String.fromCharCode(247);
buttonValue = '/';
evalValue += buttonValue;
screen.value = screenData;
}
else if (buttonValue == "=") {
length = evalValue.length;
console.log(length);
if (evalValue == "") {
}
else if((evalValue.charAt(evalValue.length-1) == "%")){
console.log("before eval screendata " + screenData);
console.log("before eval evalvalue " + evalValue);
evalValue = evalValue.substring(0, length-1);
screen.value = eval(evalValue)/100;
evalValue = screen.value;
screenData = screen.value;
console.log("after eval screendata " + screenData);
console.log("before eval evalvalue " + evalValue)
}
else{
console.log("before eval screendata " + screenData);
console.log("before eval evalvalue " + evalValue);
screen.value = eval(evalValue);
evalValue = screen.value;
screenData = screen.value;
console.log("after eval screendata " + screenData);
console.log("before eval evalvalue " + evalValue);
}
}
else if (buttonValue == "DEL") {
if (screen.value == "0") {
}
else {
size = screen.value.length;
screen.value = screen.value.substring(0, size - 1);
evalValue = evalValue.substring(0, size - 1);
screenData = screen.value;
}
}
else if (buttonValue == "AC") {
screenData = "";
screen.value = "0";
evalValue = "";
}
else if (buttonValue == String.fromCharCode(8730)) {
screenData += (String.fromCharCode(8730) + "(");
buttonValue = 'Math.sqrt(';
evalValue += buttonValue;
screen.value = screenData;
}
else if (buttonValue == String.fromCharCode(177)) {
console.log("clicked +-");
if (evalValue == "0") {
}
else {
screenData = -parseFloat(screenData);
buttonValue = '';
evalValue = -parseFloat(evalValue);;
screen.value = screenData;
}
}
else {
screenData += buttonValue;
evalValue += buttonValue;
screen.value = screenData;
}
})
}
console.log(buttons);/* for styling */
.container {
text-align : center;
max-width: 100%;
}
table{
margin : auto;
}
button{
width: 147px;
height: 64.5px;
margin: 3px;
border-radius: 5px;
border: 1px solid #f1f3f4;
background-color: #f1f3f4;
font-size: 25px;
cursor: pointer;
}
button:active{
border : 2px solid #dce5e9;
}
#display{
width: 594px;
height: 77px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #d4dce0;;
font-size: 35px;
padding: 0px 10px;
text-align: right;
}
.secondarybtn{
background-color:#dadce0;
}
.ansbtn {
background-color: #4285f4;
font-weight: 700;
color: white;
}
#backbtn{
background-color: #dadce0;
text-decoration-color: #dadce0;
}
@media screen and (max-width: 800px) {
button{
width: 15vw;
font-size: 4vw;
}
#display{
width: 61vw;
}
#h1{
font-size: 6vw;
}
div #footer{
font-size: 2vw;
}
}
div #footer{
margin-top: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="css/calculator.css">
</head>
<body>
<div class="container">
<h1 id="h1"> Calculator</h1>
<input id="display" type="text" name="output">
<!-- create table -->
<table>
<tr>
<td><button class="secondarybtn">(</button></td>
<td><button class="secondarybtn">)</button></td>
<td><button id="clear" class="secondarybtn">DEL</button></td>
<td><button id="reset" class="secondarybtn">AC</button></td>
</tr>
<tr>
<td><button class="secondarybtn">±</button></td>
<td><button class="secondarybtn">.</button></td>
<td><button class="secondarybtn">%</button></td>
<td><button class="secondarybtn">√</button></td>
</tr>
<tr>
<td><button id="seven">7</button></td>
<td><button id="eight">8</button></td>
<td><button id="nine">9</button></td>
<td><button id="divide" class="secondarybtn">÷</button></td>
</tr>
<tr>
<td><button id="four">4</button></td>
<td><button id="five">5</button></td>
<td><button id="six">6</button></td>
<td><button id="multiply" class="secondarybtn">×</button></td>
</tr>
<tr>
<td><button id="one">1</button></td>
<td><button id="two">2</button></td>
<td><button id="three">3</button></td>
<td><button id="minus" class="secondarybtn">-</button></td>
</tr>
<tr>
<td><button>00</button></td>
<td><button id="zero">0</button></td>
<td><button id="equals" class="ansbtn">=</button></td>
<td><button id="plus" class="secondarybtn">+</button></td>
</tr>
</table>
</div>
</body>
<script src="js/calculator.js"></script>
</html>