updated

src/routes/+page.svelte

@@ -17,7 +17,8 @@
             {
                 url: "https://kukfest.eu/img.jpg",
                 alt: "Kukfest logo",
-            },],
+            },
+        ],
         siteName: "Kukfest",
     }}
 />
@@ -26,4 +27,4 @@
 
 <Nav />
 
-<Countdown />
+<Countdown />

src/routes/Nav.svelte

@@ -12,7 +12,7 @@
         <li id="nav-menu-li">
             <button id="nav-menu"
                 ><img
-                    src="/data/images/menu.svg"
+                    src="/img/menu.svg"
                     alt="menu"
                     id="nav-menu-img"
                 /></button

src/routes/countdown.svelte

@@ -1,65 +1,63 @@
 <script>
     import { onMount } from "svelte";
+    let headline = "Nedtelling til Kukfest 23.1", countdownVisible = true, contentVisible = false;
+
+    let days = "00", hours = "00", minutes = "00", seconds = "00"
+
     onMount(() => {
-        (function () {
-            const second = 1000,
-                minute = second * 60,
-                hour = minute * 60,
-                day = hour * 24;
+        const second = 1000,
+            minute = second * 60,
+            hour = minute * 60,
+            day = hour * 24;
 
-            let today = new Date();
-            let yyyy = today.getFullYear();
-            let monthDay = "10/16/";
-            let date = monthDay + yyyy;
+        let today = new Date();
+        let yyyy = today.getFullYear();
+        let monthDay = "10/16/";
+        let time = "16:16:00";
+        let date = monthDay + yyyy + " " + time;
 
-            const countDown = new Date(date).getTime(),
-                x = setInterval(function () {
-                    const now = new Date().getTime(),
-                        distance = countDown - now;
+        const countDown = new Date(date).getTime(),
+            x = setInterval(function () {
+                const now = new Date().getTime(),
+                    distance = countDown - now;
 
-                    (document.getElementById("days").innerText = Math.floor(
-                        distance / day
-                    )),
-                        (document.getElementById("hours").innerText =
-                            Math.floor((distance % day) / hour)),
-                        (document.getElementById("minutes").innerText =
-                            Math.floor((distance % hour) / minute)),
-                        (document.getElementById("seconds").innerText =
-                            Math.floor((distance % minute) / second));
+                days = Math.floor(distance / day);
+                hours = Math.floor((distance % day) / hour);
+                minutes = Math.floor((distance % hour) / minute);
+                seconds = Math.floor((distance % minute) / second);
 
-                    //do something later when date is reached
-                    if (distance < 0) {
-                        document.getElementById("headline").innerText =
-                            "Kukfest is currently happening!";
-                        document.getElementById("countdown").style.display =
-                            "none";
-                        document.getElementById("content").style.display =
-                            "block";
-                        clearInterval(x);
-                    }
-                    //seconds
-                }, 0);
-        })();
+                //do something later when date is reached
+                if (distance < 0) {
+                    headline = "Kukfest skjer nå!";
+                    countdownVisible = false;
+                    contentVisible = true;
+                    clearInterval(x);
+                }
+                //seconds
+            }, 0);
     });
 </script>
 
-<svelte:head />
 
 <div class="container">
-    <h1 id="headline">Countdown to Kukfest 23.1</h1>
+    <h1>{headline}</h1>
+    {#if countdownVisible}
     <div id="countdown">
         <ul>
-            <li><span id="days" />days</li>
-            <li><span id="hours" />Hours</li>
-            <li><span id="minutes" />Minutes</li>
-            <li><span id="seconds" />Seconds</li>
+            <li><span>{days}</span>days</li>
+            <li><span>{hours}</span>Hours</li>
+            <li><span>{minutes}</span>Minutes</li>
+            <li><span>{seconds}</span>Seconds</li>
         </ul>
     </div>
+    {/if}
+    {#if contentVisible}
     <div id="content" class="emoji">
         <span>🥳</span>
         <span>🎉</span>
         <span>🎂</span>
     </div>
+    {/if}
 </div>
 
 <style>

static/img/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#1470e9" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

static/img/top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>