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

129
index.html
View file

@ -1,24 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fuel App</title> <title>Fuel App</title>
<style type="text/css"> <style type="text/css">
body { body {
margin:40px auto; margin: 40px auto;
max-width:650px; max-width: 650px;
line-height:1.6; line-height: 1.6;
font-size:18px; font-size: 18px;
color:#444; color: #444;
padding:0 10px; 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; 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; width: fit-content;
} }
h1,h2,h3{ line-height:1.2 } h1,
header { text-align: center } h2,
label { font-weight: bold } h3 {
p { margin: 1em 0 0 } line-height: 1.2;
}
header {
text-align: center;
}
label {
font-weight: bold;
}
p {
margin: 1em 0 0;
}
#app { #app {
background: ghostwhite; background: ghostwhite;
padding: 1em 1em 0.5em; padding: 1em 1em 0.5em;
@ -49,7 +61,7 @@ body {
</head> </head>
<body> <body>
<header> <header>
<h1>⛽<br>Fuel App</h1> <h1>⛽<br />Fuel App</h1>
</header> </header>
<div id="app"> <div id="app">
@ -57,57 +69,82 @@ body {
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
const el = document.getElementById('app'); const el = document.getElementById("app");
if (el) { if (el) {
const timer = setTimeout(function() { console.log('ran'); el.textContent = "Loading…" }, 500); const timer = setTimeout(function () {
console.log("ran");
el.textContent = "Loading…";
}, 500);
el.dataset.timer = timer; el.dataset.timer = timer;
} }
</script> </script>
<script type="module"> <script type="module">
import { reactive, html } from './arrow.min.js'; import { reactive, html } from "./arrow.min.js";
const data = reactive({ const data = reactive({
price: 194.9, price: 194.9,
economy: 7.4, economy: 7.4,
distance: 1050 distance: 1050,
}); });
function calculate() { function calculate() {
return data.distance / 100.0 * data.economy * data.price / 100.0; return ((data.distance / 100.0) * data.economy * data.price) / 100.0;
} }
function updateValue(e) { function updateValue(e) {
const target = e.target; const target = e.target;
const value = parseFloat(target.value); const value = parseFloat(target.value);
if (!isNaN(value)) { if (!isNaN(value)) {
data[target.name] = value; data[target.name] = value;
} }
} }
const app = document.getElementById('app'); const app = document.getElementById("app");
clearTimeout(parseInt(app.dataset.timer, 10)); clearTimeout(parseInt(app.dataset.timer, 10));
app.replaceChildren(); // Clear loading text app.replaceChildren(); // Clear loading text
html` html`
<form> <form>
<label for="price">Price</label> <label for="price">Price</label>
<input @input="${updateValue}" type="number" step="0.1" name="price" id="price" size="6" value="${() => data.price}"> <input
<span><span class="unit">¢/l</span></span> @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> <label for="economy">Consumption</label>
<input @input="${updateValue}" type="number" name="economy" id="economy" step="0.1" size="6" value="${() => data.economy}"> <input
<span><span class="unit">l/100km</span></span> @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> <label for="distance">Distance</label>
<input @input="${updateValue}" type="number" name="distance" id="distance" step="1" size="6" value="${() => data.distance}"> <input
<span><span class="unit">km</span></span> @input="${updateValue}"
</form> type="number"
name="distance"
id="distance"
step="1"
size="6"
value="${() => data.distance}"
/>
<span><span class="unit">km</span></span>
</form>
<p class="total"> <p class="total">$${() => calculate().toFixed(2)}</p>
$${() => calculate().toFixed(2)} `(app);
</p>
`(app)
</script> </script>
</body> </body>
</html> </html>