Shorts: Building a Calculator App with React JS

.calculator {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
input {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
background: #007bff;
color: #fff;
cursor: pointer;
}

let currentInput = ”;
let prevValue = ”;
let operator = ”;

function appendNumber(number) {
currentInput += number;
document.getElementById(‘result’).value = currentInput;
}

function add() {
prevValue = currentInput;
operator = ‘+’;
currentInput = ”;
}

function subtract() {
prevValue = currentInput;
operator = ‘-‘;
currentInput = ”;
}

function multiply() {
prevValue = currentInput;
operator = ‘*’;
currentInput = ”;
}

function divide() {
prevValue = currentInput;
operator = ‘/’;
currentInput = ”;
}

function clearField() {
currentInput = ”;
prevValue = ”;
operator = ”;
document.getElementById(‘result’).value = ”;
}

function calculate() {
let result;
switch(operator) {
case ‘+’:
result = parseInt(prevValue) + parseInt(currentInput);
break;
case ‘-‘:
result = parseInt(prevValue) – parseInt(currentInput);
break;
case ‘*’:
result = parseInt(prevValue) * parseInt(currentInput);
break;
case ‘/’:
result = parseInt(prevValue) / parseInt(currentInput);
break;
}
document.getElementById(‘result’).value = result;
currentInput = result.toString();
}