<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online Shopping</title>
<link rel="stylesheet" href="./style.css" />
<script>
function loadItems() {
return fetch('data/data.json')
.then(response =>
response.json()
)
.then(json => json.items)
}
function displayItems(items) {
console.log(items);
const container = document.querySelector('.items');
container.innerHTML = items.map(item => creatingHTMLString(item)).join('');
}
function creatingHTMLString(item) {
return `
<li class="item">
<img src="${item.image}" alt="${item.type}" class="item__thumbnail" />
<span class="item__description">${item.gender}, ${item.size}</span>
</li>`
}
function onButtonClick(e, items) {
console.log(e);
console.log(e.target);
console.log(e.target.dataset);
console.log(e.target.dataset.key);
console.log(e.target.dataset.value);
console.log(items);
const dataset = e.target.dataset;
const key = dataset.key;
const value = dataset.value;
console.log(key, value);
if (key === null || value === null) return;
const filtered = items.filter(item => item[key] === value)
displayItems(filtered);
}
function setEventListeners(items) {
const logo = document.querySelector('.logo');
const buttons = document.querySelector('.buttons');
logo.addEventListener('click', () => displayItems(items))
buttons.addEventListener('click', (e) => onButtonClick(e, items))
}
loadItems()
.then(items => {
console.log(items);
displayItems(items)
setEventListeners(items)
})
.catch(console.log)
</script>
</head>
<body>
<!-- logo -->
<img src="./img/logo.png" alt="Logo" class="logo" />
<!-- buttons -->
<section class="buttons">
<button class="btn">
<img src="./img/blue_t.png" alt="tshirt" class="imgBtn" data-key="type" data-value="tshirt" />
</button>
<button class="btn">
<img src="./img/blue_p.png" alt="pants" class="imgBtn" data-key="type" data-value="pants" />
</button>
<button class="btn">
<img src="./img/blue_s.png" alt="skirt" class="imgBtn" data-key="type" data-value="skirt" />
</button>
<button class="btn colorBtn blue" data-key="color" data-value="blue">
Blue
</button>
<button class="btn colorBtn yellow" data-key="color" data-value="yellow">
Yellow
</button>
<button class="btn colorBtn pink" data-key="color" data-value="pink">
Pink
</button>
</section>
<!-- items -->
<ul class="items">
<li class="item">
<img src="./img/blue_p.png" alt="tshirt" class="item__thumbnail" />
<span class="item__description">male, large</span>
</li>
</ul>
</body>
</html>