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> <!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,
width: fit-content; Comfortaa, Manjari, Nunito, "Arial Rounded MT",
} "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
h1,h2,h3{ line-height:1.2 } width: fit-content;
header { text-align: center } }
label { font-weight: bold } h1,
p { margin: 1em 0 0 } h2,
#app { h3 {
background: ghostwhite; line-height: 1.2;
padding: 1em 1em 0.5em; }
border-radius: 15px; header {
} text-align: center;
form { }
display: grid; label {
grid-template-columns: auto 1fr auto; font-weight: bold;
gap: 10px; }
} p {
label { margin: 1em 0 0;
grid-column: 1; }
text-align: right; #app {
} background: ghostwhite;
input { padding: 1em 1em 0.5em;
grid-column: 2; border-radius: 15px;
} }
.unit { form {
grid-column: 3; display: grid;
font-size: smaller; grid-template-columns: auto 1fr auto;
} gap: 10px;
.total { }
font-size: 24pt; label {
font-weight: 500; grid-column: 1;
text-align: right; text-align: right;
} }
</style> input {
</head> grid-column: 2;
<body> }
<header> .unit {
<h1>⛽<br>Fuel App</h1> grid-column: 3;
</header> 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"> <div id="app">
<noscript>JavaScript is required to use this calculator.</noscript> <noscript>JavaScript is required to use this calculator.</noscript>
</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 () {
el.dataset.timer = timer; console.log("ran");
} el.textContent = "Loading…";
</script> }, 500);
<script type="module"> el.dataset.timer = timer;
import { reactive, html } from './arrow.min.js'; }
</script>
<script type="module">
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> </script>
`(app) </body>
</script>
</body>
</html> </html>