Day 15 | Demo Mockdata

Sử dụng HTML , CSS, JS  thiết kế chức năng Mockdata

 
 
 
				
					<body>
    <div class="container">
      <header>
        <h4 class="title">Live Product Filter</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>Loading...</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))

async function 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="">
			<div class="product-detail">
				<h4>${product.title.slice(0, 30)}</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 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *