<body>
<div class="container">
<header>
<h4 class="title"><span class="ez-toc-section" id="Live_Product_Filter"></span>Live Product Filter<span class="ez-toc-section-end"></span></h4>
<div class="form-input">
<i class="fas fa-search"></i>
<input
type="text"
id="filter"
placeholder="Tìm sản phẩm mong muốn..."
/>
</div>
</header>
<div class="products">
<div>
<h3><span class="ez-toc-section" id="Loading"></span>Loading...<span class="ez-toc-section-end"></span></h3>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #dadada;
font-family: 'Roboto', sans-serif;
height: 100vh;
width: 100%;
}
.container {
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
width: 400px;
margin: 80px auto;
background-color: #fff;
overflow: hidden;
}
header {
padding: 20px 15px;
}
h4 {
margin-bottom: 20px;
font-size: 20px;
color: #333;
}
.form-input {
display: flex;
align-items: center;
border: 1px solid #333;
border-radius: 5px;
}
.form-input input {
outline: none;
border: none;
background-color: transparent;
font-size: 16px;
padding: 8px 10px;
width: 100%;
}
.form-input i {
color: #555;
padding-left: 10px;
}
/* Products */
.products {
margin-top: 15px;
width: 100%;
overflow-y: auto;
max-height: 400px;
overflow-y: auto;
}
h3 {
padding: 8px 20px;
}
.product {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 10px;
padding: 8px 20px;
height: 100px;
}
.product:hover {
background-color: #ddd;
}
.product img {
width: 50px;
object-fit: cover;
object-position: center;
margin-right: 20px;
}
.product h4 {
font-size: 15px;
color: #333;
margin-bottom: 15px;
font-weight: 600;
}
.hide {
display: none;
}
const products = document.querySelector('.products')
const filter = document.getElementById('filter')
const listItems = []
getData()
filter.addEventListener('input', (e) => filterData(e.target.value))
<a href="https://nodemy.vn/di-sau-vao-async-await-trong-javascript-huong-dan-tu-co-ban-den-nang-cao-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">async</a> <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> getData() {
const res = await fetch('https://fakestoreapi.com/products')
const results = await res.json()
// Clear products
products.innerHTML = ''
results.forEach((product) => {
const div = document.createElement('div')
div.setAttribute('class', 'product')
listItems.push(div)
div.innerHTML = `
<img decoding="async" src="${product.image}" alt="học lập trình frontend, fullstack hà nội, ${product" title="# Day 15 | Thế nào là MockData? Filter, tìm kiếm sản phẩm trong dự án shop bán hàng, thương mại điện tử 1 học lập trình frontend, fullstack hà nội">
<div class="product-detail">
<h4><span class="ez-toc-section" id="producttitleslice0_30"></span>${product.title.slice(0, 30)}<span class="ez-toc-section-end"></span></h4>
<p>$${product.price}</p>
</div>
`
products.appendChild(div)
})
}
function filterData(search) {
listItems.forEach((item) => {
if (item.innerText.toLowerCase().includes(search.toLowerCase())) {
item.classList.remove('hide')
} else {
item.classList.add('hide')
}
})
}
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
