Skip to content

Instantly share code, notes, and snippets.

@arbaouimehdi

arbaouimehdi/demo.html

Created October 26, 2023 10:34
Show Gist options
  • Save arbaouimehdi/4df41e34c0aaac62838e5abe3cd0842e to your computer and use it in GitHub Desktop.
Save arbaouimehdi/4df41e34c0aaac62838e5abe3cd0842e to your computer and use it in GitHub Desktop.
Download ZIP
List.js Example
Raw
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>
Raw
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();
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment