Calculator Tools Calculator Tools
Create

Progress Bar App

Sep 5, 2023

About this app

A simple app with a button to fill up a progress bar.

Healthcare Cost Calculator Healthcare Cost Calculator Select Plan Aetna UHC Horizon Monthly Premium ($) Deductible ($) Coinsurance (%) Out-of-Pocket Max ($) Estimated Annual Healthcare Spend ($) Results Annual Premium: $0 Deductible Met: $0 Coinsurance Costs: $0 Total Out-of-Pocket Cost: $0 Total Estimated Annual Cost: $0

Related apps

Put this on your site

Source

index.html
                    <!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script>

<script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthcare Cost Calculator</title>
<meta name="description" content="An interactive tool to calculate healthcare costs based on user-defined deductible, coinsurance, and out-of-pocket maximum.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<link rel="canonical" href="https://calculator.tools/app/healthcare-cost-calculator-1459/">
<meta charset="utf-8">


<link rel="canonical" href="https://calculator.tools/app/progress-bar-app-1/">
<meta charset="utf-8">

</head>
<body>
<div class="container my-5">
<h2>Healthcare Cost Calculator</h2>

<!-- Plan Selection -->
<div class="mb-4">
<h5>Select Plan</h5>
<div class="btn-group" role="group" aria-label="Plan selection">
<input type="radio" class="btn-check" name="plan" id="planAetna" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="planAetna">Aetna</label>
<input type="radio" class="btn-check" name="plan" id="planUHC" autocomplete="off">
<label class="btn btn-outline-primary" for="planUHC">UHC</label>
<input type="radio" class="btn-check" name="plan" id="planHorizon" autocomplete="off">
<label class="btn btn-outline-primary" for="planHorizon">Horizon</label>
</div>
</div>

<!-- User Inputs -->
<div class="row mb-3">
<div class="col">
<label for="monthlyPremium" class="form-label">Monthly Premium ($)</label>
<input type="number" class="form-control" id="monthlyPremium" placeholder="Enter monthly premium">
</div>
<div class="col">
<label for="deductible" class="form-label">Deductible ($)</label>
<input type="number" class="form-control" id="deductible" placeholder="Enter deductible amount">
</div>
<div class="col">
<label for="coinsurance" class="form-label">Coinsurance (%)</label>
<input type="number" class="form-control" id="coinsurance" placeholder="Enter coinsurance rate">
</div>
<div class="col">
<label for="oopMax" class="form-label">Out-of-Pocket Max ($)</label>
<input type="number" class="form-control" id="oopMax" placeholder="Enter out-of-pocket maximum">
</div>
</div>

<!-- Healthcare Spend Input -->
<div class="mb-3">
<label for="healthcareSpend" class="form-label">Estimated Annual Healthcare Spend ($)</label>
<input type="number" class="form-control" id="healthcareSpend" placeholder="Enter estimated annual healthcare spend">
</div>

<!-- Results Display -->
<div id="results" class="border p-3 mt-3">
<h5>Results</h5>
<p><strong>Annual Premium:</strong> <span id="annualPremium">$0</span></p>
<p><strong>Deductible Met:</strong> <span id="deductibleMet">$0</span></p>
<p><strong>Coinsurance Costs:</strong> <span id="coinsuranceCost">$0</span></p>
<p><strong>Total Out-of-Pocket Cost:</strong> <span id="oopCost">$0</span></p>
<p><strong>Total Estimated Annual Cost:</strong> <span id="totalAnnualCost">$0</span></p>
</div>

<!-- Chart Display -->
<div class="mt-4">
<canvas id="costComparisonChart"></canvas>
</div>

</div>

<script src="script.js"></script>
<script type="text/javascript"> var localStoragePrefix = "ct-1459"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script>
<script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script>
<script type="text/javascript"> var localStoragePrefix = "ct-1"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script>
<script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script>
</body>
</html>