{"id":694,"date":"2026-05-31T20:24:00","date_gmt":"2026-05-31T18:24:00","guid":{"rendered":"https:\/\/e-car.day\/?page_id=694"},"modified":"2026-05-31T20:24:01","modified_gmt":"2026-05-31T18:24:01","slug":"electric-vs-gas-car-savings-calculator","status":"publish","type":"page","link":"https:\/\/e-car.day\/?page_id=694","title":{"rendered":"Electric vs Gas Car Savings Calculator"},"content":{"rendered":"\n<div class=\"eco-tool wp-block-group\" id=\"ev-savings-calc-b72x\">\n  <div class=\"eco-tool__header\">\n    <h2 class=\"eco-tool__title\">Electric vs Gas Car Savings Calculator<\/h2>\n    <p class=\"eco-tool__lead\">\n      Compare monthly and yearly driving costs for an electric car and a gas car.\n    <\/p>\n  <\/div>\n\n  <form class=\"eco-tool__form\" id=\"ev-savings-form-b72x\" novalidate>\n    <div class=\"eco-tool__grid3\">\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"ev-distance-b72x\">\n          Monthly distance<br>(km)\n        <\/label>\n        <input class=\"eco-tool__input\" id=\"ev-distance-b72x\" type=\"number\" min=\"1\" step=\"1\" value=\"1200\" inputmode=\"numeric\">\n        <div class=\"eco-tool__hint\">How far you drive per month.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"ev-consumption-b72x\">\n          EV consumption<br>(kWh\/100 km)\n        <\/label>\n        <input class=\"eco-tool__input\" id=\"ev-consumption-b72x\" type=\"number\" min=\"1\" step=\"0.1\" value=\"18\" inputmode=\"decimal\">\n        <div class=\"eco-tool__hint\">Typical EVs use 15\u201322 kWh\/100 km.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"ev-price-b72x\">\n          Electricity price<br>($\/kWh)\n        <\/label>\n        <input class=\"eco-tool__input\" id=\"ev-price-b72x\" type=\"number\" min=\"0\" step=\"0.01\" value=\"0.15\" inputmode=\"decimal\">\n        <div class=\"eco-tool__hint\">Use your home or charging tariff.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"gas-consumption-b72x\">\n          Gas consumption<br>(L\/100 km)\n        <\/label>\n        <input class=\"eco-tool__input\" id=\"gas-consumption-b72x\" type=\"number\" min=\"1\" step=\"0.1\" value=\"7.5\" inputmode=\"decimal\">\n        <div class=\"eco-tool__hint\">Typical compact cars use 6\u20139 L\/100 km.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"gas-price-b72x\">\n          Gas price<br>($\/L)\n        <\/label>\n        <input class=\"eco-tool__input\" id=\"gas-price-b72x\" type=\"number\" min=\"0\" step=\"0.01\" value=\"1.60\" inputmode=\"decimal\">\n        <div class=\"eco-tool__hint\">Enter local fuel price per liter.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"ev-maintenance-b72x\">\n          EV maintenance<br>($\/month)\n        <\/label>\n        <input class=\"eco-tool__input\" id=\"ev-maintenance-b72x\" type=\"number\" min=\"0\" step=\"1\" value=\"25\" inputmode=\"decimal\">\n        <div class=\"eco-tool__hint\">Optional monthly maintenance estimate.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"gas-maintenance-b72x\">\n          Gas car maintenance<br>($\/month)\n        <\/label>\n        <input class=\"eco-tool__input\" id=\"gas-maintenance-b72x\" type=\"number\" min=\"0\" step=\"1\" value=\"70\" inputmode=\"decimal\">\n        <div class=\"eco-tool__hint\">Oil changes, filters, repairs, etc.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field eco-tool__spacer\" aria-hidden=\"true\">\n        <div class=\"eco-tool__label\">&nbsp;<\/div>\n        <div class=\"eco-tool__input eco-tool__spacerbox\"><\/div>\n        <div class=\"eco-tool__hint\">&nbsp;<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field eco-tool__spacer\" aria-hidden=\"true\">\n        <div class=\"eco-tool__label\">&nbsp;<\/div>\n        <div class=\"eco-tool__input eco-tool__spacerbox\"><\/div>\n        <div class=\"eco-tool__hint\">&nbsp;<\/div>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"eco-tool__actions\">\n      <button type=\"button\" class=\"wp-element-button eco-tool__btn\" id=\"ev-savings-calc-btn-b72x\">\n        Calculate\n      <\/button>\n\n      <button type=\"button\" class=\"wp-element-button eco-tool__btn eco-tool__btn--ghost\" id=\"ev-savings-reset-b72x\">\n        Reset\n      <\/button>\n\n      <div class=\"eco-tool__error\" id=\"ev-savings-error-b72x\"><\/div>\n    <\/div>\n  <\/form>\n\n  <div class=\"eco-tool__result\" id=\"ev-savings-result-b72x\" hidden>\n    <h3 class=\"eco-tool__subtitle\">Result<\/h3>\n\n    <div class=\"eco-tool__cards\">\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">EV monthly cost<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"ev-monthly-cost-b72x\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\" id=\"ev-monthly-detail-b72x\"><\/div>\n      <\/div>\n\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">Gas car monthly cost<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"gas-monthly-cost-b72x\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\" id=\"gas-monthly-detail-b72x\"><\/div>\n      <\/div>\n\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">Monthly savings<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"monthly-savings-b72x\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\">Positive value means the EV is cheaper.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">Yearly savings<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"yearly-savings-b72x\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\">Estimated savings over 12 months.<\/div>\n      <\/div>\n    <\/div>\n\n    <p class=\"eco-tool__note\">\n      Approximate estimate only. Real costs depend on electricity tariffs, public charging use, fuel price changes, driving style, maintenance, tires, climate, and vehicle model.\n    <\/p>\n  <\/div>\n\n  <details class=\"eco-tool__details\">\n    <summary class=\"eco-tool__summary\">How we calculate<\/summary>\n    <div class=\"eco-tool__details-body\">\n      <ul class=\"eco-tool__list\">\n        <li>EV energy cost = monthly distance \u00f7 100 \u00d7 EV consumption \u00d7 electricity price<\/li>\n        <li>Gas fuel cost = monthly distance \u00f7 100 \u00d7 gas consumption \u00d7 gas price<\/li>\n        <li>Total monthly cost = energy\/fuel cost + maintenance<\/li>\n        <li>Yearly savings = monthly savings \u00d7 12<\/li>\n      <\/ul>\n    <\/div>\n  <\/details>\n<\/div>\n\n<style>\n.eco-tool{\n  border:1px solid rgba(0,0,0,.12);\n  border-radius:12px;\n  padding:16px;\n}\n\n.eco-tool__header{ margin-bottom:12px; }\n.eco-tool__title{ margin:0 0 8px; }\n.eco-tool__lead{ margin:0; opacity:.9; }\n.eco-tool__form{ margin-top:12px; }\n\n.eco-tool__grid3{\n  display:grid;\n  grid-template-columns:1fr;\n  gap:16px;\n}\n\n@media (min-width:860px){\n  .eco-tool__grid3{\n    grid-template-columns:1fr 1fr 1fr;\n  }\n}\n\n.eco-tool__field{\n  display:flex;\n  flex-direction:column;\n  gap:6px;\n}\n\n.eco-tool__label{\n  font-weight:600;\n}\n\n.eco-tool__input{\n  width:100%;\n  height:44px;\n  padding:0 12px;\n  border:1px solid rgba(0,0,0,.20);\n  border-radius:10px;\n  background:#fff;\n  box-sizing:border-box;\n  font:inherit;\n}\n\n.eco-tool__hint{\n  font-size:.92em;\n  opacity:.78;\n  min-height:38px;\n}\n\n.eco-tool__actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  align-items:center;\n  margin-top:16px;\n}\n\n.eco-tool__btn{\n  padding:10px 22px;\n}\n\n.eco-tool__btn--ghost{\n  background:transparent !important;\n  border:1px solid rgba(0,0,0,.20) !important;\n}\n\n.eco-tool__btn--ghost:hover,\n.eco-tool__btn--ghost:focus{\n  background:rgba(0,0,0,.06) !important;\n  border-color:rgba(0,0,0,.35) !important;\n}\n\n.eco-tool__error{\n  min-height:1.2em;\n  font-weight:600;\n  flex:1 1 240px;\n}\n\n.eco-tool__result{\n  margin-top:18px;\n}\n\n.eco-tool__subtitle{\n  margin:0 0 10px;\n}\n\n.eco-tool__cards{\n  display:grid;\n  gap:10px;\n  grid-template-columns:1fr;\n}\n\n@media (min-width:860px){\n  .eco-tool__cards{\n    grid-template-columns:1fr 1fr;\n  }\n}\n\n.eco-tool__card{\n  border:1px solid rgba(0,0,0,.12);\n  border-radius:12px;\n  padding:12px;\n}\n\n.eco-tool__metric-label{\n  opacity:.85;\n  font-weight:600;\n}\n\n.eco-tool__metric-value{\n  font-size:1.7em;\n  font-weight:800;\n  margin-top:6px;\n  line-height:1.1;\n}\n\n.eco-tool__metric-sub{\n  opacity:.85;\n  margin-top:6px;\n}\n\n.eco-tool__note{\n  margin-top:12px;\n  opacity:.9;\n}\n\n.eco-tool__details{\n  margin-top:16px;\n}\n\n.eco-tool__summary{\n  cursor:pointer;\n  font-weight:700;\n}\n\n.eco-tool__details-body{\n  margin-top:10px;\n}\n\n.eco-tool__list{\n  margin:0;\n  padding-left:18px;\n}\n\n.eco-tool__spacerbox{\n  background:transparent;\n  border:1px dashed rgba(0,0,0,.10);\n}\n\n@media (max-width:859px){\n  .eco-tool__spacer{\n    display:none;\n  }\n}\n<\/style>\n\n<script>\n(function(){\n  const S = \"b72x\";\n  const el = (id) => document.getElementById(id + \"-\" + S);\n\n  const distanceEl = el(\"ev-distance\");\n  const evConsumptionEl = el(\"ev-consumption\");\n  const evPriceEl = el(\"ev-price\");\n  const gasConsumptionEl = el(\"gas-consumption\");\n  const gasPriceEl = el(\"gas-price\");\n  const evMaintenanceEl = el(\"ev-maintenance\");\n  const gasMaintenanceEl = el(\"gas-maintenance\");\n\n  const calcBtn = el(\"ev-savings-calc-btn\");\n  const resetBtn = el(\"ev-savings-reset\");\n  const errorEl = el(\"ev-savings-error\");\n  const resultEl = el(\"ev-savings-result\");\n\n  const evMonthlyCostEl = el(\"ev-monthly-cost\");\n  const gasMonthlyCostEl = el(\"gas-monthly-cost\");\n  const monthlySavingsEl = el(\"monthly-savings\");\n  const yearlySavingsEl = el(\"yearly-savings\");\n\n  const evMonthlyDetailEl = el(\"ev-monthly-detail\");\n  const gasMonthlyDetailEl = el(\"gas-monthly-detail\");\n\n  function setError(msg){\n    errorEl.textContent = msg || \"\";\n  }\n\n  function money(x){\n    const sign = x < 0 ? \"-\" : \"\";\n    return sign + \"$\" + Math.abs(x).toLocaleString(undefined,{\n      minimumFractionDigits:1,\n      maximumFractionDigits:1\n    });\n  }\n\n  function num(x){\n    return x.toLocaleString(undefined,{\n      minimumFractionDigits:1,\n      maximumFractionDigits:1\n    });\n  }\n\n  function calculate(){\n    setError(\"\");\n\n    const distance = Number(distanceEl.value);\n    const evConsumption = Number(evConsumptionEl.value);\n    const evPrice = Number(evPriceEl.value);\n    const gasConsumption = Number(gasConsumptionEl.value);\n    const gasPrice = Number(gasPriceEl.value);\n    const evMaintenance = Number(evMaintenanceEl.value);\n    const gasMaintenance = Number(gasMaintenanceEl.value);\n\n    if (\n      !Number.isFinite(distance) || distance <= 0 ||\n      !Number.isFinite(evConsumption) || evConsumption <= 0 ||\n      !Number.isFinite(evPrice) || evPrice < 0 ||\n      !Number.isFinite(gasConsumption) || gasConsumption <= 0 ||\n      !Number.isFinite(gasPrice) || gasPrice < 0 ||\n      !Number.isFinite(evMaintenance) || evMaintenance < 0 ||\n      !Number.isFinite(gasMaintenance) || gasMaintenance < 0\n    ){\n      setError(\"Please enter valid values.\");\n      resultEl.hidden = true;\n      return;\n    }\n\n    const evEnergy = (distance \/ 100) * evConsumption;\n    const evEnergyCost = evEnergy * evPrice;\n    const evTotal = evEnergyCost + evMaintenance;\n\n    const gasLiters = (distance \/ 100) * gasConsumption;\n    const gasFuelCost = gasLiters * gasPrice;\n    const gasTotal = gasFuelCost + gasMaintenance;\n\n    const monthlySavings = gasTotal - evTotal;\n    const yearlySavings = monthlySavings * 12;\n\n    evMonthlyCostEl.textContent = money(evTotal);\n    gasMonthlyCostEl.textContent = money(gasTotal);\n    monthlySavingsEl.textContent = money(monthlySavings);\n    yearlySavingsEl.textContent = money(yearlySavings);\n\n    evMonthlyDetailEl.textContent = num(evEnergy) + \" kWh electricity + \" + money(evMaintenance) + \" maintenance\";\n    gasMonthlyDetailEl.textContent = num(gasLiters) + \" L fuel + \" + money(gasMaintenance) + \" maintenance\";\n\n    resultEl.hidden = false;\n  }\n\n  function reset(){\n    setError(\"\");\n\n    distanceEl.value = \"1200\";\n    evConsumptionEl.value = \"18\";\n    evPriceEl.value = \"0.15\";\n    gasConsumptionEl.value = \"7.5\";\n    gasPriceEl.value = \"1.60\";\n    evMaintenanceEl.value = \"25\";\n    gasMaintenanceEl.value = \"70\";\n\n    resultEl.hidden = true;\n  }\n\n  calcBtn.addEventListener(\"click\", calculate);\n  resetBtn.addEventListener(\"click\", reset);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Electric vs Gas Car Savings Calculator Compare monthly and yearly driving costs for an electric car and a gas car. Monthly distance(km) How far you drive per month. EV consumption(kWh\/100&hellip;<\/p>\n","protected":false},"author":25,"featured_media":0,"parent":652,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/e-car.day\/index.php?rest_route=\/wp\/v2\/pages\/694"}],"collection":[{"href":"https:\/\/e-car.day\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/e-car.day\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/e-car.day\/index.php?rest_route=\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/e-car.day\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=694"}],"version-history":[{"count":1,"href":"https:\/\/e-car.day\/index.php?rest_route=\/wp\/v2\/pages\/694\/revisions"}],"predecessor-version":[{"id":695,"href":"https:\/\/e-car.day\/index.php?rest_route=\/wp\/v2\/pages\/694\/revisions\/695"}],"up":[{"embeddable":true,"href":"https:\/\/e-car.day\/index.php?rest_route=\/wp\/v2\/pages\/652"}],"wp:attachment":[{"href":"https:\/\/e-car.day\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}