eerste opzet create a playlist

public/script.js

@@ -1,4 +1,7 @@
 // elements selecteren
+let add_playlist = document.querySelector('.add-playlist')
+let playlist = document.querySelector('.playlist')
+let close_playlist = document.querySelector('.close-playlist')
 let hamburger = document.querySelector('.hamburger')
 let navMenu = document.querySelector('.desktop')
 let body = document.querySelector('body')
@@ -15,6 +18,14 @@ hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('active-bar')
 })
 
+add_playlist.addEventListener('click', () => {
+  playlist.classList.toggle('playlist-active')
+})
+
+close_playlist.addEventListener('click', () => {
+  playlist.classList.toggle('playlist-active')
+})
+
 // PE suggested + liked playlist section
 // JS code added & removing styling without JS
 body.classList.remove('liked-no-js', 'sug-no-js')
@@ -64,4 +75,14 @@ forms.forEach(function (form) {
   })
 })
 
-// Allstories carousel
+// Allstories carousel
+
+function showPreview(event){
+  if(event.target.files.length > 0) {
+    let src = URL.createObjectURL(event.target.files[0]);
+    let preview = document.getElementById("image-preview");
+    preview.src = src;
+    preview.style.display = "block";
+    preview.style.height = "130px";
+  }
+}

public/style-playlist.css

@@ -0,0 +1,117 @@
+.add-playlist {
+  cursor: pointer;
+}
+
+.playlist {
+  opacity: 0;
+  position: absolute;
+  top: -1000px; /* Keep it at the top when open */
+  right: 0;
+  left: 0;
+  height: 100vh;
+  background-color: rgba(41, 41, 41, 0.95);
+  text-align: center;
+  transition: all 0.5s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
+  z-index: 999;
+}
+
+.playlist-active {
+  position: fixed;
+  top: 0; /* Keep it at the top when open */
+  right: 0;
+  left: 0;
+  text-align: center;
+  opacity: 1;
+  background-color: rgba(41, 41, 41, 0.95);
+  height: 100vh;
+  transform: translateY(0);
+  transition: all 0.5s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
+  z-index: 999;
+}
+
+.playlist > a {
+  font-size: 2em;
+  right: 2em;
+  top: 0.75em;
+  position: absolute;
+  transition: all 0.5s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
+}
+
+.playlist form {
+  height: 100%;
+  align-content: center;
+}
+
+.playlist form > h1 {
+  margin-bottom: 1em;
+}
+
+.playlist form > img {
+  align-self: center;
+}
+
+
+.playlist form > div:first-of-type {
+  display: grid;
+}
+
+.playlist form > div:first-of-type > img {
+  justify-self: center;
+  margin-bottom: 2em;
+}
+
+.playlist form > div:first-of-type > input {
+  width: 50%;
+  margin: auto;
+  padding-block: 0.5em;
+  border: none;
+  border-bottom: 2px solid white;
+  color: white;
+  font-size: 1.5em;
+  text-align: center;
+  background: none;
+  font-weight: bold;
+}
+
+.playlist form > div:last-of-type {
+  display: flex;
+  justify-content: center;
+  margin-block: 1em;
+  gap: 2em;
+}
+
+.file {
+  opacity: 0;
+  width: 0.1px;
+  height: 0.1px;
+  position: absolute;
+}
+
+.file-input label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75em;
+  padding-inline: 2em;
+  margin-top: 2em;
+  border-radius: 0.5em;
+  cursor: pointer;
+  box-shadow: 0 4px 7px rgb(125 95 95);
+  margin-bottom: 1em;
+  border-top: 1px solid rgb(125 95 95);
+}
+
+.playlist form > div:last-of-type > button {
+  border-radius: 0.5em;
+  padding: 0.75em;
+  padding-inline: 2em;
+  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
+  margin-top: 2em;
+  box-shadow: 0px 4px 7px rgb(255 255 255 / 63%);
+  border-top: 1px solid rgb(255 255 255 / 50%);
+  margin-bottom: 1em;
+}

views/lessons.ejs

@@ -11,18 +11,36 @@
         </ol>
     </header>
 
-    <section class="own-playlist">
+    <section>
         <h2>Own playlist</h2>
         <div>
             <article>
-                <%- include('./partials/svg-plus') %>
-                <h5>Make a playlist!</h5>
-                <p>Add your favourite stories in one playlist</p>
+                <div class="add-playlist">
+                    <%- include('./partials/svg-plus') %>
+                    <h5>Make a playlist!</h5>
+                    <p>Add your favourite stories in one playlist</p>
+                </div>
             </article>
 
+            <div class="playlist">
+                <a class="close-playlist">X</a>
+                <form method="post">
+                    <h1>Choose a name for your playlist</h1>
+                    <div>
+                        <img src="#" alt="Preview uploaded image"  id="image-preview"> 
+                        <input id="playlistName" type="text" required placeholder="Name playlist" name="NewPlaylists">
+                    </div>
+                    <div class="file-input">
+                        <label for="file">Select image</p>
+                        </label>
+                        <input class="file" id="file" type="file" accept="image/*" onchange="showPreview(event);"  />
+                        <button>Create playlist</button>
+                    </div>
+                </form>
+            </div>
+
             <%- include('./partials/playlist') %>
         </div>
-
     </section>
 
     <section class="all-stories">

views/new-playlist.ejs

@@ -0,0 +1,2 @@
+<%- include('./partials/head') %>
+<%- include('./partials/navigation', {current: '/'}); %>

views/partials/head.ejs

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/styles.css">
+  <link rel="stylesheet" href="/style-playlist.css">
   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Draggable.min.js" defer></script>
   <script src="/script.js" defer></script>