Write a script that filters songs from a playlist by genre and whether or not the song is Grammy-nominated (fake data).
Dynamically create checkboxes to filter songs with using the data attributes in the #playlist. Only show songs that match the selected checklist criteria.
Bonus: Give users the ability to toggle all genres.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Project Template</title> | |
| <style type="text/css"> | |
| body { | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 40em; | |
| width: 88%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Playlist Filters</h1> | |
| <!-- Add filters here --> | |
| <div id="filters"></div> | |
| <ol id="playlist"> | |
| <li data-genre="pop" data-grammy="yes">"Thank U, Next" by Arianna Grande</li> | |
| <li data-genre="hip-hop" data-grammy="yes">"Sicko Mode" by Travis Scott</li> | |
| <li data-genre="rock" data-grammy="yes">"High Hopes" by Panic! at the Disco</li> | |
| <li data-genre="pop" data-grammy="no">"Girls Like You" by Maroon 5</li> | |
| <li data-genre="hip-hop" data-grammy="no">"Wow." by Post Malone</li> | |
| <li data-genre="hip-hop" data-grammy="no">"Better Now" by Post Malone</li> | |
| <li data-genre="hip-hop" data-grammy="no">"Money" by Cardi B</li> | |
| <li data-genre="hip-hop" data-grammy="no">"Going Bad" by Meek Mill</li> | |
| <li data-genre="pop" data-grammy="yes">"Shallow" by Lady Gaga</li> | |
| <li data-genre="rock" data-grammy="no">"Natural" by Imagine Dragons</li> | |
| <li data-genre="electronic" data-grammy="no">"Close to Me" by Ellie Goulding</li> | |
| <li data-genre="country" data-grammy="yes">"She Got The Best Of Me" by Luke Combs</li> | |
| <li data-genre="hip-hop" data-grammy="no">"A Lot" by 21 Savage</li> | |
| <li data-genre="country" data-grammy="yes">"Beautiful Crazy" by Luke Combs</li> | |
| <li data-genre="country" data-grammy="no">"Burning Man" by Dierks Bentley</li> | |
| <li data-genre="hip-hop" data-grammy="no">"Backin' It Up" by Pardison Fontaine</li> | |
| <li data-genre="country" data-grammy="yes">"Girl Like You" by Jason Aldean</li> | |
| <li data-genre="pop" data-grammy="no">"Consequences" by Camila Cabello</li> | |
| <li data-genre="hip-hop" data-grammy="yes">"Talk To Me" by Tory Lanez</li> | |
| <li data-genre="hip-hop" data-grammy="yes">"No Stylist" by French Montana</li> | |
| <li data-genre="hip-hop" data-grammy="yes">"Yosemite" by Travis Scott</li> | |
| <li data-genre="rock" data-grammy="no">"Bad Liar" by Imagine Dragons</li> | |
| <li data-genre="rock" data-grammy="no">"Get Up" by Shinedown</li> | |
| <li data-genre="pop" data-grammy="yes">"Without Me" by Halsey</li> | |
| </ol> | |
| <script> | |
| // Project code... | |
| </script> | |
| </body> | |
| </html> |
