<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Billable Requirement Calculator</title>
<style>
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: #f6f7fb; color: #111; }
.wrap { max-width: 720px; margin: 40px auto; padding: 24px; }
.card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
h1 { font-size: 20px; margin: 0 0 12px; }
p { margin: 8px 0 16px; line-height: 1.35; color: #333; }
label { display: block; font-weight: 600; margin-top: 12px; }
input { width: 100%; padding: 12px; border: 1px solid #d0d5dd; border-radius: 10px; font-size: 16px; margin-top: 6px; }
.result { margin-top: 18px; padding: 14px; border-radius: 10px; background: #f0f9ff; border: 1px solid #bae6fd; }
.result strong { font-size: 22px; display: block; margin-top: 6px; }
.fine { font-size: 12px; color: #555; margin-top: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<h1>Adjusted Billable Requirement (per pay period)</h1>
<p>Enter your base billable requirement and the number of holidays in the pay period. Each holiday reduces the requirement by 10 percent.</p>
<div class="row">
<div>
<label for="base">Base requirement (hours)</label>
<input id="base" type="number" inputmode="decimal" min="0" step="0.5" placeholder="Example: 48" />
</div>
<div>
<label for="holidays">Holidays in pay period (days)</label>
<input id="holidays" type="number" inputmode="numeric" min="0" max="10" step="1" placeholder="Example: 1" />
</div>
</div>
<div class="result" id="resultBox">
Adjusted requirement:
<strong id="result">--</strong>
</div>
<div class="fine">
Formula: adjusted = base × (1 − 0.10 × holidays)
</div>
</div>
</div>
<script>
const baseEl = document.getElementById('base');
const holEl = document.getElementById('holidays');
const resultEl = document.getElementById('result');
function floorToHalf(x) {
return Math.floor(x * 2) / 2;
}
function calc() {
const base = Number(baseEl.value);
const holidays = Number(holEl.value);
if (!isFinite(base) || !isFinite(holidays) || baseEl.value === "" || holEl.value === "") {
resultEl.textContent = "--";
return;
}
const adjustedRaw = base * (1 - 0.10 * holidays);
// Choose ONE of the next two lines:
const adjusted = adjustedRaw; // SIMPLE (no rounding)
// const adjusted = floorToHalf(adjustedRaw); // ROUNDED down to nearest 0.5
resultEl.textContent = `${adjusted.toFixed(2)} hours`;
}
baseEl.addEventListener('input', calc);
holEl.addEventListener('input', calc);
</script>
</body>
</html>