[Ajax] 맥도날드에다가 데이터 넣기

여기 칸칸이에 사진 띄울 예정.

우선 html 최하단에 script 태그를 열어서

console 창에 잘 실행되는 지 강의들었던 예시 갖고와서 확인.

콘솔창에 잘 갖고와지는 거 확인되면 

내 데이터 갖고올 준비하기.

https://kku-git.github.io/Mcdonald_menu/product.json

   <script>
      $.get("https://kku-git.github.io/Mcdonald_menu/product.json").done(
        function (data) {
          console.log(data);
        }
      );
    </script>

 

내 데이터 넣어서 잘 나오나 확인.

---

HTML

      <!-- 정사각형 -->
      <div class="square-flex">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>
      <button id="more"></button>

CSS

/* 정사각형 */
.square {
  width: 375px;
  height: 375px;
  border: 1px solid $main_color;
  margin: 20px;
}

.square-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#more {
  width: 50px; /* 버튼의 너비 */
  height: 50px; /* 버튼의 높이 */
  background-image: url(img/plus.svg);
  background-color: transparent;
  border: none;
  outline: none;
  background-repeat: no-repeat;
  background-size: contain;
  display: block; // 이걸 해줘야 버튼이 중앙으로 감.
  margin: auto;
  margin-bottom: 13px;
}

하단에 버튼 달아줌.

버튼 누르면 넣어놨던 배열 뜨는거 확인 가능.

데이터의 시작점 - array

그 안 - object 데이터 9개

---

우선 대충 만든 square 을 수정해줘야할 거 같음.

이렇게 네모 칸 안에 쏙 넣게 하기 위해서 css 조정.

HTML 에다가 img 태그 추가해줌.

<div class="square-flex">
        <div class="square">
          <img src="img/banner1.jpg" alt="" />
        </div>
        <div class="square"></div>
        <div class="square"></div>
      </div>
      <button id="more"></button>

그리고 CSS 에서 img 에 width 와 height 를 부여해서 쏙 들어가게 하기

.square {
  width: 375px;
  height: 375px;
  border: 1px solid $main_color;
  margin: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}

이렇게 제목 가격 뜨게 html 하고 css 조정

  <!-- 정사각형 -->
      <div class="square-flex">
        <div class="square">
          <div class="overlay-wrap">
            <div class="overlay">
              <p>제목</p>
              <p>가격</p>
            </div>
          </div>
          <img src="img/banner1.jpg" />
        </div>
      </div>

/* 정사각형 */

.square-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .square {
    position: relative;
    width: 375px;
    height: 375px;
    border: 1px solid $main_color;
    margin: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .overlay-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    .overlay {
      color: white;
    }
  }
}

---

Script 로 html 생성

[JS] 자바스크립트로 html 태그 생성 (tistory.com)

[JS] 자바스크립트로 html 태그 생성

이거 참고해서 script 수정해주기

html 생성하는 법 (2) 에서 append 를 사용했다. 

$("#more").click(function () {
        $.get("https://kku-git.github.io/Mcdonald_menu/product.json").done(
          function (data) {
            data.forEach((a, i) => {
              var 템플릿 = `
              <div class="square">
                <div class="overlay-wrap">
                  <div class="overlay">
                    <p>${a.title}</p>
                    <p>${a.price}</p>
                  </div>
                </div>
                <img src="img/banner1.jpg" />
              </div>
            `;
              $(".square-flex").append(템플릿);
            });
          }
        );
      });

square 태그 갖고와서

forEach( array 배열일때만 사용) 문 사용해서 데이터를 갖고와줬다.

---

고쳐야할 점

누르면 한꺼번에 와다다 나옴. 그리고 버튼 누르면 누를 수록 계속 나온다.

 

이 부분은 두 번째 글에서 다시 다루도록 할 예정 

+ 사진도 수정해서 글 올릴 것