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

Initial commit

Browse source
This commit is contained in:
Wesley Moore 2024-09-03 21:45:07 +10:00
commit 55655324fb
No known key found for this signature in database
2 changed files with 105 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Nunito.woff2 Normal file
View file

Binary file not shown.

105
index.html Normal file
View file

@ -0,0 +1,105 @@
<!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">
@font-face {
src: url("Nunito.woff2") format("woff2");
font-family: Nunito;
font-weight: 200 1000;
}
body {
margin:40px auto;
max-width:650px;
line-height:1.6;
font-size:18px;
color:#444;
padding:0 10px;
font-family: Nunito, 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"></div>
<script type="module">
import { reactive, html } from 'https://esm.sh/@arrow-js/core';
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;
}
}
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>
`(document.getElementById('app'))
</script>
</body>
</html>