danielasc23/flw1-playlist-23-24-starter

Playlist Project

Planning & Functions

Goal #1: Get started with the project, understand the inspiration behind it, and gather song data.

Tasks:

• Setup: Clone or Fork the Starter Code.
• Exploration: Navigate to “Inspiration and Ideas!” in your project plan and gather some concepts.
• Brainstorming: Complete the “Let’s Brainstorm” section.
• Data Collection: Fill in your favorite tracks in “Collect Song Data”.

Arrow Functions

Goal #1: Review and practice using arrow functions while getting familiar with the starter code.

Goal #2: Store html elements in variables.

Tasks:

• Code Review: Read through the provided HTML and JavaScript starter code.
• Code Creation: Declare variables for display divs.

Arrays

Goal #1: Create arrays to store song data.

Goal #2: Start customizing the CSS of your playlist.

Tasks:

• Data Structures: Create arrays to store song data.

• Style: Apply any stylistic changes you planned in the previous brainstorming session. 😎

  Considerations: You might want to have an array for each data type: one for image URLs, one for song names, one for artists, and one for song links.

Loops

Goal #1: Learn to manipulate arrays using loops and display song data.

Tasks:

• Looping: Loop through arrays using either for, forEach, or other loop structures and display song data.

  Considerations: Think about the type of HTML tags to use for your data and the div container to which you're displaying the data.

Array Properties & Methods

Goal #1: Store user input to add new songs.

Goal #2: Push new songs to playlist data.

Tasks:

• Variables: Declare variables to save the user input. You need four in total: image URLs, song names, artists, and song links.
• Array Manipulation: Use the .push() method to add the user input to the appropriate arrays.

Objects

Goal #1: Refactor your data to use objects instead of arrays for better data management.

Tasks:

• Refactoring: Refactor your data to use objects instead of arrays.

  Considerations:

  • Consider commenting out the array data to keep as a reference.
  • Each song should be represented as an object that has key/value pairs for: song name, artist, image URL, and song link.
  • Store all of the song objects in an array.

---