<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fuel App</title>
<style type="text/css">
body {
margin: 40px auto;
max-width: 650px;
line-height: 1.6;
font-size: 18px;
color: #444;
padding: 0 10px;
font-family: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
Comfortaa, Manjari, Nunito, "Arial Rounded MT",
"Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
width: fit-content;
}
h1,
h2,
h3 {
line-height: 1.2;
}
header, footer {
text-align: center;
}
footer {
margin-top: 4rem;
font-size: small;
}
label {
font-weight: bold;
}
p {
margin: 1em 0 0;
}
#app {
background: ghostwhite;
padding: 1em 1em 0.5em;
border-radius: 15px;
}
form {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
}
label {
grid-column: 1;
text-align: right;
}
input {
grid-column: 2;
}
.unit {
grid-column: 3;
font-size: smaller;
}
.total {
font-size: 24pt;
font-weight: 500;
text-align: right;
}
</style>
</head>
<body>
<header>
<h1>⛽<br />Fuel App</h1>
</header>
<div id="app">
<noscript>JavaScript is required to use this calculator.</noscript>
</div>
<footer>
<p>
By <a href="https://www.wezm.net/">Wesley Moore</a> ·
<a href="https://forge.wezm.net/wezm/trip-calculator">Source Code</a>
</p>
</footer>
<script type="text/javascript">
const el = document.getElementById("app");
if (el) {
const timer = setTimeout(function () {
console.log("ran");
el.textContent = "Loading…";
}, 500);
el.dataset.timer = timer;
}
</script>
<script type="module">
import { reactive, html } from "./arrow.min.js";
const data = reactive({
price: 194.9,
economy: 7.4,
distance: 1050,
});
function calculate() {
return ((data.distance / 100.0) * data.economy * data.price) / 100.0;
}
function updateValue(e) {
const target = e.target;
const value = parseFloat(target.value);
if (!isNaN(value)) {
data[target.name] = value;
}
}
const app = document.getElementById("app");
clearTimeout(parseInt(app.dataset.timer, 10));
app.replaceChildren(); // Clear loading text
html`
<form>
<label for="price">Price</label>
<input
@input="${updateValue}"
type="number"
step="0.1"
name="price"
id="price"
size="6"
value="${() => data.price}"
/>
<span><span class="unit">¢/l</span></span>
<label for="economy">Consumption</label>
<input
@input="${updateValue}"
type="number"
name="economy"
id="economy"
step="0.1"
size="6"
value="${() => data.economy}"
/>
<span><span class="unit">l/100km</span></span>
<label for="distance">Distance</label>
<input
@input="${updateValue}"
type="number"
name="distance"
id="distance"
step="1"
size="6"
value="${() => data.distance}"
/>
<span><span class="unit">km</span></span>
</form>
<p class="total">$${() => calculate().toFixed(2)}</p>
`(app);
</script>
</body>
</html>