1. JQuery toggle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    function openclose() {
        $('#postingbox').toggle();
    }
</script>
<button onclick="openclose()">추억 저장하기</button>
<div class="mypostingbox" id="postingbox">

추억 앨범 코드에 위의 내용으로 추가,편집하면 “추억 저장하기” 버튼을 누르면, postingbox가 사라졌다 생겼다 함


추억-앨범-기본


추억-앨범-postingbox



2.JQuery val로 값 가져오기

<script>
    function makecard() {
        let image = $('#image').val();
        let title = $('#title').val();
        let content = $('#content').val();
        let date = $('#date').val();
            
        let temp_html = `
        <div class="col">
            <div class="card h-100">
                <img src="${image}"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">${title}</h5>
                    <p class="card-text">${content}</p>
                </div>
                <div class="card-footer">
                    <small class="text-body-secondary">${date}</small>
                </div>
            </div>
        </div>`;
        $('#card').append(temp_html);
    }
</script>

<div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <button onclick="openclose()">추억 저장하기</button>
</div>
<div class="mypostingbox" id="postingbox">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="image" placeholder="앨범 이미지">
        <label for="floatingInput">앨범 이미지</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="title" placeholder="앨범 제목">
        <label for="floatingInput">앨범 제목</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="content" placeholder="앨범 내용">
        <label for="floatingInput">앨범 내용</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="date" placeholder="앨범 날짜">
        <label for="floatingInput">앨범 날짜</label>
    </div>
    <div class="mybtn">
        <button onclick="makecard()" type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

해당하는 값에 id를 넣어서 val로 값을 가져온 후 해당 버튼에 함수를 넣어준다


val-값 앨범-카드-추가



3. 클라이언트 - 서버 개념 이해하기


서버 → 클라이언트: JSON 형식
클라이언트 → 서버: GET 요청


JSON파일은 딕셔너리 형태로 키-값 쌍으로 구성된 구조를 가짐.



4. Fetch

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

<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            fetch(url).then(res => res.json()).then(data => {
                console.log(data);
            })
        }
    </script>
</head>

<body>
    <button onclick="hey()">fetch 연습!</button>
</body>

</html>

fetch 함수를 통해 요청을 보내서 응답을 받고 콘솔에 데이터를 나타낸다


fetch-콘솔-데이터



5. Fetch함수를 이용해 서울시 미세먼지 정보 페이지 만들기

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

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        .bad {
            color: red;
        }
    </style>

    <script>
        function q1() {
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            $('#names-q1').empty();
            fetch(url).then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach(a => {
                    let gu_name = a['MSRSTE_NM'];
                    let gu_mise = a['IDEX_MVL'];

                    let temp_html = ``;
                    if (gu_mise > 40) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
                    }
                    else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
                    }
                    $('#names-q1').append(temp_html);
                })
            })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
        </ul>
    </div>
</body>

</html>

미세먼지 수치가 40이 넘으면 빨간색으로 표시


서울시-미세먼지-정보



6. 추억 앨범에 서울 날씨 추가

$(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/seoulair";
    fetch(url).then(res => res.json()).then(data => {
        let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
        $('#msg').text(mise);
    })
})

<div class="mytitle">
   <h1>나만의 추억앨범</h1>
   <p>현재 서울의 미세먼지 : <span id="msg"></span></p>
   <button onclick="openclose()">추억 저장하기</button>
</div>

$(document).ready는 페이지가 준비가 되면 자동으로 실행될 수 있도록 해줌



7.spartaflix에 현재온도 넣기

$(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
    fetch(url).then(res => res.json()).then(data => {
        let temp = data['temp'];
        $('#temperature').text(temp);
    })
})

<li><a href="#" class="nav-link px-2 text-white">현재기온 : <span id="temperature"></span>도</a></li>


spartaflix-현재-온도

참고