/playlist

Primary LanguageJavaScript

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

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 more songs to your list and song information to your list
  • Add a delete button to delete songs on your list
  • Use local storage to save your songs locally

Projects Extensions:

References/Tools