Clone coding - "shopping mall" review

jjub0217·2021년 11월 21일
0

Studies - Dream coding

목록 보기
8/8
post-thumbnail
<!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>
profile
프론트엔드 개발자가 되기 위해 열심히 달리고 있는 꼬꼬마개발자

0개의 댓글