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 for of 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 import to a new workspace
- Submit your website using the link on the Agenda
- Read through the HTML starter code to understand the organization and class names given.
- Read through the JavaScript starter code to determine where each given function is declared and where each given function is called.
- Create and populate an array to store your song names
- Create and populate arrays to store your song artists, song lengths, images, and links.
- Push your changes!
- Create a loop that loops through your song name array and displays your song names in the correct div
- Create loops that loop through your song artists, song lengths, images, and links arrays and display the information in the correct divs.
- Push your changes!
- Declare a variable and save the value of the user input with class
song
- Use
.push()
to add the value to your song name array.
- Declare additional variables and save the values of each input tag
- Use
.push()
to add each input value to the correct array
- Push your changes!
- Comment out your arrays
- Create an Object for each of your songs
- Inside each Object, add key/value pairs to store the title, artist, song length, image, and link
- Store all your Objects in one array
- Push your changes!
- Update your click handler so the input values are saved in as values in a new Object
- Update your
.push()
so the input Object is added to your array of Objects - Update your loops based on your new array of Objects
- 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