tylen/isdieselcheaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

break into spearte files

Browse Source
This commit is contained in:
Vasily Davydov
2026-09-21 12:01:23 +03:00
parent a339143292
commit 3752b615a7
3 changed files with 192 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
fuel-calc.html
View File

@@ -3,23 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diesel vs Petrol Cost Calculator</title>
<style>
body { font-family: sans-serif; margin: 20px; background-color: #f4f7f6; color: #333; }
.container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h2 { color: #2c3e50; text-align: center; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.input-group { display: flex; flex-direction: column; }
label { font-size: 0.9rem; margin-bottom: 5px; font-weight: bold; }
input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.result-box { background: #eef2f7; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 5px solid #3498db; }
.result-box b { color: #2980b9; font-size: 1.2rem; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
th { background-color: #f8f9fa; }
.saving { color: green; font-weight: bold; }
.loss { color: red; font-weight: bold; }
</style>
<title>Is Diesel Cheaper?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
@@ -81,54 +66,9 @@
</table>
</div>
<script>
function calculate() {
// Get values
const dTax = parseFloat(document.getElementById('dTax').value) || 0;
const dPrice = parseFloat(document.getElementById('dPrice').value) || 0;
const dCons = parseFloat(document.getElementById('dCons').value) || 0;
const pTax = parseFloat(document.getElementById('pTax').value) || 0;
const pPrice = parseFloat(document.getElementById('pPrice').value) || 0;
const pCons = parseFloat(document.getElementById('pCons').value) || 0;
const annualKm = parseFloat(document.getElementById('annualKm').value) || 0;
<button class="theme-toggle" onclick="toggleTheme()">Toggle Dark Mode</button>
// 1. Calculate Break-Even Petrol Consumption
// Formula: P_Cons = (100 * (dTax - pTax) / (annualKm * pPrice)) + (dCons * dPrice / pPrice)
const taxDiff = dTax - pTax;
const breakEven = (100 * taxDiff / (annualKm * pPrice)) + (dCons * dPrice / pPrice);
document.getElementById('displayKm').innerText = annualKm.toLocaleString();
document.getElementById('breakEvenCons').innerText = isFinite(breakEven) ? breakEven.toFixed(2) : "0.00";
// 2. Generate Table
const distances = [5000, 10000, 15000, 20000, 25000, 30000];
const tbody = document.querySelector('#comparisonTable tbody');
tbody.innerHTML = '';
distances.forEach(km => {
const dTotal = dTax + (km * dCons / 100 * dPrice);
const pTotal = pTax + (km * pCons / 100 * pPrice);
const diff = pTotal - dTotal;
const row = document.createElement('tr');
const diffClass = diff >= 0 ? 'saving' : 'loss';
const diffText = diff >= 0 ? `Saving €${diff.toFixed(2)}` : `Loss €${Math.abs(diff).toFixed(2)}`;
row.innerHTML = `
<td>${km.toLocaleString()} km</td>
<td>€${dTotal.toFixed(2)}</td>
<td>€${pTotal.toFixed(2)}</td>
<td class="${diffClass}">${diffText}</td>
`;
tbody.appendChild(row);
});
}
// Initial run
calculate();
</script>
<script src="script.js"></script>
</body>
</html>