스파르타 코딩클럽

2022.01.01

dev_swH 2022. 1. 1. 16:27

JQuery

화면에 입력시키는 건 $('#id').append(어쩌구)

지워지는 건 $('#id').empty()

 

-----------------------------------------------------------

숙제 과정

이번 주 숙제는 저번의 마사지볼 판매 페이지에 환율 OpenAPI 넣기!

JQuery와 Ajax를 완벽히 이해했을 리는 없겠지만 생각보다 수월하게 따라했던 이번 주.

 

일단 div로 영역을 잡고, '달러-원 환율 : '까지는 적었는데

그 다음 환율이 들어가야 할 부분은...얘만 설정영역을 어떻게 잡지? 하다가 그냥 span태그를 쓰기로 했다.

(사실 span이 뭔지도 잘 모르면서 쓰던 거 일단 쓰고 보기)

span태그도 id를 줄 수 있나? 검색해보니까 style 말고도 id와 class 모두 줄 수 있더라. 오케이.

id 만들어주고 script로 가서 수업 때 배운 대로

$(document).ready(function () {
    q1();
});

function comp() {
    alert('주문이 완료되었습니다.')
}
function q1() {
  $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rate",
        data: {},
        success: function (response) {

까지 넣었다.

수업 듣는 과정에서 몇 차례 실수를 겪었던 바,

이제는 한 번에 코드를 입력하려 하지 말고 크롬 콘솔창에서 단계별로 확인하는 습관을 들이라는 조언을 따르기로 했다.

console.log(response)로 값이 잘 나오는지 확인.

그 다음 let dol = response['rate'] 라고 선언하고 콘솔창에서 다시 수치만 나오는지 확인.

 

이틀 지났다고 그새 배운 내용을 까먹어서

span태그 사이에 J쿼리 ${dol}을 바로 넣었더니 수치로 안 나오고 '${dol}'이라는 문자 그대로 나왔다 하하.

음! 이거 아니구나!

수업 때 했던 파일 코드들을 뒤져보고 temp_html을 선언해서 .append 하라는 것을 확인.

let temp_html = `${dol}`
$('#money').append(temp_html)

새로고침했더니 무사히 나왔다!

마무리로 잡아놓은 영역에 style을 입혀 색깔과 여백을 설정해주면 끝~.

 

이번에도 전체 태그를 붙여놓기로.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>기획서 만들기</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        .image {
            width: 500px;
            height: 300px;
            margin: 40px auto 20px auto;
            background-image: url("https://cafe24img.poxo.com/andar01/web/product/extra/big/202010/4b33986cbec184906a16aeec5c256d65.jpg");
            background-size: cover;
            background-position: center;
        }
        .exp {
            width: 500px;
            margin: auto;
        }
        .more_exp {
            font-size: 15px;
            margin: 15px auto 10px auto;
        }
        .button {
            width: 100px;
            margin: 25px auto auto auto;
        }
        .dollar {
            color: blue;
            margin: auto auto 20px auto;
        }
    </style>
    <script>
        $(document).ready(function () {
            q1();
        });

        function comp() {
            alert('주문이 완료되었습니다.')
        }
        function q1() {
          $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let dol = response['rate']
                    let temp_html = `${dol}`
                    $('#money').append(temp_html)

                }
            })
      }

    </script>
</head>

<body>
<div class="image"></div>
<div class="exp">
    <h1><span style="font-weight: bold;"> 마사지볼 </span> <span style="font-size: 17px;">가격 : 4,000원 / 개</span></h1>
    <div class="more_exp">
        작지만 단단한 마사지볼! 마사지볼은 우리 몸에 뭉쳐있는 근육들을 풀어주고 혈액이 순환되도록 도와줍니다.
        운동과 병행하면서 꾸준히 마사지를 하면 더욱 더 건강해질 수 있습니다!
    </div>
    <div class="dollar">
        달러-원 환율 : <span id="money"></span>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주문자 성함</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">옵션</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
            <option selected>-- 옵션 및 수량을 선택하세요. --</option>
            <option value="1">단일볼 1개</option>
            <option value="2">땅콩볼 1개</option>
            <option value="3">단일볼 1 + 땅콩볼 1</option>
        </select>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="button">
        <button onclick="comp()" type="button" class="btn btn-primary">주문하기</button>
    </div>
</div>
</body>

</html>

 

룰루랄라 해설 영상을 보러 갔더니 튜터님은

 

$.ajax({

type: "GET",

url: "http://spartacodingclub.shop/sparta_api/rate",

data: {},

success: function (response) {

let now_rate = response['rate'];

$('#now-rate').text(now_rate); } })

 

<div class="item-desc">

<h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1>

<p>이 양초는 사실 특별한 힘을 지니고 있어요!</p>

<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>

</div>

 

이렇게 하셨더라.

text도 배웠는데......까먹었네........응........

저작자표시

'스파르타 코딩클럽' 카테고리의 다른 글

2022.01.06  (0) 2022.01.06
2022.01.05  (0) 2022.01.05
2022.01.03  (0) 2022.01.03
2022.01.02  (0) 2022.01.02
2021.12.31  (0) 2021.12.31
2021.12.30  (0) 2021.12.30
2021.12.29  (0) 2021.12.29
2021.12.28  (0) 2021.12.28

'스파르타 코딩클럽'의 다른글

  • 현재글2022.01.01

관련글

티스토리툴바