parking-calculator-library
Version:
A library to calculate parking fees based on duration, with discounts for early bird, weekend, and loyalty members.
64 lines (57 loc) • 2.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parking Fee Calculator</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="parking-calculator">
<h2 class="calculator-title">Parking Fee Calculator</h2>
<form id="parkingForm">
<div class="form-group">
<label for="entryTime">Entry Time</label>
<input
type="datetime-local"
id="entryTime"
class="form-control"
required />
</div>
<div class="form-group">
<label for="exitTime">Exit Time</label>
<input
type="datetime-local"
id="exitTime"
class="form-control"
required />
</div>
<div class="discount-section">
<div class="discount-checkbox">
<input type="checkbox" id="earlyBirdDiscount" />
<label for="earlyBirdDiscount">Early Bird Discount</label>
</div>
<div class="discount-checkbox">
<input type="checkbox" id="weekendDiscount" />
<label for="weekendDiscount">Weekend Discount</label>
</div>
<div class="discount-checkbox">
<input type="checkbox" id="loyaltyDiscount" />
<label for="loyaltyDiscount">Loyalty Member</label>
</div>
</div>
<button type="submit" class="btn">Calculate Parking Fee</button>
</form>
<div id="resultSection" class="result-section" style="display: none">
<h3>Parking Fee Details</h3>
<p>Duration: <span id="parkingDuration"></span></p>
<p>Base Fee: <span id="baseFee"></span></p>
<p>Discounts Applied: <span id="discountsApplied"></span></p>
<p>
<strong>Total Fee: <span id="totalFee"></span></strong>
</p>
</div>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>