-
section.products
- div.filters-container
- div.products-container
-
.filters-container
- form.input-form
- input.search-input
- h5(company)
- article.companies
- button.company-btn(temp values)
- form.input-form
-
.products-container
- article.product
- img.product-img.img (src from products.js)
- footer
- h5.product-name(name)
- span.product-price(price)
- article.product
- import products
- make a copy and assign to new variable (use let keyword)
- select .products-container
- setup a function displayProducts, iterate over products, display them
- select form, input
- listen for 'keyup' events on form
- get input value
- filter based on the input value
- call displayProducts
// Text Filter
const form = document.querySelector('.input-form');
const searchInput = document.querySelector('.search-input');
form.addEventListener('keyup', () => {
// keyup - fired when key released
const inputValue = searchInput.value;
filteredProducts = products.filter((product) => {
return product.title.toLowerCase().includes(inputValue);
});
displayProducts();
});- displayProducts()
- check length of filteredProducts
- if list.length < 1
- set productsContainer = some text
- select .companies
- create function displayButtons
- get only unique companies (set)
- iterate over results
- return button with data-id
- set .companies innerHTML equal to result
- add event listener on .companies
- look for event.target
- if contains .company-btn proceed
- if 'all' return all products (copy)
- else filter based on company value
- set search value ''
- call displayProducts
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent