Initial commit
This commit is contained in:
commit
55655324fb
2 changed files with 105 additions and 0 deletions
BIN
Nunito.woff2
Normal file
BIN
Nunito.woff2
Normal file
Binary file not shown.
105
index.html
Normal file
105
index.html
Normal 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>
|
Loading…
Reference in a new issue