2024-09-03 11:45:07 +00:00
|
|
|
<!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;
|
2024-09-04 10:08:31 +00:00
|
|
|
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;
|
2024-09-03 11:45:07 +00:00
|
|
|
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>
|
|
|
|
|
|
2024-09-04 10:08:59 +00:00
|
|
|
<div id="app">
|
|
|
|
|
<noscript>JavaScript is required to use this calculator.</noscript>
|
|
|
|
|
</div>
|
2024-09-03 11:45:07 +00:00
|
|
|
|
2024-09-04 10:08:59 +00:00
|
|
|
<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>
|
2024-09-03 11:45:07 +00:00
|
|
|
<script type="module">
|
2024-09-04 22:59:11 +00:00
|
|
|
import { reactive, html } from './arrow.min.js';
|
2024-09-03 11:45:07 +00:00
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-09-04 10:08:59 +00:00
|
|
|
const app = document.getElementById('app');
|
|
|
|
|
clearTimeout(parseInt(app.dataset.timer, 10));
|
|
|
|
|
app.replaceChildren(); // Clear loading text
|
|
|
|
|
|
2024-09-03 11:45:07 +00:00
|
|
|
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>
|
2024-09-04 10:08:59 +00:00
|
|
|
`(app)
|
2024-09-03 11:45:07 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
