1 files changed, 23 insertions, 13 deletions

diff --git a/script.js b/script.js
index ec32e6e..9472e55 100644
--- a/script.js
+++ b/script.js
@@ -17,33 +17,32 @@ const LINKS = [
     },
 ];
 
-const heading = document.getElementById('heading');
+const content = document.getElementById('content');
 
 route();
 // TODO: route on hashChange
 
 function route() {
     const latLon = parseLatLon(location.hash.slice(1));
+    content.innerHTML = '';
 
     if (!latLon) {
-        heading.textContent = 'not yet implemented';
+        document.title = 'Share a location';
+        content.append(createEl('h1', {}, ['not yet implemented']));
     } else {
-        const linkList = document.getElementById('links');
-        document.getElementById('instructions').hidden = false;
-
         document.title = 'Open location';
-        heading.textContent = '';
 
+        content.append(createEl('p', {}, ['Open in']));
+
+        const linkList = createEl('ul');
         const [lat, lon] = latLon;
 
-        for (const link of LINKS) {
-            const li = document.createElement('li');
-            const a = document.createElement('a');
-            a.href = link.url.replace('{lat}', lat).replace('{lon}', lon);
-            a.textContent = link.label;
-            li.appendChild(a);
-            linkList.appendChild(li);
+        for (const linkSpec of LINKS) {
+            const url = linkSpec.url.replace('{lat}', lat).replace('{lon}', lon);
+            const link = createEl('a', { href: url }, [linkSpec.label]);
+            linkList.append(createEl('li', {}, [link]));
         }
+        content.append(linkList);
     }
 }
 
@@ -63,3 +62,14 @@ function parseLatLon(text) {
     }
     return [lat, lon];
 }
+
+function createEl(tag, attrs = {}, content = []) {
+    const el = document.createElement(tag);
+    for (const [name, value] of Object.entries(attrs)) {
+        el.setAttribute(name, value);
+    }
+    for (const child of content) {
+        el.append(child);
+    }
+    return el;
+}