mariomelchor/Filters

## Filters
<!DOCTYPE html>
<html>
<head>
	<title>Filters</title>

	<style type="text/css">
		body {
			margin-left: auto;
			margin-right: auto;
			max-width: 40em;
			width: 88%;
		}

    .hidden {
      display: none;
    }
	</style>
</head>
<body>

  <h1>Playlist Filters</h1>

	<!-- Add filters here -->
	<div id="filters">
    <input type="checkbox" value="all" class="btn-filter">Show All</input>
  </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>
		class Filters {
      constructor(){
        this.displayButtons();
        this.checked = [];
      }

      displayButtons = () => {
        var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

        var genres = list.map((item) => {
          return item.dataset.genre;
        }).filter((v,i,a) => {
          return a.indexOf(v) === i;
        })

        genres.forEach((genre) => {
          var div = document.querySelector('#filters');
          var btn = `<input type="checkbox" value=${genre} class="btn-filter">${genre}</input>`;
          div.innerHTML += btn;
        })

        this.filterChange(document.querySelectorAll('.btn-filter'));
      }

      filterChange = (checkboxes) => {
         checkboxes.forEach((checkbox) => {
          checkbox.addEventListener('change', () => {
            var list = Array.prototype.slice.call(document.querySelectorAll("li.hidden"));
            list.forEach((item) => {
              item.classList.remove('hidden');
            });

            if(checkbox.value === 'all') {
              return;
            }

            this.filter(checkboxes);

          });
        })
      }

      filter = (array) => {
        var checkboxes = Array.prototype.slice.call(array);
        var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

        checkboxes.forEach((checkbox) => {
          if (checkbox.checked) {
            if (!this.checked.includes(checkbox.value)) {
              this.checked.push(checkbox.value);
            }
            this.showGenre(this.checked);
          }
          else {
            this.hideGenre(checkbox.value);
          }
        });
      }

      hideGenre = (genre) => {
        var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

        list.forEach((item) => {
          if (item.dataset.genre === genre) {
            item.classList.add('hidden');
          }
        });
      }

      showGenre = (genre) => {
        var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

        list.forEach((item) => {
          if (!genre.includes(item.dataset.genre)) {
            item.classList.add('hidden');
          }
        });
      }

    }

    new Filters();
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Filters</title>

	<style type="text/css">
	body {
	margin-left: auto;
	margin-right: auto;
	max-width: 40em;
	width: 88%;
	}

	.hidden {
	display: none;
	}
	</style>
	</head>
	<body>

	<h1>Playlist Filters</h1>

	<!-- Add filters here -->
	<div id="filters">
	<input type="checkbox" value="all" class="btn-filter">Show All</input>
	</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>
	class Filters {
	constructor(){
	this.displayButtons();
	this.checked = [];
	}

	displayButtons = () => {
	var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

	var genres = list.map((item) => {
	return item.dataset.genre;
	}).filter((v,i,a) => {
	return a.indexOf(v) === i;
	})

	genres.forEach((genre) => {
	var div = document.querySelector('#filters');
	var btn = `<input type="checkbox" value=${genre} class="btn-filter">${genre}</input>`;
	div.innerHTML += btn;
	})

	this.filterChange(document.querySelectorAll('.btn-filter'));
	}

	filterChange = (checkboxes) => {
	checkboxes.forEach((checkbox) => {
	checkbox.addEventListener('change', () => {
	var list = Array.prototype.slice.call(document.querySelectorAll("li.hidden"));
	list.forEach((item) => {
	item.classList.remove('hidden');
	});

	if(checkbox.value === 'all') {
	return;
	}

	this.filter(checkboxes);

	});
	})
	}

	filter = (array) => {
	var checkboxes = Array.prototype.slice.call(array);
	var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

	checkboxes.forEach((checkbox) => {
	if (checkbox.checked) {
	if (!this.checked.includes(checkbox.value)) {
	this.checked.push(checkbox.value);
	}
	this.showGenre(this.checked);
	}
	else {
	this.hideGenre(checkbox.value);
	}
	});
	}

	hideGenre = (genre) => {
	var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

	list.forEach((item) => {
	if (item.dataset.genre === genre) {
	item.classList.add('hidden');
	}
	});
	}

	showGenre = (genre) => {
	var list = Array.prototype.slice.call(document.querySelectorAll("li[data-genre]"));

	list.forEach((item) => {
	if (!genre.includes(item.dataset.genre)) {
	item.classList.add('hidden');
	}
	});
	}

	}

	new Filters();
	</script>

	</body>
	</html>