The rate of change measures how one quantity changes in relation to another. In mathematics, it's often represented as the slope of a line or the derivative of a function. This calculator helps you find the average rate of change between two points given their corresponding values.
function calculateRateOfChange() {
var initialX = parseFloat(document.getElementById("initialX").value);
var initialY = parseFloat(document.getElementById("initialY").value);
var finalX = parseFloat(document.getElementById("finalX").value);
var finalY = parseFloat(document.getElementById("finalY").value);
var resultDiv = document.getElementById("result");
if (isNaN(initialX) || isNaN(initialY) || isNaN(finalX) || isNaN(finalY)) {
resultDiv.innerHTML = "Please enter valid numbers for all fields.";
return;
}
var deltaY = finalY – initialY;
var deltaX = finalX – initialX;
if (deltaX === 0) {
resultDiv.innerHTML = "The change in X (denominator) is zero. The rate of change is undefined (vertical line).";
} else {
var rateOfChange = deltaY / deltaX;
resultDiv.innerHTML = "The Rate of Change is: " + rateOfChange.toFixed(4);
}
}
.calculator-container {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-container h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.calculator-container p {
text-align: justify;
margin-bottom: 20px;
color: #555;
line-height: 1.6;
}
.input-section {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.input-section label {
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.input-section input[type="number"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.calculator-container button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
width: 100%;
transition: background-color 0.3s ease;
}
.calculator-container button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #e0e0e0;
border: 1px solid #d0d0d0;
border-radius: 4px;
text-align: center;
font-size: 1.1rem;
color: #333;
min-height: 30px; /* To prevent layout shifts */
}