Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Filters project template from https://learnvanillajs.com.

Project Details

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.