Create your own personal music playlist!
Use ES6 methods to render music data to your browser
To complete this project, students should have the following:
- Intermediate understanding of HTML structures (divs, attributes, images...etc.).
- Intermediate understanding of JavaScript ES6 and DOM (variables, event listeners, map, filter...etc.)
To complete Part I, fulfill the following requirements:
- Set up your project file structure through the command line.
- Create the following:
- HTML file
- CSS file
- JS file
- data.js file
- Link all of your files correctly.
To complete Part II, fulfill the following requirements:
- Create an array of objects with the following properties in variable
data
:
- artist
- genre
- song
- album images
Example:
const data = [
{
artist: 'Drake',
genre: 'Hip-Hop',
song: 'In My Feelings',
image: 'https://bit.ly/2CFcZnz'
}
]
- Create 6 different music genres of your choice, with 6 different songs/artist in each genre
- All your data should be saved in
data.js
file
- link the
data.js
file with<script>
tag above yourapp.js
file
- Access your music data by
console.log(data)
; - Use
filter
andmap
to render out your data
- Use flexbox to organize layout of your application
- Make it more pretty
- Add more genres
Pseudo-code
- make a for loop that loops through the the array
- create a div in the for loop that gets the keys of the objects in the array
Ex.
newDiv = document.createElement
Ex.
createdDiv =
<h1> ${data.name} </h1>
- append created div to the html or div
- get id of your audio controls and change the src to genre.music
for (var i = 0; i < data.length; i++) {
newDiv = document.createElement("div")
newDiv.innerhtml =
<div id="songFeatContainer"> <img class="image" src=${genre.image}> <div id="minorContainer"> <p class="songFeat">Song: ${genre.song}</p> <p class="songFeat">Artist: ${genre.artist}</p> <p clas="songFeat">Genre: ${genre.genre}</p> </div> </div>
newDiv.addEventListener('click',() => {
audioId.src = genre.music;
});
document.getElementById("genreBar").append(newDiv);
}