nyccreator / site-unit2-project1-music-playlist-explorer-starter

Starter code for the Music Playlist Explorer project

Unit Assignment: Music Playlist Explorer

Submitted by: Andrey Fernandez

Estimated time spent: 15 hours spent in total

Deployed Application (optional):

Application Features

CORE FEATURES

• Display Playlists

  • Dynamically render playlists on the homepage using JavaScript.
  • Fetch data from a provided JSON file and use it to create interactive playlist tiles.
  • Each title should display the playlist's cover image, name, creator, and like count.

• Playlist Details

  • Create a modal view that displays detailed information about a playlist when a user clicks on a playlist tile.
  • The modal should show the playlist's cover image, name, creator, and a list of songs, including their titles, artists, and durations.

• Like Playlists

  • Implement functionality to allow users to like playlists by clicking a heart icon on each playlist tile.
  • Update the like count on the playlist tile when a playlist is liked or unliked.

• Shuffle Songs

  • Enable users to shuffle the songs within a playlist using a shuffle button in the playlist detail modal.
  • 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

https://www.loom.com/share/0cfaef511bf049aea969f8363615810a?sid=b343ca8a-ab67-4eeb-9b49-68c71048e55c

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. Learning about Javascript was a huge help in implementing the features. Variables, functions, event listeners and manipulating the DOM all played a role in dynamically displaying playlists on the web page. Although some of the main features were difficult to figure out, it was possible with the information we were taught and research. I would have liked to learn about forms and some common functions for manipulating strings and arrays in lecture. I had to do a good bit of research when trying to implement adding a playlist, editing a playlist, sorting, and searching.

• 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 have made my website responsive. The layout works for my viewport size, but becomes disorganized as the viewport becomes smaller. The way I ended up displaying the modal for each playlist is not the most efficient or clear. I would have also liked to add the ability to edit playlists. I began to work on the ability to edit a playlist by creating the button, but ran out of time to implement it fully.

• 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?

I was able to introduce the project and give an overview of what the website does. I explained all of the main features and stretch features that I implemented. I also went into my favorite feature, the sorting and searching, and my most challenging feature, the modal. Something to work on is the length of my presentation. I used a little over half of the required time. Next time I should go through my website in more detail and speak on my development experience to fill out the time.

Open-source libraries used

• N/A

Shout out

Thank you Devarsh for helping me fix some of my functions.