GasCalc — Online Gas Calculator

A small web app that compares Thai fuel types (Gasohol 91, E20, E85) by value for money per unit of energy, using each blend's heating value (HHV) against its price.

---

Overview

GasCalc answers a practical question for Thai drivers: which fuel gives you the most energy for your money? Pump prices alone are misleading because ethanol blends carry less energy per litre than gasoline. This calculator normalizes price by energy content (MJ), so you can compare blends fairly.

Enter the current price (THB/litre) for each fuel and the app instantly shows the cost per megajoule (THB/MJ), sorted so the best value appears first.

How it works

Each fuel is treated as a gasoline + ethanol blend:

Fuel	Gasoline	Ethanol
91 (Gasohol 91)	90%	10%
E20	80%	20%
E85	15%	85%

Using higher heating values (HHV) of gasoline = 34.8 MJ/L and ethanol = 21.2 MJ/L, the cost per MJ is:

cost_per_MJ = price / (gasoline_fraction × 34.8 + ethanol_fraction × 21.2)

The result is rounded to 3 decimal places. A lower THB/MJ means better value.

Tech stack

• Vue.js 2 — reactive UI and calculation (v-model, v-for, live keyup recalculation)
• Bootstrap 3 + Glyphicons — layout and styling
• jQuery — bundled with Bootstrap
• NetBeans project (HTML5/JS), served locally via the built-in browser integration

No build step and no backend — it's a single static page.

Project structure

GasCalc/
├── index.html          # the entire app: markup + Vue instance + logic
├── css/                # Bootstrap 3 stylesheets
├── js/                 # vue.min.js, jquery.min.js, bootstrap.js
├── fonts/              # Glyphicons
└── nbproject/          # NetBeans project metadata

All application logic lives inline in index.html (the calc() and calGasPrice() methods of the Vue instance).

Getting started

Because it's a static page, just open index.html in a browser — no server required.

To use the NetBeans setup instead: open the folder as a NetBeans HTML5 project and run it (configured for http://localhost:85/GasCalculator with Chrome integration).

Configuration

The heating-value constants are defined inside calGasPrice() in index.html:

let cfg_gasoline = 34.8;  // HHV of gasoline (MJ/L)
let cfg_ethanal  = 21.2;  // HHV of ethanol  (MJ/L)
let cfg_digits   = 1000;  // rounding precision (3 decimals)

Adjust these if you want to use different reference values or blend ratios.

Notes / possible improvements

• The result sort uses a.price > b.price as the comparator, which returns a boolean; a numeric comparator (a.price - b.price) is more reliable across browsers.
• The variable name ethanal is a typo for ethanol (ethanal is a different chemical) — harmless, but worth renaming for clarity.
• Blend ratios and HHV figures are approximations; verify against current fuel specifications if precision matters.