1
Array[1] previously set.
The logic is to take the last array number, do the operation with the display value and return as the last array number.
Example:
Type 2 and press X, 2 * the last item of the array. Returns 2.
Then this value is played to the end of the Array.
Now Array[1,2]. Press 4 and multiply, Array[1,2,8].
I’m happy with that because I can manipulate later.
The question is this Array previously set with 1 should be empty!!! So I could reuse this calculation for division.
Since if you test the same thing with the divisional button (Press A/C before). Press 2%, There it is, the Array will be Array[1.0.5]. because 1/2= 0.5.
It would work if it were 2/1, as it would result in Array[1,2], and it would work.
I tried to start Array with null, 0 and ''. Always returns NaN, undefined or the very 0, obviously.
Remember to enter the number on the display and just click X, A/C to reset the Array and %.
const buttonnum = document.getElementsByClassName('num');
const inputdisplay = document.querySelector('#displayval input[type="text"]')
var arrayhistory = [1];
var resultado;
Array.from(buttonnum).forEach(function(item) {
item.addEventListener('click', function(e) {
switch (e.target.value) {
case "A/C":
arrayhistory = [1];
inputdisplay.value = "0";
console.log(arrayhistory);
break;
case "C":
inputdisplay.value = inputdisplay.value.slice(0, -1);
if (inputdisplay.value == '') {
inputdisplay.value = "0";
}
break;
case "X":
var arraylastnum = arrayhistory.slice(-1)[0];
console.log(arraylastnum);
resultado = (arraylastnum * inputdisplay.value)
arrayhistory.push(resultado);
inputdisplay.value = '0';
console.log(arrayhistory);
break;
case ".":
inputdisplay.value += '.';
break;
case "%":
var arraylastnum = arrayhistory.slice(-1)[0];
console.log(arraylastnum);
resultado = (arraylastnum / inputdisplay.value);
arrayhistory.push(resultado);
inputdisplay.value = '0';
console.log(arrayhistory);
break;
case "-":
break;
case "√":
break;
case "+":
break;
case "÷":
break;
case "=":
break;
}
})
}) * {
margin: 0;
padding: 0;
}
header h1 {
text-align: center;
margin: 8px;
}
#div-caldisplay {
background-color: rgb(51, 51, 48);
width: 500px;
height: 140px;
margin: auto;
margin-top: 20px;
border-radius: 8px;
}
#displayval {
display: flex;
justify-content: center;
height: 80px;
}
#text-view {
height: 75px;
width: 470px;
font-size: 35px;
border: 1px solid black;
}
.flexcontainer {
display: flex;
justify-content: space-around;
align-content: space-around;
background-color: rgb(18, 58, 18);
flex-wrap: wrap;
height: 350px;
width: 300px;
margin-left: 31.8%;
border-radius: 8px;
}
.flexcontainer2 {
display: flex;
justify-content: center;
align-content: space-around;
background-color: rgb(158, 27, 27);
border-radius: 8px;
flex-wrap: wrap;
height: 350px;
width: 100px;
}
.flexcontainer3 {
display: flex;
justify-content: center;
align-content: space-around;
background-color: rgb(2, 2, 2);
border-radius: 8px;
flex-wrap: wrap;
height: 350px;
width: 100px;
}
#flex {
display: flex;
}
#teste1 {
width: 100px;
height: 100px;
background-color: darkmagenta;
}
#teste2 {
width: 100px;
height: 100px;
background-color: chartreuse;
}
.num {
width: 85px;
height: 65px;
font-size: 25px;
cursor: pointer;
border: none;
border-radius: 5px;
border-bottom: 2px solid black;
transition-duration: 0.1s;
}
.num:active {
opacity: 0;
}
.num:hover {
font-size: 28px;
}
#mais {
height: 195px;
background-color: crimson;
}
#igual {
height: 195px;
}<!DOCTYPE html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator</title>
<link rel="stylesheet" href="calc.css">
<body>
<main>
<div id="div-caldisplay">
<header>
<h1>CALCULATOR</h1>
</header>
<div id="displayval">
<input type="text" name="visor" value="0" id="text-view">
</div>
</div>
<div id="flex">
<div class="flexcontainer">
<input class="num" type="button" value="A/C">
<input class="num" type="button" value="C">
<input class="num" type="button" value="X">
<input class="num" type="button" value="1">
<input class="num" type="button" value="2">
<input class="num" type="button" value="3">
<input class="num" type="button" value="4">
<input class="num" type="button" value="5">
<input class="num" type="button" value="6">
<input class="num" type="button" value="7">
<input class="num" type="button" value="8">
<input class="num" type="button" value="9">
<input class="num" type="button" value=".">
<input class="num" type="button" value="0">
<input class="num" type="button" value="00">
</div>
<div class="flexcontainer2 ">
<input class="num" type="button" value="%">
<input class="num" type="button" value="-">
<input class="num" id="plus" type="button" value="+">
</div>
<div class="flexcontainer3">
<input class="num" type="button" value="√">
<input class="num" type="button" value="÷">
<input class="num" id="equals" type="button" value="=">
</div>
</div>
</main>
<script src="calcjs.js"></script>
</body>
</html>Thanks in advance.