GUI 2 - Temperature Converter

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import '../app.css';
-	let { children } = $props();
+  import '../app.css';
+
+  let { children } = $props();
 </script>
 
 <svelte:head>
@@ -17,6 +18,7 @@
   <div class="drawer-side">
     <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
       <li><a href="/1_counter">1. Counter</a></li>
+      <li><a href="/2_temperature_converter">2. Temperature Converter</a></li>
     </ul>
   </div>
 </div>

src/routes/2_temperature_converter/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  let celsius = $state("");
+  let fahrenheit = $state("");
+  // C = (F - 32) * (5/9)
+  // F = C * (9/5) + 32.
+
+  function isNumeric(n: string): boolean {
+    return !isNaN(parseFloat(n)) && isFinite(Number(n));
+  }
+
+  function brackgroundClass(mine: string, other: string): string {
+    if (mine === '') return '';  // No BG if I'm empty
+    if (!isNumeric(mine)) return "bg-blue-400"; // Cyan if I'm not numeric
+    if (!isNumeric(other)) return "bg-gray-400"; // Gray if I'm OK but other not (I'm unanchored)
+    return ''; // No BG if all fine
+  }
+
+  function setCelsius(input: string) {
+    celsius = input;
+    if (!isNumeric(input)) return;
+    const c = parseFloat(input);
+    fahrenheit = Math.round(c * (9 / 5) + 32).toString();
+  }
+
+  function setFahrenheit(input: string) {
+    fahrenheit = input;
+    if (!isNumeric(input)) return;
+    const f = parseFloat(input);
+    celsius = Math.round((f - 32) * (5 / 9)).toString();
+  }
+</script>
+
+<div class="text-center">
+  <input class={["input w-24 mx-2", brackgroundClass(celsius, fahrenheit)]} type="text" bind:value={
+    () => celsius,
+    (v) => setCelsius(v)
+    }/>
+  <span>Celsius = </span>
+  <input class={["input w-24 mx-2", brackgroundClass(fahrenheit, celsius)]} type="text" bind:value={
+    () => fahrenheit,
+    (v) => setFahrenheit(v)
+    }/>
+  <span>Fahrenheit</span>
+</div>