JS 이용한 미니 쇼핑 게임입니다.
Javascript 의 fetch API 를 활용하여 데이터 바인딩 하였다.
티셔츠 바지 치마 버튼 과 색상 버튼 에 클릭이벤트를 추가하여 옷의 종류와 색상을 filtering 기능 구현 하였습니다
// Fetch the items from ths JSON file
function loadItems() {
return fetch("/data/data.json")
.then((response) => response.json())
.then((json) => json.items);
}
1. 로드 아이템 함수를 생성
우리는 패치를 통해 데이터를 받아 올거야
데이터를 받아온 것이 성공이면 json 형태로 반환 한다.
그리고 json안의 items 리턴한다.// Update the list with the given items 아이템 접근
function displayItems(items) {
const inputText = document.querySelector(".items");
inputText.innerHTML = items.map((item) => createHTMLString(item)).join("");
}
1. 디스플레이 아이템 함수 만듦
2() items 라는 아이템스 받아오기
부모 컨테이너에 추가 해야 하기 때문에 컨테이너 변수 정의하기
3. const container . 문서 . 접근해. itmes 라고 정의 함
4. container. innerHTml를 이용해 우리가 받아온 items 를 li 그룽
/ container innerHTML를 이용해 우리 받아온 (items) 을 li 그룹으로 만들어서 container에 추가해줄거야
html => <ul class="items"></ul> 여기 접근
items 데이터 배열의 가각의 해당하는 아이템들을 html 요소로 container.innerHTML
li 태그로 변환 하는 배열을 만들 거임 그래서 map 사용 : 한 가지 배열에서 다른 형태 배열을 변환하는 것 매핑
creatHTMLString(itme)).join(""); 함수 만든다.
creatHTMLString(itme)) li 태그 가 들어있는 html 문자열로 만들기 때문에
각각의 아이템들을 creatHTMLString 함수를 사용 해 items li 요소로 문자열로 변환 할 것임
join사용 해 한가지의 문자열로 종합 해 볼 것이다.
// items.데이터 배열을 각각의 해당된 아이템들을 html 요소로 > li태그로 변환 하는 배열로 만들거야 그러기 위해
// 한가지 배열 형태에서 다른 형태 배여롤 변환하는 거 매핑하는 것을 맵을 이용하면 까능
// map (items => creatHTMLString(items)) creatHTMLString 함수로 만든다
// creatHTMLString(items) li 태그가 들어있는 html 문자열 로 만들기 때문에
// 각각의 아이템들을 items => creatHTMLString 함수를 이용해서 item li요소로 문자열로 변환해 볼 거다
// 함수를 정의한다 creatHTMLString (item) ()각각의 아이템을 받아와서 인자로
// 이 아이템들을 각각의 li 태그로 만들면 된다
// return ` ` 백틱 기호를 사용해 문자열을 리ㅊ턴할거다 [문자열 스트링]]
// 아이템이 있는 이미지 경로는 ${item.image} type/ gender / size 해당하는 li를 만들 수 있다
// join 를 사용해 한가지의 문자열로 종합 해볼 것이다..
리턴 li 계속 반복되서 문자열로 변환 할 건대 이렇ㄱ ㅔ3. 번째
주어진 데이터 항목에서 HTML 목록 항목 만들기
// Create HTML list item from the given data item//
function createHTMLString(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>`;
}
json.items 을 전달받아 아래 작업을 수행
그러면 creatHTMLString 함수만든다 (정의 )
() 안에 items 인자 값을 받아오고 => 각 각의 아이템들을 받아와서 인자로 각각의 li 태그로 만들면 된다.
return 백틱 기호를 사용해 class = item 을 문자열을 (리턴)반환 할 것 . [문자열 string]
items image 경로는 ${item.image} alt ~ {itme.type}
<span> ${item.gender} , ${item.size} 4. handle button event
버튼을 클릭시 발생하는 함수 정의
function onButtonClick(event, items) {
const dataset = event.target.dataset;
const key = dataset.key;
const value = dataset.value;
const filterData = items.filter((item) => item[key] == value);
displayItems(filterData);
}
만약 key: color, value: blue 라면 item 에서 item.color == blue 인것만 filter된다.
event는 Event인터페이스는 DOM에서 일어나는 이벤트를 나타낸다.
event자체에는 모든 이벤트에 공통적인 속성과 메서드가 포함되어 있다.
event.target은 이벤트가 전달되는 객체(대상)를 반환한다.
변수 3가지를선언
dataset/ key 키/ value 값
이벤트 타켓 > 이벤트가 전달되는 객체를 반환 한다,
조건문
키가 == null 이거나 value 가 null 일때 리턴 해라
디스플레이 아이템() 이용해 해당하는 키와 벨류
데이터만 보여줄 ㅜ수 있도록 만들면 된다
우리가 배열에서 어떤 특정한 데이터만 뽑아와서 새로운
작은 단위의 배얄을 만들떄 ~~ filter를 사용한다, main point
(item 아이템에 있는 => itme[key])아이템의 object객체 키 값추출
object 는 배열처럼 키를 이용해서 데이터에 접ㄱ근이 가능하다
객체 item 안에 [배열key]값이 === 내가 원하는 value 가 똑같은 아이들만 ==>displayItems 전달해줘5번쨰 set 이벤트리스너 함수 (아이템스 인자 받는다 )
// 5. setEvent
function setEventListeners(items) {
const logo = document.querySelector(".logo");
const buttons = document.querySelector(".buttons");
logo.addEventListener("click", () => displayItems(items));
buttons.addEventListener("click", () => onButtonClick(event, items));
}
버튼이 클릭되면 처리 할 수있도록 event 가 발생한 아이를 () 인지로 전달해주고 event , items 도 전달해준다 }
이벤트를 처리하는 함수는 on을 붙여 사용 함 버튼을 클릭했을 때 처리하는 함수구나 ~!
( 이벤트, 아이템) 들을 전달 받아서 / 이제 버튼이 클릭 되었을 때 setEventLisnter를 처리를 여기서 해볼 거여
버튼이 클릭이면 그 정보들을 items 필터 할 것 displayItems호출해서 필터된 아임ㅌ템들을
/ 핸들링 이벤트 setEventLisnter 함수 만들기
로고, 번튼을 const 변수 정의를 해야한다
const logo = document.querySelector('.logo');
const buttons = document.querySelector(".buttons");
/
하나하나의 한곳에서 만 이벤트 핸들링을 만들어줘야한다
이벤트를 처리하는 방법은 on을 시작해 붙여준다 onButtonClick
items 를 전달 ㅂ받아서
logo.addEventListener("click", () => displayItems(items));
클릭햇을 때 동작 할 수 있도록 정의해볼 것 입니다.addEventListener
logo 가 클릭이 되면 전부다 보여줘 displayItems을 이용해서 로고가선택되면 모든 아이템들이 선택 할수 있도록 만들어준다
/
/
buttons.addEventListener("click", (event) => onButtonClick(event, items));
버튼 이 클릭이되면 전부 다 보여줘 onButtonClick 버튼이 클릭되면 이벤트를 처리 할 수 있도록 event 이벤트가 발생한 아이을
인자로 전달해주고 (event, items) items 도 전달해준다/
우선 로고와 버튼스 요소를 정의 해야한다
컨테이너 자체를 등록 이벤트 위임 (' ') 하나하나의 이벤트를 등록하는 것 보다
팀들이 있는 컨테이너 한곳에서 이벤트 리스너를 등록해서 한곳에서 핸들링 하는 것
부모에게 준다 ㅠbuttons↘
6번쨰 loadItem 동적
// main 동작
loadItems()
.then((items) => {
displayItems(items);
setEventListeners(items);
})
.catch(console.log);
loadItems를 실행하고 items를 반환한다.
이후 displayItems, setEventListeners 를 실행시킨다