add formulas

fuel-calc.js

@@ -5,6 +5,7 @@ function updateLanguage() {
     const language = langData[currentLang];
 
     document.getElementById("header").textContent = language.header;
+    document.getElementById("description").textContent = language.description;
     document.getElementById("dTaxLabel").textContent = language.dTaxLabel;
     document.getElementById("dPriceLabel").textContent = language.dPriceLabel;
     document.getElementById("dConsLabel").textContent = language.dConsLabel;
@@ -43,34 +44,35 @@ function calculate() {
     const pCons = parseFloat(document.getElementById("pCons").value);
     const annualKm = parseFloat(document.getElementById("annualKm").value);
 
-    const dieselCostPerKm = (dPrice * dCons) / 100;
+   
-    const petrolCostPerKm = (pPrice * pCons) / 100;
+    // 1. Calculate Break-Even Petrol Consumption
-
+    // Formula: P_Cons = (100 * (dTax - pTax) / (annualKm * pPrice)) + (dCons * dPrice / pPrice)
-    const dieselAnnualCost = (dTax + (dieselCostPerKm * annualKm));
+    const taxDiff = dTax - pTax;
-    const petrolAnnualCost = (pTax + (petrolCostPerKm * annualKm));
+    const breakEven = (100 * taxDiff / (annualKm * pPrice)) + (dCons * dPrice / pPrice);
-
+    
-    const diff = Math.abs(dieselAnnualCost - petrolAnnualCost);
-
-    let breakEvenCons = 0;
-    if (dCons < pCons || dTax > pTax) {
-        breakEvenCons = (pCons - ((dTax - pTax) / (annualKm * (pPrice - dPrice))));
-        if (breakEvenCons <= 0) breakEvenCons = 0;
-    }
 
+    // 2. Generate Table
+    // 2. Calculate Minimum Diesel Price where user's pCons equals break-even consumption
+    // We want to solve for dPrice such that: pCons = (100 * taxDiff / (annualKm * pPrice)) + (dCons * dPrice / pPrice)
+    // Rearranging for dPrice:
+    // pCons - (100 * taxDiff / (annualKm * pPrice)) = (dCons * dPrice / pPrice)
+    // dPrice = (pCons - (100 * taxDiff / (annualKm * pPrice))) * pPrice / dCons
+    
     let minDieselPrice = 0;
-    if (dPrice < pPrice || dTax > pTax) {
+    if (dCons > 0 && annualKm > 0 && pPrice > 0) {
-        minDieselPrice = (pPrice - ((dTax - pTax) / (annualKm * (pCons - dCons))));
+        const firstTerm = 100 * taxDiff / (annualKm * pPrice);
-        if (minDieselPrice <= 0) minDieselPrice = 0;
+        const secondTerm = pCons - firstTerm;
+        minDieselPrice = secondTerm * pPrice / dCons;
     }
-
+    
     document.getElementById("displayKm").textContent = annualKm.toLocaleString();
-    document.getElementById("breakEvenCons").textContent = breakEvenCons.toFixed(2);
+    document.getElementById("breakEvenCons").textContent = breakEven.toFixed(2);
     document.getElementById("minDieselPrice").textContent = minDieselPrice.toFixed(2);
 
     const tbody = document.getElementById("comparisonTable").getElementsByTagName('tbody')[0];
     tbody.innerHTML = '';
 
-    for (let i = 10000; i <= 50000; i += 5000) {
+    for (let i = 5000; i <= 50000; i += 5000) {
         const row = tbody.insertRow();
         const cell1 = row.insertCell(0);
         const cell2 = row.insertCell(1);

index.html

@@ -23,6 +23,9 @@
       
     </div>
     </div>
+    <div class="description">
+      <span id="description"></span>
+    </div>
     <div class="input-grid">
         <!-- Diesel Inputs -->
         <div class="input-group">
@@ -64,6 +67,8 @@
         or the diesel price should be at least </span> <b id="minDieselPrice">0.00</b> <span id="resultText4">€/L.</span>
     </div>
 
+
+    
     <table id="comparisonTable">
         <thead>
             <tr>
@@ -77,6 +82,129 @@
             <!-- Rows generated by JS -->
         </tbody>
     </table>
+<div class="formula-info">
+    <h3>Calculation Formulas</h3>
+
+    <p><strong>Break-Even Petrol Consumption:</strong></p>
+
+    <math display="block">
+        <msub>
+            <mi>P</mi>
+            <mi>Cons</mi>
+        </msub>
+        <mo>=</mo>
+        <mfrac>
+            <mrow>
+                <mn>100</mn>
+                <mo>×</mo>
+                <mo>(</mo>
+                <msub><mi>dTax</mi></msub>
+                <mo>−</mo>
+                <msub><mi>pTax</mi></msub>
+                <mo>)</mo>
+            </mrow>
+            <mrow>
+                <mi>annualKm</mi>
+                <mo>×</mo>
+                <msub><mi>pPrice</mi></msub>
+            </mrow>
+        </mfrac>
+        <mo>+</mo>
+        <mfrac>
+            <mrow>
+                <msub><mi>dCons</mi></msub>
+                <mo>×</mo>
+                <msub><mi>dPrice</mi></msub>
+            </mrow>
+            <msub><mi>pPrice</mi></msub>
+        </mfrac>
+    </math>
+
+    <p><strong>Minimum Diesel Price:</strong></p>
+
+    <math display="block">
+        <msub>
+            <mi>dPrice</mi>
+        </msub>
+        <mo>=</mo>
+        <mrow>
+            <mo>(</mo>
+            <msub><mi>pCons</mi></msub>
+            <mo>−</mo>
+            <mfrac>
+                <mrow>
+                    <mn>100</mn>
+                    <mo>×</mo>
+                    <mi>taxDiff</mi>
+                </mrow>
+                <mrow>
+                    <mi>annualKm</mi>
+                    <mo>×</mo>
+                    <msub><mi>pPrice</mi></msub>
+                </mrow>
+            </mfrac>
+            <mo>)</mo>
+        </mrow>
+        <mo>×</mo>
+        <mfrac>
+            <msub><mi>pPrice</mi></msub>
+            <msub><mi>dCons</mi></msub>
+        </mfrac>
+    </math>
+
+    <p><strong>Cost Calculation:</strong></p>
+
+    <math display="block">
+        <mtext>Diesel Cost</mtext>
+        <mo>=</mo>
+        <msub><mi>dTax</mi></msub>
+        <mo>+</mo>
+        <mrow>
+            <mo>(</mo>
+            <mfrac>
+                <mrow>
+                    <msub><mi>dPrice</mi></msub>
+                    <mo>×</mo>
+                    <msub><mi>dCons</mi></msub>
+                </mrow>
+                <mn>100</mn>
+            </mfrac>
+            <mo>×</mo>
+            <mi>annualKm</mi>
+            <mo>)</mo>
+        </mrow>
+    </math>
+
+    <math display="block">
+        <mtext>Petrol Cost</mtext>
+        <mo>=</mo>
+        <msub><mi>pTax</mi></msub>
+        <mo>+</mo>
+        <mrow>
+            <mo>(</mo>
+            <mfrac>
+                <mrow>
+                    <msub><mi>pPrice</mi></msub>
+                    <mo>×</mo>
+                    <msub><mi>pCons</mi></msub>
+                </mrow>
+                <mn>100</mn>
+            </mfrac>
+            <mo>×</mo>
+            <mi>annualKm</mi>
+            <mo>)</mo>
+        </mrow>
+    </math>
+
+    <math display="block">
+        <mtext>Difference</mtext>
+        <mo>=</mo>
+        <mtext>Petrol Cost</mtext>
+        <mo>−</mo>
+        <mtext>Diesel Cost</mtext>
+    </math>
+</div>
+
 </div>
 
 

languages.js

@@ -1,6 +1,7 @@
 const langData = {
     en: {
         header: "Car Cost Comparison",
+        description: "This calculator was created to provide a simple way to estimate and compare vehicle running costs. It uses a straightforward formula to combine well-known values and present the results at a high level, helping illustrate how current fuel prices, taxes, and consumption affect the overall cost of owning a diesel car.",
         dTaxLabel: "Diesel Annual Tax (€)",
         dPriceLabel: "Diesel Price per Liter (€)",
         dConsLabel: "Diesel Consumption (L/100km)",
@@ -20,16 +21,17 @@ const langData = {
 
     ru: {
         header: "Сравнение затрат на автомобили",
-        dTaxLabel: "Годовая плата за дизель (€)",
+        description: "Этот калькулятор создан для простого расчёта и сравнения эксплуатационных расходов автомобиля. Он использует несложную формулу, объединяющую известные показатели, чтобы представить результаты в общих чертах и показать, как текущие цены на топливо, налоги и расход влияют на общую стоимость владения дизельным автомобилем.",
+        dTaxLabel: "Годовой налог на дизель (€)",
         dPriceLabel: "Цена дизеля за литр (€)",
         dConsLabel: "Расход дизеля (л/100 км)",
-        pTaxLabel: "Годовая плата за бензин (€)",
+        pTaxLabel: "Годовой налог на бензин (€)",
         pPriceLabel: "Цена бензина за литр (€)",
         pConsLabel: "Расход бензина (л/100 км)",
         annualKmLabel: "Ваш ежегодный пробег (км)",
         resultText1: "Чтобы компенсировать разницу в налогах при ",
         resultText2: " км в год, расход бензинового автомобиля должен быть не менее ",
-        resultText3: " л/100 км, либо цена дизеля должна быть не менее ",
+        resultText3: " л/100 км, либо цена дизеля должна быть не более ",
         resultText4: " €/л.",
         tableDistance: "Ежегодная дистанция",
         tableDieselTotal: "Общие затраты на дизель",

style.css

@@ -38,14 +38,21 @@ body {
     transition: background-color 0.3s, color 0.3s;
 }
 .container { 
-    max-width: 800px; 
+    max-width: 100%; 
     margin: auto; 
     background: var(--container-bg); 
-    padding: 20px; 
+    padding: 15px; 
     border-radius: 8px; 
     box-shadow: 0 2px 10px var(--shadow-color); 
     transition: background-color 0.3s, color 0.3s;
 }
+
+@media screen and (max-width: 768px) {
+    .container { 
+        padding: 10px; 
+        margin: 10px; 
+    }
+}
 h2 { 
     color: var(--header-color); 
     text-align: center; 
@@ -57,6 +64,12 @@ h2 {
     gap: 20px; 
     margin-bottom: 20px; 
 }
+
+@media screen and (max-width: 768px) {
+    .input-grid { 
+        grid-template-columns: 1fr; 
+    }
+}
 .input-group { 
     display: flex; 
     flex-direction: column; 
@@ -117,13 +130,25 @@ th {
 .header {
   display: flex;
   flex-direction: column-reverse;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+@media screen and (min-width: 768px) {
+  .header {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.description {
+  margin-bottom: 20px
 }
 
 .button-toggle {
-    top: 20px;
     cursor: pointer;
-    width: 15px;
+    width: 30px;
-    height: 15px;
+    height: 30px;
     border-radius: 4px;
     transition: transform 0.3s ease;
     background: var(--container-bg);
@@ -134,12 +159,29 @@ th {
     margin-bottom: 10px;
 }
 
-.button-toggle:hover {
+.formula-info {
-    transform: scale(1.1);
+    background: var(--result-bg); 
+    padding: 15px; 
+    border-radius: 8px; 
+    margin-top: 20px; 
+    margin-bottom: 20px; 
+    border-left: 5px solid var(--result-border); 
 }
 
-.button-toggle svg {
+.formula-info h3 {
-    width: 100%;
+    margin-top: 0;
-    height: 100%;
+    color: var(--result-text);
-    fill: var(--text-color);
+}
+
+.formula-info p {
+    margin: 5px 0;
+    font-size: 0.9rem;
+}
+
+@media screen and (max-width: 768px) {
+    .button-toggle {
+        width: 25px;
+        height: 25px;
+        padding: 8px 12px;
+    }
 }