| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Dosage Calculator</title> |
| <style> |
| body { font-family: sans-serif; max-width: 420px; margin: 40px auto; padding: 0 16px; } |
| h1 { font-size: 22px; } |
| label { display: block; margin-top: 14px; font-weight: bold; } |
| input { width: 100%; padding: 8px; font-size: 16px; margin-top: 4px; box-sizing: border-box; } |
| button { margin-top: 18px; padding: 10px 20px; font-size: 16px; cursor: pointer; } |
| #result { margin-top: 20px; font-size: 18px; } |
| .error { color: #c00; } |
| .disclaimer { margin-top: 28px; font-size: 13px; color: #555; border-top: 1px solid #ccc; padding-top: 12px; } |
| </style> |
| </head> |
| <body> |
| <h1>Dosage Calculator</h1> |
|
|
| <label>Patient weight (kg)</label> |
| <input type="number" id="weight" min="0" step="0.1"> |
|
|
| <label>Dose (mg/kg/day)</label> |
| <input type="number" id="dosePerKg" min="0" step="0.1"> |
|
|
| <label>Number of doses per day</label> |
| <input type="number" id="dosesPerDay" min="1" step="1"> |
|
|
| <button onclick="calculate()">Calculate</button> |
|
|
| <div id="result"></div> |
|
|
| <p class="disclaimer">Teaching prototype only. Not for clinical use. Verify every dose independently.</p> |
|
|
| <script> |
| function calculate() { |
| const weight = parseFloat(document.getElementById('weight').value); |
| const dosePerKg = parseFloat(document.getElementById('dosePerKg').value); |
| const dosesPerDay = parseInt(document.getElementById('dosesPerDay').value); |
| const result = document.getElementById('result'); |
| |
| if (isNaN(weight) || isNaN(dosePerKg) || isNaN(dosesPerDay) || |
| weight <= 0 || dosePerKg <= 0 || dosesPerDay <= 0) { |
| result.innerHTML = '<span class="error">Enter valid positive numbers in all fields.</span>'; |
| return; |
| } |
| |
| const totalDaily = weight * dosePerKg; |
| const perDose = totalDaily / dosesPerDay; |
| |
| result.innerHTML = |
| 'Total daily dose: <b>' + totalDaily.toFixed(1) + ' mg/day</b><br>' + |
| 'Per dose: <b>' + perDose.toFixed(1) + ' mg</b> (' + dosesPerDay + ' times/day)'; |
| } |
| </script> |
| </body> |
| </html> |
