151 lines
6.4 KiB
HTML
151 lines
6.4 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>
|
|
|
|
<meta name="description" content="Insurance premium calculator for pro-rata and short-rate calculations.?">
|
|
|
|
<link rel="stylesheet" href="assets/style.css">
|
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Premium 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>
|
|
<label for="totalPremium">Total premium:</label>
|
|
<input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
|
|
</div>
|
|
|
|
<div class="flex-2">
|
|
<h2>Factor Method</h2>
|
|
Factor method:
|
|
<input type="radio" name="calcMethod" id="calcProRata" value="Pro Rata" checked="checked" onclick="calculator();" /> Pro Rata
|
|
<input type="radio" name="calcMethod" id="calcShortRate" value="Short Rate" onclick="calculator();"/> Short Rate
|
|
<br><br>
|
|
<table>
|
|
<tr>
|
|
<th></th>
|
|
<th>Earned</th>
|
|
<th>Unearned</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Factor</td>
|
|
<td><span id="earnedFactor">-</span></td>
|
|
<td><span id="unearnedFactor">-</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Premium</td>
|
|
<td><span id="earnedPremium">-</span></td>
|
|
<td><span id="unearnedPremium">-</span></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="flex-3">
|
|
<h2>Premium Breakdown</h2>
|
|
<blockquote><span id="checkMatch">Total breakdown: N/A</span></blockquote>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Coverage</th>
|
|
<th>Premium</th>
|
|
<th>% of Total</th>
|
|
<th>Earned Premium</th>
|
|
<th>Unearned Premium </th>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="breakDO">D&O</label></td>
|
|
<td><input type="number" id="breakDO" name="breakDO" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
|
<td><span id="percentDO">-</span></td>
|
|
<td><span id="earnedDO">-</span></td>
|
|
<td><span id="unearnedDO">-</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="breakEO">E&O</label></td>
|
|
<td><input type="number" id="breakEO" name="breakEO" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
|
<td><span id="percentEO">-</span></td>
|
|
<td><span id="earnedEO">-</span></td>
|
|
<td><span id="unearnedEO">-</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="breakCyber">Cyber</label></td>
|
|
<td><input type="number" id="breakCyber" name="breakCyber" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
|
<td><span id="percentCyber">-</span></td>
|
|
<td><span id="earnedCyber">-</span></td>
|
|
<td><span id="unearnedCyber">-</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="breakLEI">Legal Expense</label></td>
|
|
<td><input type="number" id="breakLEI" name="breakLEI" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
|
<td><span id="percentLEI">-</span></td>
|
|
<td><span id="earnedLEI">-</span></td>
|
|
<td><span id="unearnedLEI">-</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="breakCGL">CGL</label></td>
|
|
<td><input type="number" id="breakCGL" name="breakCGL" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
|
<td><span id="percentCGL">-</span></td>
|
|
<td><span id="earnedCGL">-</span></td>
|
|
<td><span id="unearnedCGL">-</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="breakProperty">Property</label></td>
|
|
<td><input type="number" id="breakProperty" name="breakProperty" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
|
<td><span id="percentProperty">-</span></td>
|
|
<td><span id="earnedProperty">-</span></td>
|
|
<td><span id="unearnedProperty">-</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="breakEB">Equipment Breakdown</label></td>
|
|
<td><input type="number" id="breakEB" name="breakEB" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
|
<td><span id="percentEB">-</span></td>
|
|
<td><span id="earnedEB">-</span></td>
|
|
<td><span id="unearnedEB">-</span></td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
|
|
<div class="flex-4">
|
|
<button onclick="calculator()">Calculate</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<ul>
|
|
<li>Created by <a href="https://haothitran.com">Hao Tran</a>.</li>
|
|
<li>Calculations are rounded to the nearest hundredth decimal. As such, there may sometimes be issues of rounding error.</li>
|
|
<li>Although effort was made to insure the accuracy of this calculator, there is no guarantee on the accuracy of the calculations and results. This calculator is intended for personal and informational use only and does not constitute advice. </li>
|
|
</ul>
|
|
</footer>
|
|
|
|
<script src="assets/calculator.js"></script>
|
|
</body>
|
|
</html>
|