src/routes/+layout.svelte

@@ -5,6 +5,33 @@
     import Section from '$lib/components/Section.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
 
+    import { goto } from '$app/navigation';
+
+    // ICAO input state handler
+    let icao = $state('');
+    $effect(() => {
+        const params = new URLSearchParams();
+
+        if (icao.length === 4) {
+            // If the ICAO code is exactly 4 characters long, add it to the URL parameters
+            if (icao) params.set('icao', icao);
+
+            // This will trigger a navigation and reload the page data from the server
+            goto(`?${params.toString()}`, {
+                keepFocus: true,
+                replaceState: true,
+                noScroll: true
+            });
+        } else {
+            // Otherwise, clear the parameter
+             goto(`?${params.toString()}`, {
+                keepFocus: true,
+                replaceState: true,
+                noScroll: true
+            });
+        }
+    });
+
     let { children } = $props();
 </script>
 
@@ -27,8 +54,6 @@
                 <form
                     slot="content"
                     class="mx-auto flex w-full max-w-3xl flex-col gap-4 text-lg"
-                    action="https://api.staticforms.xyz/submit"
-                    method="post"
                 >
                     <div class="flex-space-between flex flex-col gap-10 md:flex-row">
                         <div class="flex-1">
@@ -46,6 +71,7 @@
                                 maxlength="4"
                                 required
                                 placeholder="EGKK"
+                                bind:value={icao}
                             />
                         </div>
                     </div>

src/routes/+page.svelte

@@ -3,6 +3,12 @@
     import Card from '$lib/components/Cards/Card.svelte';
     import { toasts } from 'svelte-toasts';
     import Loading from '$lib/components/Loading.svelte';
+
+    import { page } from '$app/stores';
+    import { derived } from 'svelte/store';
+
+    // Get the ICAO parameter from the URL
+    const icao = derived(page, ($page) => $page.url.searchParams.get('icao'));
 </script>
 
 
@@ -21,7 +27,11 @@
         <h2 slot="headerLeft">METAR</h2>
         <h2 slot="headerRight">Results</h2>
         <div slot="content" class="flex h-96 w-full items-center justify-center">
-            <Loading></Loading>
+            {#if $icao}
+                <span class="text-3xl font-bold">ICAO: {$icao}</span>
+            {:else}
+                <Loading />
+            {/if}
         </div>
     </Card>
 </Section>