finish features

README.md

@@ -0,0 +1,78 @@
+## Unit 2 Assignment: Music Playlist Explorer
+
+Submitted by: **Tessa Orozco**
+
+Estimated time spent: **22** hours spent in total
+
+Deployed Application (optional): [Music Playlist Explorer Deployed Site](ADD_LINK_HERE)
+
+### 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.
+
+- [ x] **Delete Playlists**
+  - [x ] Add a delete button to each playlist tile.
+  - [ x] When clicked, the playlist is removed from the display and data model.
+
+- [ x] **Search Functionality**
+  - [ x] 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://` https://www.loom.com/share/2cb2227399734b6e813236ace14652a3?sid=7f858a50-ad92-481d-9418-0021ca994aaf
+
+`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?
+
+Yes, the topics discussed in the labs helped me complete the assignment. Specifically, the tomato timer lab helped me understand how to use javascript to handle events and make the website more dynamic. There was no feature I felt particularly unprepared to complete, I felt I had the tools to complete all of them. However, rendering the playlists from the json file was initially more challenging. 
+I was also unprepared on uploading the video file to github as I keep running into an error saying github does not allow the file size.
+
+* 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.
+
+If I had more time I would take the opportunity to clean up my code more. I had a lot of styling in different places which became confusing after a while. I would have also wanted to add the remaining stretch features such as adding a new playlist.
+
+* 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?
+
+My project demo went well and all my features worked as expected. However I was still in the middle of working on my search feature. I originally made my search feature so that it searches upon clicking enter and I was in the process of adding a button to go back to view all playlists. However, I saw that my peers has implemented search such that the page searches upon key up. This way all the playlists can be seen by backspacing the search bar completely, removing the need to add a button to go back. This saved me time on continuing to work on my project. I also saw that another one of my peers had a pixelated background. This inspired me to be even more creative with styling moving forward and adding more dimension to my websites.
+
+### Open-source libraries used
+
+- Add any links to open-source libraries used in your project.
+
+### Shout out
+
+Bryan helped me spot a bug on the third day of work that I had been stuck on for a while. He was very helpful and took the time to look through my code with me and spotted that I was accessing the json version of an element rather than the html version which is why my changes were not showing up on the website.

music-playlist-creator/data/data.js

@@ -4,7 +4,7 @@ let data = { "playlists": [
       "playlist_name": "Late Night Drive",
       "playlist_creator": "Melody Maven",
       "playlist_art": "https://picsum.photos/id/36/200",
-      "likeCount": 0,
+      "likeCount": 1,
       "songs": [
         {
           "songID": 0,
@@ -60,7 +60,7 @@ let data = { "playlists": [
           "title": "One Dance",
           "artist": "Drake",
           "album": "Views",
-          "cover_art": "https://picsum.photos/id/21/200,
+          "cover_art": "https://picsum.photos/id/21/200",
           "duration": "2:53"
         },
         {
@@ -102,7 +102,7 @@ let data = { "playlists": [
       "playlist_name": "Workout Beats",
       "playlist_creator": "Harmony Herald",
       "playlist_art": "https://picsum.photos/id/1077/200",
-      "likeCount": 0,
+      "likeCount": 3,
       "songs": [
         {
           "songID": 10,
@@ -151,7 +151,7 @@ let data = { "playlists": [
       "playlist_name": "Road Trip Anthems",
       "playlist_creator": "Playlist Pioneer",
       "playlist_art": "https://picsum.photos/id/314/200",
-      "likeCount": 0,
+      "likeCount": 5,
       "songs": [
         {
           "songID": 15,
@@ -298,7 +298,7 @@ let data = { "playlists": [
       "playlist_name": "90's R&B",
       "playlist_creator": "Vinyl Virtuoso",
       "playlist_art": "https://picsum.photos/id/815/200",
-      "likeCount": 0,
+      "likeCount": 4,
       "songs": [
         {
           "songID": 30,

music-playlist-creator/featured.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Featured Playlist</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+<body style="background-color: #c4e1ff;">
+    <header id="featHeader" style="background-color: #c4e1ff; text-align: center;">
+        <h1 id="featureHead" style="color: white;">Featured Playlist</h1>
+        <a class="backToExp" href="index.html" title="Link" style="
+        text-decoration: none;
+        background-color: rgb(118, 191, 255);
+        color: white;
+        padding: 5px;
+        box-shadow: 2px 2px 5px rgba(27, 110, 255, 0.611);
+        border-radius: 3px;
+        background-size: 200% auto;
+        font-weight: bold;">return to explore</a>
+    </header>
+    <main style="background: linear-gradient(180deg, #c4e1ff, #22c1ff);; padding-top: 40px;"> 
+        <div id="ftPlay">
+
+        </div>
+    </main>
+
+
+<footer>
+    <p id="blueFoot">Made by Tessa Orozco</p>
+</footer>
+    <script src="data/data.js"></script>
+    <script src="script.js"></script>
+
+</body>
+</html>

music-playlist-creator/index.html

@@ -10,16 +10,57 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <div id="cardModal" class="modal-overlay">
+        <p id="close">&times;</p>
+        <div id="modal-content">
+        </div>
+    </div>
     <header>
-        <!-- Your header content here -->
+        <div class="pHead">
+            <div id="pageTitle">
+                <h1>Music Playlist Explorer</h1>
+            </div>
+        </div>
+        </div>
+        <div style="text-align: center; background-color: rgb(255, 247, 240)">
+        <a class="featLink" href="featured.html" title="Link" style="
+        text-decoration: none;
+        margin-bottom: 8px;
+        font-size: 1.5em;
+        background-image: linear-gradient(45deg, 
+        #ff0000, /* Red */
+        #ff3c00, /* Green */
+        #ff7f00, /* Orange */
+        #ffa200, /* Yellow */
+        #ffc400, /* Green */
+        #ffc400, /* Green */
+        #ffe600, /* Green */
+        #60e700, /* Green */
+        #0099ff, /* Green */
+        #0000ff, /* Blue */
+        #4b0082, /* Indigo */
+        #9400d3  /* Violet */);
+        -webkit-text-fill-color: white;
+        transition: color 0.3s, background 0.3s, background-position 0.5s;
+        padding: 5px;
+        box-shadow: 2px 2px 5px rgba(203, 64, 0, 0.798);
+        border-radius: 3px;
+        background-size: 200% auto;
+        font-weight: bold;">view featured playlist!</a>
+        </div>
     </header>
 
-    <main> 
-        <!-- Your main content here -->
+    <main id="exploreMain"> 
+        <input id="searchbar" onkeyup="search_playlist()" type="text" name="search" placeholder="Search playlists.."
+        style="margin-bottom: 10px;">
+        <container id="playlist-cards">
+        </container>
     </main>
 
+    <div id="overlay"></div>
+
     <footer>
-        <!-- Your footer content here -->
+        <p id="footText">Made by Tessa Orozco</p>
     </footer>
     <script src="data/data.js"></script>
     <script src="script.js"></script>