76 lines
2.5 KiB
HTML
76 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Is Diesel Cheaper?</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h2>Car Cost Comparison</h2>
|
|
|
|
<div class="input-grid">
|
|
<!-- Diesel Inputs -->
|
|
<div class="input-group">
|
|
<label>Diesel Annual Tax (€)</label>
|
|
<input type="number" id="dTax" value="600" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Diesel Price per Liter (€)</label>
|
|
<input type="number" id="dPrice" value="2.51" step="0.01" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Diesel Consumption (L/100km)</label>
|
|
<input type="number" id="dCons" value="5.5" step="0.1" oninput="calculate()">
|
|
</div>
|
|
|
|
<!-- Petrol Inputs -->
|
|
<div class="input-group">
|
|
<label>Petrol Annual Tax (€)</label>
|
|
<input type="number" id="pTax" value="200" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Petrol Price per Liter (€)</label>
|
|
<input type="number" id="pPrice" value="2.32" step="0.01" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Petrol Consumption (L/100km)</label>
|
|
<input type="number" id="pCons" value="6.2" step="0.1" oninput="calculate()">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group" style="margin-bottom: 20px; max-width: 300px; margin-left: auto; margin-right: auto;">
|
|
<label>Your Annual Distance (km) for Break-even</label>
|
|
<input type="number" id="annualKm" value="17500" oninput="calculate()">
|
|
</div>
|
|
|
|
<div class="result-box">
|
|
To offset the tax difference at <span id="displayKm">17500</span> km/year,
|
|
a petrol car would need to consume at least <b id="breakEvenCons">0.00</b> L/100km.
|
|
</div>
|
|
|
|
<table id="comparisonTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Annual Distance</th>
|
|
<th>Diesel Total</th>
|
|
<th>Petrol Total</th>
|
|
<th>Difference</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Rows generated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<button class="theme-toggle" onclick="toggleTheme()">Toggle Dark Mode</button>
|
|
|
|
<script src="script.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
|