I am working on a simple calculator.
This is how I intend it to work;
taking an example of 4+5-3*8,
on pressing the second operator, the previous set should first be avaluated, and the result be logged as the first operand for the next part and gives;
9-3,
the next should do the same, by presing the times button, 9-3 is first evaluated, then the result (6) is logged as the the first operand for the next part, which should look like this
6*8. if that is the end, pressing equals sign should give 48, this should mark the end of that section, such that if another number is pressed, the calculator begins a new calculation. However if an operand is pressed, it should use 48 as the initial operand for the new calculation.
in the code that i am providing, i have designed to have an input expression than keeps track of the users interaction with the calculator, and with it are other variables too.
the input expression is key acording to my design, I am stuck on how to pass the input expression correctly to the evaluation function.
Kindly look at it and advice.
thanks a lot.
Here is a combined code, html, css and js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
padding-top: 50px;
}
.main-container {
max-width: 400px;
height: auto;
border: 5px solid gray;
}
.display {
display: flex;
align-items: center;
justify-content: end;
width: 400px;
height: 100px;
overflow-wrap: break-word;
border: 5px solid gray;
box-sizing: border-box;
}
button {
font-size: 36px;
width: 90px;
height: 90px;
margin: 5px;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid rgb(236, 232, 232);
}
.buttons-container {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.screen-display {
word-wrap: break-word;
font-size: 36px;
text-align: end;
}
@media (max-width: 420px) {
buttons {
font-size: 28px;
width: calc(25% - 6px);
height: calc(25vw - 6px);
margin: 3px;
box-sizing: border-box;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="display">
<p class="screen-display"></p>
</div>
<div class="buttons-container">
<button class="clear" id="clear">C</button>
<button class="backspace" id="backspace">⌫</button>
<button class="operations" id="percent">%</button>
<button class="operations" id="divide">÷</button>
<button class="number" id="seven">7</button>
<button class="number" id="eight">8</button>
<button class="number" id="nine">9</button>
<button class="operations" id="times">×</button>
<button class="number" id="four">4</button>
<button class="number" id="five">5</button>
<button class="number" id="six">6</button>
<button class="operations" id="minus">-</button>
<button class="number" id="one">1</button>
<button class="number" id="two">2</button>
<button class="number" id="three">3</button>
<button class="operations" id="plus">+</button>
<button class="operations" id="positive-negative">+/-</button>
<button class="number" id="zero">0</button>
<button class="number" id="point">.</button>
<button class="operations" id="equals">=</button>
</div>
</div>
<script>
const buttonsContainer = document.querySelector('.buttons-container');
const displayParagraph = document.querySelector('.screen-display');
buttonsContainer.addEventListener('click', function(event) {
const clickedButton = event.target;
switch (clickedButton.id) {
case 'clear':
handleClearClick();
break;
case 'backspace':
handleBackspaceClick();
break;
case 'percent':
handlePercentClick();
break;
case 'positive-negative':
handlePositivenegativeClick();
break;
case 'equals':
handleEqualsClick();
break;
case 'times':
case 'divide':
case 'plus':
case 'minus':
handleOperator(clickedButton.innerHTML);
break;
default:
handleGenericClick(clickedButton.innerHTML);
}
});
// variables to keep track on the user interaction with the calculator
let inputExpression = '';
let result = 0;
let currentOperator = '';
let isNewCalculation = true;
function handleBackspaceClick() {
inputExpression = inputExpression.slice(0, -1);
updateDisplay();
}
function handleClearClick() {
inputExpression = "";
updateDisplay();
}
function handlePercentClick() {
if (inputExpression) {
const value = parseFloat(inputExpression);
const percentValue = value / 100;
inputExpression = percentValue.toString();
updateDisplay();
}
}
function handlePositivenegativeClick() {
if (inputExpression) {
inputExpression = -parseFloat(inputExpression);
updateDisplay();
}
}
let isDecimalDisabled = false;
//the function handleOperator(operator) and handleGenericClick(value), should help consruct the input expression
function handleOperator(operator) {
if (currentOperator && inputExpression !== '') {
if (!isNewCalculation) {
evaluate();
updateDisplay();
}
}
currentOperator = operator;
if (!isNewCalculation) {
inputExpression += operator;
updateDisplay();
}
isNewCalculation = false;
isDecimalDisabled = false;
}
function handleGenericClick(value) {
if (isNewCalculation) {
inputExpression = '';
isNewCalculation = false;
}
if (value === '.' && isDecimalDisabled) {
return;
}
if (value === '.' && inputExpression.includes('.')) {
isDecimalDisabled = true;
}
inputExpression += value;
updateDisplay();
}
function updateDisplay() {
displayParagraph.innerHTML = inputExpression;
}
function handleDivideClick() {
handleOperatorClick('/');
}
function handleTimesClick() {
handleOperatorClick('*');
}
function handlePlusClick(){
handleOperatorClick('+')
}
function handleMinusClick() {
handleOperatorClick('-')
}
/*this function handleEqualsClick(), should determine the end of a calculation,
but also alow its reuslt to be used as an inital operand for another calculation if
an operator is pressed afte the equals sign */
function handleEqualsClick() {
if (!isNewCalculation) {
evaluate();
updateDisplay();
isNewCalculation = true;
}
currentOperator = '';
}
let numberArr = [];
let operatorArr = [];
function inputExpressionToArr(str) {
const inputArr = str.match(/[+\-*/]|\d+/g);
if (inputArr) {
for (let i = 0; i < inputArr.length; i++) {
if (isNaN(inputArr[i])) {
operatorArr.push(inputArr[i]);
} else {
numberArr.push(parseFloat(inputArr[i]));
}
}
}
}
function evaluate() {
if (currentOperator && inputExpression !== '') {
// Call inputExpressionToArr to update numberArr and operatorArr
inputExpressionToArr(inputExpression);
// If there are previous numbers and operators, perform the calculation
if (numberArr.length > 0 && operatorArr.length > 0) {
// Perform calculations based on the contents of numberArr and operatorArr
result = calculateResult(numberArr, operatorArr);
// Clear arrays after calculation
numberArr = [];
operatorArr = [];
}
displayResult(result);
isNewCalculation = true;
}
}
// Function to perform calculation based on arrays
function calculateResult(numbers, operators) {
let result = numbers[0];
for (let i = 0; i < operators.length; i++) {
const nextNumber = numbers[i + 1];
switch (operators[i]) {
case '+':
result += nextNumber;
break;
case '-':
result -= nextNumber;
break;
case '*':
result *= nextNumber;
break;
case '/':
if (nextNumber !== 0) {
result /= nextNumber;
} else {
displayResult('Error: Division by zero');
isNewCalculation = true;
return 0; // or some default value
}
break;
default:
break;
}
}
return result;
}
function displayResult(result) {
inputExpression = result.toString();
updateDisplay();
}
</script>
</body>
</htm>```