fdnd-task · RickFDND · May 12, 2025 · May 12, 2025 · May 14, 2025 · May 14, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "doc": "docs"
   },
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "nodemon server.js"
   },
   "repository": {
     "type": "git",
@@ -26,7 +27,10 @@
   },
   "homepage": "https://github.com/fdnd-task/pleasurable-ui#readme",
   "dependencies": {
-    "express": "^5.0.1",
+    "express": "^5.1.0",
     "liquidjs": "^10.21.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.10"
   }
 }
diff --git a/public/animal.png b/public/animal.png
diff --git a/public/assets/profielfoto.avif b/public/assets/profielfoto.avif
diff --git a/public/assets/svg/pijl-boven.svg b/public/assets/svg/pijl-boven.svg
diff --git a/public/assets/svg/play-icon.svg b/public/assets/svg/play-icon.svg
diff --git a/public/grafiek.png b/public/grafiek.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="nl">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tumi mundo styleguide</title>
+    <link rel="stylesheet" href="styles/sprint-11.css">
+  </head>
+  <body>
+
+    <header>
+      <h1>Tumi mundo styleguide </h1>
+      <p>Dit is de styleguide voor de Tumi Mundo project.</p>
+      <p>Gebruik de volgende gedeelde stylesheet binnen je eigen project:
+        <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://github.com/SuleymanHG/pleasurable-ui/blob/main/public/styles/sprint-11.css&quot;&gt;</code>
+      </p>
+    </header>
+
+    <nav>
+      <a href="#typografie" class="primary-button">Typografie</a>
+      <a href="#buttons" class="filter-button">buttons</a>
+    </nav>
+
+
+
+    <section id="typografie">
+
+      <h2>Typografie</h2>
+
+      <h1 class="">Kop 1</h1>
+      <h2 class="">Kop 2</h2>
+      <h3 class="">Kop 3</h3>
+      <!-- <h4 class="">Kop 4</h4>
+      <h5 class="">Kop 5</h5> -->
+
+      <h2>Simpele alinea's</h2>
+      <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+      <ul class="">
+        <li>Ongeordende lijsten met items</li>
+        <li>Met nog meer items</li>
+        <li>En nog een item</li>
+      </ul>
+
+      <ol class="">
+        <li>Geordende lijsten met items</li>
+        <li>Met nog meer items</li>
+        <li>En nog een item</li>
+      </ol>
+    </section>
+
+    <section id="buttons">
+        <button class="play-button-stories">
+            <svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.81594 4.79593C8.33667 4.39301 8.33667 3.60684 7.81594 3.20391C6.24222 1.98623 4.48494 1.02645 2.60988 0.360497L2.26734 0.238836C1.61199 0.00608231 0.919774 0.449477 0.831054 1.12596C0.583171 3.01608 0.583171 4.98377 0.831054 6.87388C0.919774 7.55037 1.61199 7.99376 2.26733 7.76101L2.60988 7.63935C4.48494 6.9734 6.24222 6.01362 7.81594 4.79593Z" fill="white"/>
+            </svg>
+        </button>
+
+         <button class="play-button-playlist">
+            <svg width="20" height="20" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.81594 4.79593C8.33667 4.39301 8.33667 3.60684 7.81594 3.20391C6.24222 1.98623 4.48494 1.02645 2.60988 0.360497L2.26734 0.238836C1.61199 0.00608231 0.919774 0.449477 0.831054 1.12596C0.583171 3.01608 0.583171 4.98377 0.831054 6.87388C0.919774 7.55037 1.61199 7.99376 2.26733 7.76101L2.60988 7.63935C4.48494 6.9734 6.24222 6.01362 7.81594 4.79593Z" fill="white"/>
+            </svg>
+        </button>
+
+        <button class="filter-button">Animal
+            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.43342 4.90208C7.21143 5.12406 6.85153 5.12406 6.62955 4.90208L3.9999 2.27244L1.37026 4.90208C1.14828 5.12406 0.788371 5.12406 0.566389 4.90208C0.344407 4.6801 0.344407 4.32019 0.566389 4.09821L3.59797 1.06663C3.81995 0.844651 4.17986 0.844651 4.40184 1.06663L7.43342 4.09821C7.6554 4.32019 7.6554 4.6801 7.43342 4.90208Z" fill="white"/>
+            </svg>
+
+        </button>
+
+    </section>
+
+
+    <section>
+        <ul class="playlist-items">
+            <li>
+                <img src="assets/img/default-foto.jpg">
+                <h3>Titel playlist</h2>
+
+                <div class="items-btn">
+                    <button class="play-btn">
+                    <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10.0874 7.06141C10.7817 6.52417 10.7817 5.47595 10.0874 4.93871C7.98914 3.31514 5.6461 2.03543 3.14602 1.14749L2.68929 0.985277C1.8155 0.674939 0.892544 1.26613 0.774251 2.16812C0.443739 4.68826 0.443739 7.31186 0.774251 9.83201C0.892543 10.734 1.8155 11.3252 2.68929 11.0148L3.14602 10.8526C5.6461 9.96469 7.98914 8.68498 10.0874 7.06141Z" fill="white"/>
+                    </svg>
+                    </button>
+                    <p>31 min. 55 sec</p>
+                         <button class="play-button-stories">
+                            <svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M7.81594 4.79593C8.33667 4.39301 8.33667 3.60684 7.81594 3.20391C6.24222 1.98623 4.48494 1.02645 2.60988 0.360497L2.26734 0.238836C1.61199 0.00608231 0.919774 0.449477 0.831054 1.12596C0.583171 3.01608 0.583171 4.98377 0.831054 6.87388C0.919774 7.55037 1.61199 7.99376 2.26733 7.76101L2.60988 7.63935C4.48494 6.9734 6.24222 6.01362 7.81594 4.79593Z" fill="white"/>
+                            </svg>
+                        </button>
+                </div>
+            </li>
+        </ul>
+    </section>
+
+
+  </body>
+</html>
diff --git a/public/scripts/navigation.js b/public/scripts/navigation.js
@@ -0,0 +1,8 @@
+let navigationMenu = document.querySelector('header');
+let hamburgerButton = document.querySelector('#hamburger-button');
+let hamburgerNav = document.querySelector('nav') 
+
+hamburgerButton.addEventListener('click', function(){
+    navigationMenu.classList.toggle('navigation-menu-open');
+    hamburgerNav.classList.toggle('hamburger-open');
+});