150 lines
3.5 KiB
HTML
150 lines
3.5 KiB
HTML
<!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>
|