125 lines
5.1 KiB
HTML
125 lines
5.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name=""viewport" content=""width=device-width, initial-scale="1.0">
|
||
|
|
<title>Calculator</title>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>Calculator</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
|
||
|
|
<form action="/action_page.php">
|
||
|
|
<div class="flex-container">
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2>Policy Details</h2>
|
||
|
|
<label for="effectiveDate">Effective date:</label>
|
||
|
|
<input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
<label for="expiryDate">Expiry date:</label>
|
||
|
|
<input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Days in policy term: <span id="termDays">-</span>
|
||
|
|
<br><br>
|
||
|
|
<label for="cancelDate">Cancellation date</label>
|
||
|
|
<input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Days in force: <span id="forceDays">-</span>
|
||
|
|
<br>
|
||
|
|
Days remaining: <span id="remainingDays">-</span>
|
||
|
|
<br><br>
|
||
|
|
Factor method:
|
||
|
|
<input type="radio" name="calcMethod" id="calcProRata" value="Pro Rata" onclick="calculator();" /> Pro Rata
|
||
|
|
<input type="radio" name="calcMethod" id="calcShortRate" value="Short Rate" onclick="calculator();"/> Short Rate
|
||
|
|
<br><br>
|
||
|
|
Earned factor: <span id="earnedFactor">-</span>
|
||
|
|
<br>
|
||
|
|
Unearned factor: <span id="unearnedFactor">-</span>
|
||
|
|
<br><br>
|
||
|
|
<label for="totalPremium">Total premium:</label>
|
||
|
|
<input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedPremium">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedPremium">-</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex-2">
|
||
|
|
<h2>Breakdown</h2>
|
||
|
|
<p><span id="checkMatch">Total breakdown: N/A</span></p>
|
||
|
|
|
||
|
|
<label for="breakDO">D&O:</label>
|
||
|
|
<input type="number" id="breakDO" name="breakDO" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedDO">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedDO">-</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<label for="breakEO">E&O:</label>
|
||
|
|
<input type="number" id="breakEO" name="breakEO" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedEO">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedEO">-</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<label for="breakCyber">Cyber:</label>
|
||
|
|
<input type="number" id="breakCyber" name="breakCyber" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedCyber">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedCyber">-</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<label for="breakLEI">Legal Expense:</label>
|
||
|
|
<input type="number" id="breakLEI" name="breakLEI" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedLEI">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedLEI">-</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<label for="breakCGL">CGL:</label>
|
||
|
|
<input type="number" id="breakCGL" name="breakCGL" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedCGL">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedCGL">-</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<label for="breakProperty">Property:</label>
|
||
|
|
<input type="number" id="breakProperty" name="breakProperty" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedProperty">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedProperty">-</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<label for="breakEB">Equipment Breakdown::</label>
|
||
|
|
<input type="number" id="breakEB" name="breakEB" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||
|
|
<br>
|
||
|
|
Earned premium: <span id="earnedEB">-</span>
|
||
|
|
<br>
|
||
|
|
Return premium: <span id="unearnedEB">-</span>
|
||
|
|
<br><br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<button onclick="calculator()">Calculate</button>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Created by <a href="https://haothitran.com">Hao Tran</a>.</p>
|
||
|
|
<p>Note: Calculations are rounded to the nearest tenth decimal. As such, there may sometimes be issues of rounding error.</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
<script src="scripts/calculator.js"></script>
|
||
|
|
</html>
|