diff --git a/fuel-calc.html b/fuel-calc.html index a6688a4..940dc27 100644 --- a/fuel-calc.html +++ b/fuel-calc.html @@ -3,23 +3,8 @@ - Diesel vs Petrol Cost Calculator - + Is Diesel Cheaper? + @@ -81,54 +66,9 @@ - + diff --git a/script.js b/script.js new file mode 100644 index 0000000..67bab48 --- /dev/null +++ b/script.js @@ -0,0 +1,66 @@ +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; + + // 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 = ` + ${km.toLocaleString()} km + €${dTotal.toFixed(2)} + €${pTotal.toFixed(2)} + ${diffText} + `; + tbody.appendChild(row); + }); +} + +// Initial run +calculate(); + +function toggleTheme() { + const body = document.body; + body.classList.toggle('dark-mode'); + + // Save preference to localStorage + if (body.classList.contains('dark-mode')) { + localStorage.setItem('theme', 'dark'); + } else { + localStorage.setItem('theme', 'light'); + } +} + +// Check for saved theme preference and set dark mode by default +document.addEventListener('DOMContentLoaded', function() { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark' || !savedTheme) { // Default to dark mode + document.body.classList.add('dark-mode'); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..be2ede3 --- /dev/null +++ b/style.css @@ -0,0 +1,122 @@ +:root { + --bg-color: #f4f7f6; + --text-color: #333; + --container-bg: white; + --header-color: #2c3e50; + --label-color: #333; + --input-border: #ccc; + --result-bg: #eef2f7; + --result-border: #3498db; + --result-text: #2980b9; + --table-header-bg: #f8f9fa; + --saving-color: green; + --loss-color: red; + --shadow-color: rgba(0,0,0,0.1); +} + +.dark-mode { + --bg-color: #1a1a1a; + --text-color: #f0f0f0; + --container-bg: #2d2d2d; + --header-color: #ffffff; + --label-color: #f0f0f0; + --input-border: #555; + --result-bg: #3a3a3a; + --result-border: #4a90e2; + --result-text: #7db4ff; + --table-header-bg: #333; + --saving-color: #4caf50; + --loss-color: #f44336; + --shadow-color: rgba(255,255,255,0.1); +} + +body { + font-family: sans-serif; + margin: 20px; + background-color: var(--bg-color); + color: var(--text-color); + transition: background-color 0.3s, color 0.3s; +} +.container { + max-width: 800px; + margin: auto; + background: var(--container-bg); + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px var(--shadow-color); + transition: background-color 0.3s, color 0.3s; +} +h2 { + color: var(--header-color); + text-align: center; + transition: color 0.3s; +} +.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; + color: var(--label-color); +} +input { + padding: 8px; + border: 1px solid var(--input-border); + border-radius: 4px; + font-size: 1rem; + background: var(--container-bg); + color: var(--text-color); +} +.result-box { + background: var(--result-bg); + padding: 15px; + border-radius: 8px; + margin-bottom: 20px; + text-align: center; + border-left: 5px solid var(--result-border); +} +.result-box b { + color: var(--result-text); + font-size: 1.2rem; +} +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} +th, td { + border: 1px solid var(--input-border); + padding: 12px; + text-align: center; +} +th { + background-color: var(--table-header-bg); +} +.saving { + color: var(--saving-color); + font-weight: bold; +} +.loss { + color: var(--loss-color); + font-weight: bold; +} +.theme-toggle { + position: fixed; + top: 20px; + right: 20px; + background: var(--container-bg); + border: 1px solid var(--input-border); + color: var(--text-color); + padding: 10px 15px; + border-radius: 4px; + cursor: pointer; + font-size: 0.9rem; +} \ No newline at end of file