#calculator-container {
font-family: sans-serif;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.input-group input[type="text"],
.input-group input[type="number"] {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#calculator-output {
margin-top: 20px;
padding: 15px;
background-color: #eef;
border: 1px solid #cce;
border-radius: 4px;
}
#result {
font-weight: bold;
font-size: 1.1em;
}
function evaluateFunction(funcStr, x) {
try {
// Basic sanitization and evaluation for simple polynomial functions
// WARNING: eval() is generally unsafe. For a production system, use a safer math parser library.
// This is a simplified example for educational purposes.
funcStr = funcStr.replace(/x/g, `(${x})`);
funcStr = funcStr.replace(/\^/g, '**'); // Handle power operator
return eval(funcStr);
} catch (e) {
return NaN; // Return NaN if evaluation fails
}
}
function calculateAverageRateOfChange() {
var funcStr = document.getElementById("func_notation").value.split('=')[1].trim(); // Extract the right side of the equation
var a = parseFloat(document.getElementById("interval_start").value);
var b = parseFloat(document.getElementById("interval_end").value);
var resultDiv = document.getElementById("result");
if (isNaN(a) || isNaN(b) || funcStr === "") {
resultDiv.innerHTML = "Please enter valid numbers for the interval and a function.";
return;
}
if (a === b) {
resultDiv.innerHTML = "The interval start and end cannot be the same.";
return;
}
var fa = evaluateFunction(funcStr, a);
var fb = evaluateFunction(funcStr, b);
if (isNaN(fa) || isNaN(fb)) {
resultDiv.innerHTML = "Could not evaluate the function at the given interval points. Please check your function notation.";
return;
}
var rateOfChange = (fb – fa) / (b – a);
resultDiv.innerHTML = "The average rate of change is: " + rateOfChange.toFixed(4);
}