https://github.com/drakealia/js-filters
Based on John Smilga's js course
https://github.com/drakealia/js-filters
Last synced: 16 days ago
JSON representation
Based on John Smilga's js course
- Host: GitHub
- URL: https://github.com/drakealia/js-filters
- Owner: DrakeAlia
- Created: 2022-05-27T17:11:57.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-28T01:22:27.000Z (about 4 years ago)
- Last Synced: 2025-10-26T09:33:23.781Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Filters Project
#### HTML Structure
- 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)
- .products-container
- article.product
- img.product-img.img (src from products.js)
- footer
- h5.product-name(name)
- span.product-price(price)
#### Display Products
- 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
#### Filter Based On Text
- select form, input
- listen for 'keyup' events on form
- get input value
- filter based on the input value
- call displayProducts
```js
// 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();
});
```
#### Empty Array
- displayProducts()
- check length of filteredProducts
- if list.length < 1
- set productsContainer = some text
#### Display Filter Buttons
- select .companies
- create function displayButtons
- get only unique companies (set)
- iterate over results
- return button with data-id
- set .companies innerHTML equal to result
#### Filter Based on Company
- 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