wezm/trip-calculator
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Format index.html

Browse source
This commit is contained in:
Wesley Moore 2024-09-05 09:06:00 +10:00
parent ee6b1efd6b
commit f8c5635a65
No known key found for this signature in database
1 changed files with 136 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

235
index.html
View file

@ -1,113 +1,150 @@
<!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>
<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>
<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';
<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
});
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 calculate() {
return ((data.distance / 100.0) * data.economy * data.price) / 100.0;
}
function updateValue(e) {
const target = e.target;
const value = parseFloat(target.value);
function updateValue(e) {
const target = e.target;
const value = parseFloat(target.value);
if (!isNaN(value)) {
data[target.name] = value;
}
}
if (!isNaN(value)) {
data[target.name] = value;
}
}
const app = document.getElementById('app');
clearTimeout(parseInt(app.dataset.timer, 10));
app.replaceChildren(); // Clear loading text
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>
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="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>
<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>
<p class="total">$${() => calculate().toFixed(2)}</p>
`(app);
</script>
</body>
</html>