Playlist Project - with HTML/CSS Starter Code

Overview:

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.

Day 1

Day 1 Goal 1: Set Up

Planning

• Complete the project planning document.

GitHub Set-Up

• 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

Starter Code

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

Day 1 Goal 2: Write the code to store your song titles in JavaScript

• Create and populate an array to store your song names

Day 1 Goal 3: Write the code to store the rest of your song information in JavaScript

• Create and populate arrays to store your song artists, images, and links.

Wrap

• Push your changes!

Day 2

Day 2 Goal 1: Write the code to display your song titles on the page

• Create a loop that loops through your song name array and displays your song names in the correct div

Day 2 Goal 2: Write the code to display the rest of your song information

• Create loops that loop through your song artists, images, and links arrays and display the information in the correct divs.

Wrap

• Push your changes!

Day 3

Day 3 Goal 1: Write the code to allow users to add additional songs to your playlist

• Declare a variable and save the value of the user input with class title
• Use .push() to add the value to your song name array.

Day 3 Goal 2: Write the code to allow users to add additional song information to your playlist

• Declare additional variables and save the values of each input tag
• Use .push() to add each input value to the correct array

Wrap

• Push your changes!

Day 4

Day 4 Goal 1: Refactor your arrays so all your song information is stored in Objects

• Comment out your arrays
• Create an Object for each of your songs
• Inside each Object, add key/value pairs to store the title, artist,image, and link
• Store all your Objects in one array

Wrap

• Push your changes!

Day 5

Day 5 Goal 1: Refactor your loops so all your song information displays correctly on the page

• 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

Wrap

• Push your changes!

Project Extensions:

• 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

References/Tools

• Advanced Reference Table
• How Jquery Works
• JQuery Events