I’m working on a web based calculator using Python and Flask. I have a HTML, CSS, and JS file for the styling, and I ran into an issue. I have an info-box that has a start-state and error-state.
start-state: This is the default state that the info box should be in. The default text is ‘Enter value(s) below and select an operation.’ If I make a calculation such as 1 + 1 = 2, that whole thing will print out in the info box (1 + 1 = 2). If I hit the clear button, it will change the info-box back to its default state where it prints ‘Enter value(s) below and select an operation.’
error-state: This is the state if the user enters an invalid answer (1 + two instead of 1 + 2 etc) and it would print out the text “Invalid Input” and also change the color of the info-box to red.
I tried to google and ask around, but I still can’t figure out why my error-state isn’t properly changing the background color to red.
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.info-box {
background-color: #FFECD7;
color: #000000;
border: 1px solid #000000;
padding: 10px;
margin: 0 auto 20px;
max-width: 520px;
}
.start-state {
background-color: #FFECD7;
color: #000000;
}
.error-state {
background-color: #B70F0A;
color: #FFFFFF;
}
.container {
text-align: center;
}
.calculator-form {
display: inline-block;
text-align: left;
margin-bottom: 20px;
}
.section-text {
background-color: #EBEBEB;
color: #000000;
padding: 10px;
}
.clear-button {
width: 250px;
height: 30px;
background-color: #EBEBEB;
color: #000000;
margin-bottom: 10px;
font-size: 15px;
}
label {
font-size: 15px;
width: 150px;
height: 50px;
}
.operation-lists {
text-align: center;
}
.operation-list {
display: inline-block;
vertical-align: top;
margin-right: 20px;
padding: 0;
text-align: left;
list-style-type: none;
}
.error-message {
color: red;
}
.operator-button {
width: 250px;
height: 30px;
background-color: #EBEBEB;
color: #000000;
margin-bottom: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>Calculator</h1>
<div id="info-box" class="info-box start-state">
Enter value(s) below and select an operation.
</div>
<div class="calculator-form">
<form id="calculator-form" action="/calculate" method="POST">
<label for="num1">Input A:</label>
<input type="text" name="num1" id="num1" placeholder="0" required>
<label for="num2">Input B:</label>
<input type="text" name="num2" id="num2" placeholder="0">
</form>
</div>
<div class="operation-lists">
<ul class="operation-list">
<h2 class="section-text">A and B</h2>
<li><button class="operator-button" onclick="calculate('+')">A + B</button></li>
<li><button class="operator-button" onclick="calculate('-')">A - B</button></li>
<li><button class="operator-button" onclick="calculate('*')">A * B</button></li>
<li><button class="operator-button" onclick="calculate('/')">A / B</button></li>
<li><button class="operator-button" onclick="calculate('equals')">A == B</button></li>
<li><button class="operator-button" onclick="calculate('power')">A ^ B</button></li>
<li><button class="operator-button" onclick="calculate('log')">A log B</button></li>
<li><button class="operator-button" onclick="calculate('root')">A root B</button></li>
</ul>
<ul class="operation-list">
<h2 class="section-text">A only</h2>
<li><button class="operator-button" onclick="calculate('factorial')">A!</button></li>
<li><button class="operator-button" onclick="calculate('sin')">Sin A</button></li>
<li><button class="operator-button" onclick="calculate('cos')">Cos A</button></li>
<li><button class="operator-button" onclick="calculate('tan')">Tan A</button></li>
<li><button class="operator-button" onclick="calculate('reciprocal')">1 / A</button></li>
</ul>
</div>
<div class="calculator-form">
<button class="clear-button" onclick="clearInputs()">Clear</button>
</div>
<div id="result"></div>
<div id="error" class="error-message"></div>
</div>
<script>
function calculate(operation) {
var form = document.getElementById("calculator-form");
var formData = new FormData(form);
formData.append('operation', operation);
fetch('/calculate', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
var resultText = formData.get('num1') + ' ' + operation + ' ' + formData.get('num2') + ' = ' + data;
document.getElementById('result').innerText = 'Result: ' + resultText;
document.getElementById('error').innerText = '';
document.getElementById('info-box').innerText = resultText;
document.getElementById('info-box').className = 'info-box start-state';
})
.catch(error => {
document.getElementById('result').innerText = '';
document.getElementById('error').innerText = 'Error: ' + error;
document.getElementById('info-box').innerText = 'Invalid input';
document.getElementById('info-box').className = 'info-box error-state';
});
}
function clearInputs() {
document.getElementById('num1').value = '';
document.getElementById('num2').value = '';
document.getElementById('result').innerText = '';
document.getElementById('error').innerText = '';
document.getElementById('info-box').innerText = 'Enter value(s) below and select an operation.';
document.getElementById('info-box').classList.remove('error-state');
}
</script>
This is my project, any help is appreciated!
I have tried to add the background colors within the Javascript code and it didn’t change anything at all. My error-state function isn’t being used and I tried to think of ways to include it into the code, but I am stuck.