arbaouimehdi/demo.html

## demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link rel="stylesheet" href="draft.css" />
    <title>Demo</title>
  </head>
  <body>
    <div id="list">
      <!-- ------ Search ------- -->
      <label for="search-input" class="visually-hidden">
        Search operating systems
      </label>
      <input
        id="search-input"
        class="search"
        placeholder="Search operating systems"
        aria-label="Search operating systems"
      />

      <!-- ------- Sort -------- -->
      <nav aria-label="Sorting options">
        <h3>Sort</h3>
        <ul class="sort-by">
          <li>
            <button class="sort btn" data-sort="name">
              Sort by name
            </button>
          </li>
          <li>
            <button class="sort btn" data-sort="category">
              Sort by category
            </button>
          </li>
        </ul>
      </nav>

      <!-- ------ Filter ------- -->
      <nav aria-label="Filtering options">
        <h3>Filter</h3>
        <ul class="filter">
          <li>
            <button class="btn" id="filter-none">
              Show all
            </button>
          </li>
          <li>
            <button class="btn" id="filter-desktop">
              Desktop OS
            </button>
          </li>
          <li>
            <button class="btn" id="filter-mobile">
              Mobile OS
            </button>
          </li>
        </ul>
      </nav>

      <!-- - Operating Systems - -->
      <section
        class="list"
        aria-label="List of Operating Systems"
      >
        <article>
          <header>
            <h4 class="name">Windows 10</h4>
            <p class="category">Desktop</p>
          </header>
          <p class="description">
            Windows 10 is a personal computer operating
            system by Microsoft.
          </p>
        </article>

        <article>
          <header>
            <h4 class="name">Android</h4>
            <p class="category">Mobile</p>
          </header>
          <p class="description">
            Mobile OS based on a modified version of the
            Linux kernel.
          </p>
        </article>

        <article>
          <header>
            <h4 class="name">iOS</h4>
            <p class="category">Mobile</p>
          </header>
          <p class="description">
            iOS is a mobile OS created and developed by
            Apple Inc.
          </p>
        </article>
      </section>
    </div>

    <!-- -------- JS --------- -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"
      integrity="sha512-93wYgwrIFL+b+P3RvYxi/WUFRXXUDSLCT2JQk9zhVGXuS2mHl2axj6d+R6pP+gcU5isMHRj1u0oYE/mWyt/RjA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="demo.js"></script>
  </body>
</html>

## demo.js
class ListManager {
  constructor(options) {
    this.featureList = new List("list", options);
  }

  handleButtonClick(
    category,
    buttonElement,
    isFilter = true
  ) {
    return (event) => {
      const sectionClass = isFilter
        ? ".filter"
        : ".sort-by";
      const sectionButtons = document.querySelectorAll(
        `${sectionClass} .btn`
      );

      sectionButtons.forEach((button) =>
        button.classList.remove("btn--active")
      );

      buttonElement.classList.add("btn--active");

      if (isFilter) {
        if (category) {
          this.featureList.filter(
            (item) => item.values().category === category
          );
        } else {
          this.featureList.filter();
        }
      }
      event.preventDefault();
    };
  }

  addButtonListener(elementId, category, isFilter = true) {
    const buttonElement =
      document.getElementById(elementId);
    buttonElement.addEventListener(
      "click",
      this.handleButtonClick(
        category,
        buttonElement,
        isFilter
      )
    );
  }

  init() {
    const sortButtons =
      document.querySelectorAll(".sort.btn");
    sortButtons.forEach((button) => {
      button.addEventListener(
        "click",
        this.handleButtonClick(null, button, false)
      );
    });

    this.addButtonListener("filter-desktop", "Desktop");
    this.addButtonListener("filter-mobile", "Mobile");
    this.addButtonListener("filter-none", null);
  }
}

const options = {
  valueNames: ["name", "category", "description"],
};

const listManager = new ListManager(options);
listManager.init();

## draft.css
body {
  font-family: "Arial", sans-serif;
  background-color: #19002f;
  color: #efefef;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -15px;
  margin-top: -15px;
}

h3 {
  margin-bottom: -10px;
  margin-left: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

h4 {
  font-size: 25px;
}

p {
  line-height: 1.6;
}

label {
  font-weight: bold;
  text-align: center;
  width: 100%;
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 22px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline-block;
}

#list {
  max-width: 800px;
  padding: 20px;
  background-color: #210041;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(25, 0, 47, 0.5);
}

.search {
  width: calc(100% - 36px);
  padding: 18px;
  margin: 10px 0;
  border: 1px solid #2a0055;
  border-radius: 5px;
  background-color: #120126;
  outline: none;
  font-size: 16px;
  color: #fff;
}

.search::placeholder {
  color: rgba(208, 168, 255, 0.416);
}

.btn {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  background-color: #56109e;
  color: #efefef;
  cursor: pointer;
  transition: border 0.3s;
  border: 2px solid transparent;
}

.btn:hover,
.btn--active {
  background: #3cff00;
  color: #000;
}

.list article {
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  background-color: #310660;
  transition: background-color 0.3s;
  border: 1px solid #49098a;
}

.list article:hover {
  background-color: #2d0060;
}

.name,
.category {
  display: inline-block;
  margin-right: 10px;
}

.category {
  border-radius: 10px;
  padding: 3px 15px;
  font-size: 13px;
  color: #8e3de1;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
}

