In this unit, coders will create a Playlist. The Playlist will display a list of information about different songs with images and links to play the songs. To create this project, coders will create arrays to hold song information, use a forEach loop to iterate over the arrays, and display data to the screen. They will use .push to add new songs to their playlist. Then, students will refactor their project to using objects instead of arrays to hold their data.
- Complete the project planning document.
- Go to the repository
- Fork this repository to your github account and clone to a new workspace
- Add, commit, and push your changes
- Make your site live on gh-pages
- Submit your website using the link on the Agenda
- Create a div to display your songs
- Create an array to store your song names
- Repeat these steps for song artist, song length, image, and link
- Push your changes!
- Create a loop to display your song names
- Repeat these steps for song artist, song length, image, and link
- Push your changes!
- Add song information to your list using .push()
- Create a working click handler that retrieves user input, pushes new items to your song arrays, and displays the result to the screen
- Push your changes!
- Comment out your code that refers to arrays
- Create Objects in your playlist project that hold all your song information
- Combine all your Objects into one array
- Push your changes!
- Update your .push() method based on your new array of Objects
- Update your loop based on your new array of Objects
- Finish refactoring your playlist project
- Push your changes!
- Add in your own CSS to personalize your project
- Use .length to display how many songs are on your list
- Add a delete button to delete songs on your list
- Refactor your project further by utilizing functions to simplify your code
- Add a shuffle button and functionality
- Use local storage to save your songs locally