elijahrich1113 / es6-playlist

[advanced] - ES6 Methods, Templating, Flexbox

es6-playlist

Create your own personal music playlist!

Objective

Use ES6 methods to render music data to your browser

Prerequisites

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.)

Your Challenge

Part I

To complete Part I, fulfill the following requirements:

1. Set up your project file structure through the command line.
2. Create the following:

• HTML file
• CSS file
• JS file
• data.js file

4. link the data.js file with <script> tag above your app.js file
5. Link all of your files correctly.

Part II Create Data

To complete Part II, fulfill the following requirements:

1. 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'
  }
]

2. Create 6 different music genres of your choice, with 6 different songs/artist in each genre
3. All your data should be saved in data.js file

Part IV JS

1. Access your music data by console.log(data);
2. Use filter and map to render out your data

Part IV CSS

1. Use flexbox to organize layout of your application

Strech Goals

1. Make it more pretty
2. Add more genres

Resources

filter

map

innerHTML