Complete

music-playlist-creator/README.md

@@ -0,0 +1,79 @@
+📝 `NOTE` Use this template to initialize the contents of a README.md file for your application. As you work on your assignment over the course of the week, update the required or stretch features lists to indicate which features you have completed by changing `[ ]` to `[x]`. (🚫 Remove this paragraph before submitting your assignment.)
+
+## Unit 2 Assignment: Music Playlist Explorer
+
+Submitted by: **NAME**
+
+Estimated time spent: **#** hours spent in total
+
+Deployed Application (optional): [Music Playlist Explorer Deployed Site](https://kbmusicexploer.netlify.app/)
+
+### Application Features
+
+#### CORE FEATURES
+
+- [x] **Display Playlists**
+  - [x] Dynamically render playlists on the homepage using JavaScript.
+  - [x] Fetch data from a provided JSON file and use it to create interactive playlist tiles.
+  - [x] Each title should display the playlist's cover image, name, creator, and like count.
+
+- [x] **Playlist Details**
+  - [x] Create a modal view that displays detailed information about a playlist when a user clicks on a playlist tile.
+  - [x] The modal should show the playlist's cover image, name, creator, and a list of songs, including their titles, artists, and durations.
+
+- [x] **Like Playlists**
+  - [x] Implement functionality to allow users to like playlists by clicking a heart icon on each playlist tile.
+  - [x] Update the like count on the playlist tile when a playlist is liked or unliked.
+
+- [x] **Shuffle Songs**
+  - [x] Enable users to shuffle the songs within a playlist using a shuffle button in the playlist detail modal.
+  - [x] Rearrange the songs in the modal view when the shuffle button is clicked.
+
+#### STRETCH FEATURES
+
+- [ ] **Add New Playlists**
+  - [ ] Allow users to create new playlists.
+  - [ ] Users can input playlist name, creator, and add multiple songs with details like title, artist, and duration.
+
+- [ ] **Edit Existing Playlists**
+  - [ ] Enable users to modify the details of existing playlists.
+  - [ ] Add an edit button to each playlist tile.
+  - [ ] Users can update the name, creator, and songs of the playlist.
+
+- [ ] **Delete Playlists**
+  - [ ] Add a delete button to each playlist tile.
+  - [ ] When clicked, the playlist is removed from the display and data model.
+
+- [ ] **Search Functionality**
+  - [ ] Implement a search bar that allows users to filter playlists by name or creator.
+
+- [ ] **Sorting Options**
+  - [ ] Implement a dropdown or button options that allow users to sort the playlist by name, number of likes, or date added.
+
+### Walkthrough Video
+
+`TODO://` Add the embedded URL code to your animated app walkthrough below, `ADD_EMBEDDED_CODE_HERE`. Make sure the video actually renders and is playable when viewing this README. (🚫 Remove this paragraph after adding walkthrough video)
+
+`ADD_EMBEDDED_CODE_HERE`
+
+### Reflection
+
+* Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?
+
+Add your response here
+
+* If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.
+
+Add your response here
+
+* Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?
+
+Add your response here
+
+### Open-source libraries used
+
+- Add any links to open-source libraries used in your project.
+
+### Shout out
+
+Give a shout out to somebody from your cohort that especially helped you during your project. This can be a fellow peer, instructor, TA, mentor, etc.

music-playlist-creator/data/data.js

@@ -60,8 +60,8 @@ let data = { "playlists": [
           "title": "One Dance",
           "artist": "Drake",
           "album": "Views",
-          "cover_art": "https://picsum.photos/id/21/200,
-          "duration": "2:53"
+          "cover_art": "https://picsum.photos/id/21/200",
+          "duration": "2:53",
         },
         {
           "songID": 6,

music-playlist-creator/featured.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico" />
+    <linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
+    <link rel="stylesheet" href="style.css" />
+       <script defer src="featured.js"></script>
+    <title>Music Playlist Explorer</title>
+</head>
+<body>
+  <header>
+      <h1 id="header-title">MyPlaylist Explorer</h1>
+      <nav class="navbar">
+        <ul class="nav-links">
+            <li class="nav-items"><a href="featured.html">Home</a></li>
+            <li class="nav-items"><a href="index.html">Playlist</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main class="featured-main">
+          <h1 class="featured-title">Featured Playlist</h1>
+    <div class="featured-playlist"></div>
+    </main>
+    <footer class="featured-footer">
+      <p>MyPlaylist by Keith Baskerville</p>
+    </footer>
+     <script src="data/data.js"></script>
+
+</body>
+</html>

music-playlist-creator/featured.js

@@ -0,0 +1,35 @@
+/* Js for Feature Page */
+
+// Function to display a random playlist on the featured page
+const displayRandomPlaylist = () => {
+  // Get a random playlist from the data
+  const randomPlaylistIndex = Math.floor(Math.random() * data.playlists.length);
+  const randomPlaylist = data.playlists[randomPlaylistIndex];
+
+  const featuredPlaylistDiv = document.querySelector(".featured-playlist");
+  featuredPlaylistDiv.innerHTML = `
+    <div class="featured-left">
+      <img src="${randomPlaylist.playlist_art}" alt="Playlist Cover Art" class="featured-img">
+      <h2>${randomPlaylist.playlist_name}</h2>
+      <h4>Created by ${randomPlaylist.playlist_creator}</h4>
+    </div>
+    <div class="featured-right">
+      <ul class="song-list">
+        ${randomPlaylist.songs.map(song => `
+          <li class="song-item">
+            <img src="${song.cover_art}" alt="Cover Art" class="song-img">
+            <div class="song-details">
+              <p class="song-title">${song.title}</p>
+              <p class="song-artist">${song.artist} - ${song.album}</p>
+            </div>
+            <span class="song-duration">${song.duration}</span>
+          </li>
+        `).join('')}
+      </ul>
+    </div>
+  `;
+};
+
+// Call the function to display a random playlist on page load
+displayRandomPlaylist();
+

music-playlist-creator/index.html

@@ -1,27 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     <title>Music Playlist Explorer</title>
-    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
+    <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
     <header>
-        <!-- Your header content here -->
+      <!-- Your header content here -->
+      <h1 id="header-title">MyPlaylist Explorer</h1>
+      <nav class="navbar">
+        <ul class="nav-links">
+            <li class="nav-items"><a href="featured.html">Home</a></li>
+            <li class="nav-items"><a href="index.html">Playlist</a></li>
+        </ul>
+      </nav>
     </header>
+    <!-- Modal -->
+    <div id="playlistModal" class="modal-overlay">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <div class="modal-header">
+          <img
+            id="playlistImage"
+            src="https://picsum.photos/id/45/200"
+            alt="Festival Image"
+          />
+          <div class="modal-header-info">
+            <h1 id="playlistName">Playlist Title</h1>
+            <h2 id="playlistCreator">created by User 001</h2>
+          </div>
+          <div class="modal-footer">
+            <button id="shuffleButton">Shuffle</button>
+          </div>
+        </div>
+        <div class="modal-body"></div>
+      </div>
+    </div>
 
-    <main> 
-        <!-- Your main content here -->
+    <main>
+      <div class="playlist-cards"></div>
     </main>
-
     <footer>
-        <!-- Your footer content here -->
+      <p>MyPlaylist Explorer by Keith Baskerville</p>
     </footer>
     <script src="data/data.js"></script>
     <script src="script.js"></script>
-</body>
+  </body>
 </html>

music-playlist-creator/script.js

@@ -1 +1,138 @@
+// Dynamically create playlist cards function
+
+const createPlaylistCards = () => {
+    //  console.log(data.playlists);
+  const container = document.querySelector(".playlist-cards");
+  data.playlists.forEach((playlist) => {
+    const card = document.createElement("div");
+    card.className = "card";
+    card.innerHTML = `
+            <img src="${playlist.playlist_art}" class="card-img-top" alt="Card Image">
+            <div class="card-overlay">
+                <i class="fas fa-play"></i>
+                <span class="play-text">Play</span>
+            </div>
+            <div class="card-body">
+                <h5 class="card-title">${playlist.playlist_name}</h5>
+                <p class="card-text">${playlist.playlist_creator}</p>
+                <div class="card-review">
+                <i class="fa-regular fa-heart card-like-icon" ></i>
+                <span>${playlist.likeCount}</span>
+                </div>
+            </div>
+        `;
+    container.appendChild(card);
+
+    const overlay = card.querySelector(".card-overlay");
+    overlay.addEventListener("click", () => {
+      openModal(playlist);
+    });
+
+    // Add event listener to like icon
+    const likeIcon = card.querySelector(".card-like-icon");
+    likeIcon.addEventListener("click", (event) => {
+      event.stopPropagation();
+      playlist.likeCount++;
+      // Update like count on card
+      const likeCountElement = card.querySelector(".card-review span");
+      likeCountElement.textContent = playlist.likeCount;
+      // Toggle clicked class for styling
+      likeIcon.classList.toggle("clicked");
+    });
+
+  });
+}
+
+// Open modal function
+const openModal = (playlist) => {
+  const modal = document.getElementById("playlistModal");
+  modal.style.display = "block";
+
+  document.getElementById("playlistImage").src = playlist.playlist_art;
+  document.getElementById("playlistName").textContent = playlist.playlist_name;
+  document.getElementById(
+    "playlistCreator"
+  ).textContent = `created by ${playlist.playlist_creator}`;
+
+  const modalBody = modal.querySelector(".modal-body");
+  modalBody.innerHTML = "";
+
+  //   add event listener to shuffle button
+  const shuffleButton = document.getElementById("shuffleButton");
+  shuffleButton.addEventListener("click", () => {
+    shuffleSongs(playlist);
+});
+
+// function to shuffle songs in playlist
+const shuffleSongs = (playlist) => {
+    playlist.songs.sort(() => Math.random() - 0.5);
+    const modalBody = document.querySelector(".modal-body");
+    modalBody.innerHTML = "";
+
+    playlist.songs.forEach((song) => {
+      const songDiv = document.createElement("div");
+      songDiv.className = "song";
+      songDiv.innerHTML = `
+    <img src="${song.cover_art}" alt="" class="coverArt">
+    <div class="song-details">
+    <p id="songTitle">${song.title}</p>
+    <p id="artistName">${song.artist}</p>
+    <p id="albumName">${song.album}</p>
+    </div>
+    <p class="song-duration">${song.duration}</p>
+    `;
+      modalBody.appendChild(songDiv);
+    });
+    // Data model- shuffled
+    // console.log("Playlist",playlist.songs)
+};
+  // Show playlist
+  shuffleSongs(playlist);
+
+};
+
+// Close modal button
+const closeButton = document.querySelector(".close");
+const modal = document.getElementById("playlistModal");
+
+closeButton.addEventListener("click", () => {
+  modal.style.display = "none";
+});
+
+modal.addEventListener("click", (event) => {
+  if (event.target === modal) {
+    modal.style.display = "none";
+  }
+});
+
+// create playlist cards
+createPlaylistCards(data.playlists); 
+
+
+
+
+
+
+
+/* test code to open and close modal*/
+// const modal = document.getElementById("playlistModal");
+// const closeButton = document.querySelector(".close");
+
+// const overlays = document.querySelectorAll(".card-overlay");
+
+// overlays.forEach((overlay) => {
+//   overlay.addEventListener("click", () => {
+//     modal.style.display = "block";
+//   });
+// });
+
+// closeButton.addEventListener("click", () => {
+//   modal.style.display = "none";
+// });
+
+// modal.addEventListener("click", (event) => {
+//   if (event.target === modal) {
+//     modal.style.display = "none";
+//   }
+// });