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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diesel vs Petrol Cost Calculator</title> <title>Is Diesel Cheaper?</title>
<style> <link rel="stylesheet" href="style.css">
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>
</head> </head>
<body> <body>
@@ -81,54 +66,9 @@
</table> </table>
</div> </div>
<script> <button class="theme-toggle" onclick="toggleTheme()">Toggle Dark Mode</button>
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; <script src="script.js"></script>
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 = `
<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>
</body> </body>
</html> </html>

66
script.js Normal file
View File

@@ -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 = `
<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();
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');
}
});

122
style.css Normal file
View File

@@ -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;
}