.description {
  margin-top: 10px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0"
	/>
	<link rel="stylesheet" href="draft.css" />
	<title>Demo</title>
	</head>
	<body>
	<div id="list">
	<!-- ------ Search ------- -->
	<label for="search-input" class="visually-hidden">
	Search operating systems
	</label>
	<input
	id="search-input"
	class="search"
	placeholder="Search operating systems"
	aria-label="Search operating systems"
	/>

	<!-- ------- Sort -------- -->
	<nav aria-label="Sorting options">
	<h3>Sort</h3>
	<ul class="sort-by">
	<li>
	<button class="sort btn" data-sort="name">
	Sort by name
	</button>
	</li>
	<li>
	<button class="sort btn" data-sort="category">
	Sort by category
	</button>
	</li>
	</ul>
	</nav>

	<!-- ------ Filter ------- -->
	<nav aria-label="Filtering options">
	<h3>Filter</h3>
	<ul class="filter">
	<li>
	<button class="btn" id="filter-none">
	Show all
	</button>
	</li>
	<li>
	<button class="btn" id="filter-desktop">
	Desktop OS
	</button>
	</li>
	<li>
	<button class="btn" id="filter-mobile">
	Mobile OS
	</button>
	</li>
	</ul>
	</nav>

	<!-- - Operating Systems - -->
	<section
	class="list"
	aria-label="List of Operating Systems"
	>
	<article>
	<header>
	<h4 class="name">Windows 10</h4>
	<p class="category">Desktop</p>
	</header>
	<p class="description">
	Windows 10 is a personal computer operating
	system by Microsoft.
	</p>
	</article>

	<article>
	<header>
	<h4 class="name">Android</h4>
	<p class="category">Mobile</p>
	</header>
	<p class="description">
	Mobile OS based on a modified version of the
	Linux kernel.
	</p>
	</article>

	<article>
	<header>
	<h4 class="name">iOS</h4>
	<p class="category">Mobile</p>
	</header>
	<p class="description">
	iOS is a mobile OS created and developed by
	Apple Inc.
	</p>
	</article>
	</section>
	</div>

	<!-- -------- JS --------- -->
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"
	integrity="sha512-93wYgwrIFL+b+P3RvYxi/WUFRXXUDSLCT2JQk9zhVGXuS2mHl2axj6d+R6pP+gcU5isMHRj1u0oYE/mWyt/RjA=="
	crossorigin="anonymous"
	referrerpolicy="no-referrer"
	></script>
	<script src="demo.js"></script>
	</body>
	</html>
	class ListManager {
	constructor(options) {
	this.featureList = new List("list", options);
	}

	handleButtonClick(
	category,
	buttonElement,
	isFilter = true
	) {
	return (event) => {
	const sectionClass = isFilter
	? ".filter"
	: ".sort-by";
	const sectionButtons = document.querySelectorAll(
	`${sectionClass} .btn`
	);

	sectionButtons.forEach((button) =>
	button.classList.remove("btn--active")
	);

	buttonElement.classList.add("btn--active");

	if (isFilter) {
	if (category) {
	this.featureList.filter(
	(item) => item.values().category === category
	);
	} else {
	this.featureList.filter();
	}
	}
	event.preventDefault();
	};
	}

	addButtonListener(elementId, category, isFilter = true) {
	const buttonElement =
	document.getElementById(elementId);
	buttonElement.addEventListener(
	"click",
	this.handleButtonClick(
	category,
	buttonElement,
	isFilter
	)
	);
	}

	init() {
	const sortButtons =
	document.querySelectorAll(".sort.btn");
	sortButtons.forEach((button) => {
	button.addEventListener(
	"click",
	this.handleButtonClick(null, button, false)
	);
	});

	this.addButtonListener("filter-desktop", "Desktop");
	this.addButtonListener("filter-mobile", "Mobile");
	this.addButtonListener("filter-none", null);
	}
	}

	const options = {
	valueNames: ["name", "category", "description"],
	};

	const listManager = new ListManager(options);
	listManager.init();
	body {
	font-family: "Arial", sans-serif;
	background-color: #19002f;
	color: #efefef;
	}

	header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: -15px;
	margin-top: -15px;
	}

	h3 {
	margin-bottom: -10px;
	margin-left: 10px;
	font-size: 12px;
	text-transform: uppercase;
	}

	h4 {
	font-size: 25px;
	}

	p {
	line-height: 1.6;
	}

	label {
	font-weight: bold;
	text-align: center;
	width: 100%;
	display: block;
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 22px;
	}

	nav ul {
	list-style-type: none;
	padding: 0;
	}

	nav li {
	display: inline-block;
	}

	#list {
	max-width: 800px;
	padding: 20px;
	background-color: #210041;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(25, 0, 47, 0.5);
	}

	.search {
	width: calc(100% - 36px);
	padding: 18px;
	margin: 10px 0;
	border: 1px solid #2a0055;
	border-radius: 5px;
	background-color: #120126;
	outline: none;
	font-size: 16px;
	color: #fff;
	}

	.search::placeholder {
	color: rgba(208, 168, 255, 0.416);
	}

	.btn {
	padding: 10px 20px;
	margin: 5px;
	border: none;
	border-radius: 5px;
	background-color: #56109e;
	color: #efefef;
	cursor: pointer;
	transition: border 0.3s;
	border: 2px solid transparent;
	}

	.btn:hover,
	.btn--active {
	background: #3cff00;
	color: #000;
	}

	.list article {
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 5px;
	background-color: #310660;
	transition: background-color 0.3s;
	border: 1px solid #49098a;
	}

	.list article:hover {
	background-color: #2d0060;
	}

	.name,
	.category {
	display: inline-block;
	margin-right: 10px;
	}

	.category {
	border-radius: 10px;
	padding: 3px 15px;
	font-size: 13px;
	color: #8e3de1;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	}

	.description {
	margin-top: 10px;
	}