dcheno / playlist Goto Github PK

This project forked from itscodenation/flw1-playlist-22-23-starter

HTML 44.31% CSS 30.95% JavaScript 24.74%

playlist's Introduction

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 song
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