From f8c5635a6566420f1cc9a09fce55beb821384782 Mon Sep 17 00:00:00 2001
From: Wesley Moore <wes@wezm.net>
Date: Thu, 5 Sep 2024 09:06:00 +1000
Subject: [PATCH] Format index.html

---
 index.html | 235 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 136 insertions(+), 99 deletions(-)
diff --git a/index.html b/index.html
index fb165ca..6e12bb9 100644
--- a/index.html
+++ b/index.html
@@ -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>
