neslyn/playlist

Playlist Project

Overview:

Day 1

Planning

• Review your Starter Code and make sure you understand what code has already been written for you.

Set-Up

• Go to the repository at https://github.com/ScriptEdcurriculum/playlist
• Fork this repository to your github account and clone it to a new workspace
• Add, commit, and push your changes
• Make your site live on gh-pages

JS

• Update the songs array in your project to have at least 4 songs
• Create four new arrays to store images_urls, artists, song lengths, and links

html / css

• Customize your CSS or add another column

Wrap

• Push your changes!

Day 2

JS

• Add a forEach loop in the displaySongInfo function to display the data from each of your arrays in the correct div
• Update the code to correctly append HTML Elements (img, p, a tags) using jQuery
• Use jQuery to complete the body of the emptySongInfo function

Wrap

• Push your changes!

Day 3

JS

• In the body of your addSongInfo function retrieve user inputs
• In the body of your addSongInfo function push items to your song array
• Display the results to the screen when the user clicks a button

Wrap

• Push your changes!

Extensions

• Update the HTML and CSS to reflect your own style.
• Add a delete button to delete songs on your list
• Use local storage to save your songs locally
• Add a shuffle button and shuffle functionality

Projects Extensions:

References/Tools

• Advanced Reference Table
• W3 String Methods
• W3 Array Methods