<!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 { text-align: center }
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>
<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>