<!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>
// 이 javascript 파일이 컴파일링 되면 loadItems() 함수( json 파일을 컴파일링 해서 아이템을 전달 ) 를 실행시킬 것이다.
// json 파일을 읽어오는데 시간이 걸리기 때문에, 그냥 item 을 리턴하는게 아니라 Promise를 리턴하도록 만들것이다.
// 그 promise 가 성공하면, 즉 데이터를 받아오는것을 성공하면 (=.then) response 라는 객체를 전달해준다.
// items 를 받아올거고,(= items =>{} )
// 아니면 catch 를 사용해서 에러나 경고 문구를 보여주도록(=.catch) 만들것이다.
// item 들을 동적으로 받아와서, promise 가 리턴되고, promise 가 성공적으로 값을 전달해주면, 전달받은 items 을 html에 보여주고
// 이벤트로 인해서 버튼을 클릭했을때 필터링 해주는 함수
// main
// json 파일로부터 item 을 동적으로 받아오는 함수.
function loadItems() {
return fetch('data/data.json') // fetch 안에는 json 파일이 있는 경로를 넣어서 데이터들(items 들)을 반환하려한다.
.then(response => // items들을 반환하려는걸 성공하면, response 라는 객체가 전달되는데, response 객체안에는 items 들이 들어있는 body가 있다.
response.json() // 그 response 의 body 를 json 으로 변환시킬것이다.
)
.then(json => json.items) // json 으로 변환시킨 items 들이 들어있는 body( items 들의 배열 )에서 그 items 들을 반환
}
// html 요소로 변환해서 items 들을 html로 표기가 되도록 해주는 함수
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); // MouseEvent
console.log(e.target); // <img src /> : 내가 클릭한 이미지.
console.log(e.target.dataset); // DOMStringMap { key: , value: }
console.log(e.target.dataset.key); // type
console.log(e.target.dataset.value); // tshirt
console.log(items);
// item : {type: "pants", gender: "male", size: "small", color: "blue", image: "./img/pink_t.png" size: "large" type: "tshirt" }
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) // item[type] : ( data-key ) 의 value === data-value 의 값
displayItems(filtered);
}
function setEventListeners(items) {
const logo = document.querySelector('.logo');
const buttons = document.querySelector('.buttons');
// logo 가 선택되면 item 들이 html 로 표기가 되도록 해주는 displayItems 함수 실행
logo.addEventListener('click', () => displayItems(items))
// buttons(버튼들 묶음) 가 선택되면 item 들이 필터링 되는 함수 실행
buttons.addEventListener('click', (e) => onButtonClick(e, items))
}
loadItems()
.then(items => { // items(배열) 가 다 받아지면, 그 items 를 displayItems() 함수(html 에 item 들을 보여주는 함수) 실행
console.log(items);
displayItems(items) // 받아온 items 를 함수에 전달
setEventListeners(items) // 받아온 item 을 이용해서 버튼을 누르면 필터링 해야 한다.
})
.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>
프론트엔드 개발자가 되기 위해 열심히 달리고 있는 꼬꼬마개발자