Goal #1: Get started with the project, understand the inspiration behind it, and gather song data.
- 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”.
Goal #1: Review and practice using arrow functions while getting familiar with the starter code.
Goal #2: Store html elements in variables.
- Code Review: Read through the provided HTML and JavaScript starter code.
- Code Creation: Declare variables for display divs.
Goal #1: Create arrays to store song data.
Goal #2: Start customizing the CSS of your playlist.
-
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.
Goal #1: Learn to manipulate arrays using loops and display song data.
-
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.
Goal #1: Store user input to add new songs.
Goal #2: Push new songs to playlist data.
- 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.
Goal #1: Refactor your data to use objects instead of arrays for better data management.
-
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.