function calculateActivityRate() {
var totalActiveUnits = document.getElementById("totalActiveUnits").value;
var totalUnits = document.getElementById("totalUnits").value;
var resultDiv = document.getElementById("activityRateResult");
resultDiv.innerHTML = ""; // Clear previous results
// Input validation
if (isNaN(totalActiveUnits) || totalActiveUnits === "" || isNaN(totalUnits) || totalUnits === "") {
resultDiv.innerHTML = "Please enter valid numbers for all fields.";
return;
}
if (parseFloat(totalUnits) === 0) {
resultDiv.innerHTML = "Total Units cannot be zero.";
return;
}
if (parseFloat(totalActiveUnits) < 0 || parseFloat(totalUnits) parseFloat(totalUnits)) {
resultDiv.innerHTML = "Total Active Units cannot be greater than Total Units.";
return;
}
// Calculation
var activityRate = (parseFloat(totalActiveUnits) / parseFloat(totalUnits)) * 100;
resultDiv.innerHTML = "The Activity Rate is: " + activityRate.toFixed(2) + "%";
}
.calculator-wrapper {
font-family: sans-serif;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
max-width: 600px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-inputs h2 {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.calculator-inputs p {
color: #555;
line-height: 1.6;
margin-bottom: 20px;
text-align: justify;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.form-group input[type="number"] {
width: calc(100% – 22px); /* Adjust for padding and border */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.calculator-wrapper button {
width: 100%;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.calculator-wrapper button:hover {
background-color: #0056b3;
}
.calculator-result {
margin-top: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
}
.calculator-result h3 {
margin-top: 0;
color: #333;
}
#activityRateResult {
font-size: 1.1em;
color: #007bff;
font-weight: bold;
}