Savings Calculator

 

.role {
padding: 20px;
margin-bottom: -10px; /* Adds spacing between sections */
position: relative; /* Needed for pseudo-element positioning */
}

.row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
}
.row label {
flex: 2;
color: #243D51;
font-weight: 600;
font-size: 14px;
line-height: 140%
}
input[type=”range”] {
flex: 5;
margin: 0 10px;
}
.num-value, .hours-value, .cost-value {
flex: 1;
font-weight: bold;
color: #2C689D;
}
.hrs-year-display {
font-weight: 400;
color: grey;
font-size: 14px;
line-height: 140%
}
h3 {
color: #243D51;
font-size: 24px !important;
font-family: ‘Mullish’, sans-serif;
font-weight: 600 !important;
margin-bottom: 5px;
}

.subtext {
font-size: 14px;
color: #5A6B7B;
margin-bottom: 24px;
line-height: 1.4;
}

/* Responsive Layout for Mobile */
@media screen and (max-width: 768px) {
.row {
flex-direction: column;
align-items: flex-start;
}

.row label {
margin-bottom: 15px;
width: 100%;
}

.row input[type=”range”] {
width: 100%;
}

.num-value, .hours-value, .cost-value {
align-self: flex-end;
}

}
/* General styling for the track */
.styled-slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
background: #EDEDED;
border-radius: 5px;
}
input[type=”range”] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: #EDEDED; /* Default track color */
border-radius: 5px;
outline: none;
transition: 0.2s;
}

/* WebKit browsers (Chrome, Safari) */
input[type=”range”]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
border-radius: 5px;
background: linear-gradient(to right, #008080 var(–progress), #EDEDED var(–progress));
}

/* Thumb styling */
input[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #2C689D;
border-radius: 50%;
cursor: pointer;
margin-top: -5px; /* Adjusts alignment */
}

/* Firefox (uses a different approach) */
input[type=”range”]::-moz-range-progress {
background: #2C689D;
height: 8px;
border-radius: 5px;
}
input[type=”range”]::-moz-range-track {
background: #EDEDED;
height: 8px;
border-radius: 5px;
}

#summary-section {
margin-top: 30px;
padding: 20px;
border-radius: 8px;
text-align: center; /* Centers inline text elements */
display: flex;
flex-direction: column; /* Stacks elements vertically */
align-items: center; /* Centers everything horizontally */
justify-content: center; /* Centers content within the section */
}

/* Cost Savings Text */
.summary-text {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
font-weight: bold;
color: white;
padding: 15px;
background: #243D51;
border-radius: 8px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
width:70%;
}
@media screen and (max-width: 768px) {
.summary-text {
width: 100%; /* Takes full width on mobile */
flex-direction: column;
}
}

/* Calculate Button */
#calculate-savings {
background-color: #243D51;
color: #FFFFFF;
padding: 14px 28px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
width: 250px; /* Default width for desktop */
margin-top: 20px;
transition: background 0.3s ease;
display: none;
}

/* Hover Effect */
#calculate-savings:hover {
background-color: #16273B;
}

/* Mobile: Full-width Button */
@media screen and (max-width: 768px) {
#calculate-savings {
width: 100;}

@media screen and (max-width: 768px) {
input[type=”range”] {
height: 4px; /* Reduce height for better UI on mobile */
}

input[type=”range”]::-webkit-slider-runnable-track {
height: 4px;
}

input[type=”range”]::-moz-range-track {
height: 4px;
}
}
#total-savings {
font-size: 38px; /* Adjust size as needed */
font-weight: 800; /* Make it bold */
color: #008080; /* Highlighted color for emphasis */
display: block;
margin-top: 5px;
}

function calculateRoleSavings(roleElement) { let num = parseFloat(roleElement.querySelector(“.num-slider”).value); let hours = parseFloat(roleElement.querySelector(“.hours-slider”).value); let cost = parseFloat(roleElement.querySelector(“.cost-slider”).value); let yearlyHours; if (roleElement.dataset.role === “turnover”) { let nurses = parseFloat(document.querySelector(‘[data-role=”nurses”] .num-slider’).value); yearlyHours = (num / 100) * nurses * hours * 12; } else { yearlyHours = num * hours * 12; } roleElement.querySelector(“.hrs-year”).textContent = yearlyHours.toLocaleString(); return yearlyHours * cost; } function updateAllValues() { let totalSavings = 0; document.querySelectorAll(“.role”).forEach((role) => { totalSavings += calculateRoleSavings(role); }); document.getElementById(“total-savings”).textContent = `$${totalSavings.toLocaleString()}`; } // Ensure all sliders update in real-time document.querySelectorAll(“.num-slider, .hours-slider, .cost-slider”).forEach((input) => { input.addEventListener(“input”, function () { let parent = this.closest(“.role”); parent.querySelector(“.num-value”).textContent = parent.querySelector(“.num-slider”).value; parent.querySelector(“.hours-value”).textContent = parent.querySelector(“.hours-slider”).value; parent.querySelector(“.cost-value”).textContent = `$${parent.querySelector(“.cost-slider”).value}`; updateAllValues(); }); }); document.getElementById(“calculate-savings”).addEventListener(“click”, updateAllValues); updateAllValues(); //input slider document.querySelectorAll(‘input[type=”range”]’).forEach((slider) => { slider.addEventListener(“input”, function () { let val = (this.value – this.min) / (this.max – this.min) * 100; this.style.background = `linear-gradient(to right, #619FCF ${val}%, #E6EFF8 ${val}%)`; }); // Initialize on load slider.dispatchEvent(new Event(“input”)); });