Fix search bar

frontend/index.html

@@ -15,10 +15,10 @@
             <h1>Postnummer App</h1>
         </div>
         <main>
-            <div id="search-bar">
+            <form id="search-bar">
-                <input id="search-input" placeholder="Postnummer">
+                <input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
-                <button id="search-button">Search</button>
+                <button id="search-button" type="submit">Search</button>
-            </div>
+            </form>
             <img src="assets/map.jpg" id="map"><br>
             <p id="mouse-position"></p>
             <p id="coords"></p>

frontend/src/main.ts

@@ -96,12 +96,18 @@ function setupMap(
 }
 
 function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
+    const searchBar =
+        document.querySelector<HTMLFormElement>("#search-bar");
     const searchInput =
         document.querySelector<HTMLInputElement>("#search-input")!;
-    const searchButton =
-        document.querySelector<HTMLButtonElement>("#search-button")!;
 
-    searchButton.onclick = async (_event: MouseEvent) => {
+    // Prevent typing letters
+    searchBar.onkeypress = (event: KeyboardEvent) => {console.log(event);
+        event.key !== "Enter" || !isNaN(parseInt(event.key));}
+
+    searchBar.onsubmit = async (event: MouseEvent) => {
+        event.preventDefault();
+
         const inputValue = searchInput.value;
         if (!/^\d+$/.test(inputValue)) return;
         const data = await (
@@ -109,11 +115,13 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
                 `https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
             )
         ).json();
+
         displayZipCode(
             zipCodeElement,
-            parseInt(data[0]["nr"]),
+            data.length ? parseInt(data[0]["nr"]) : null,
-            data[0]["navn"],
+            data.length ? data[0]["navn"] : null,
         );
+
     };
 }