스파르타코딩클럽 사전캠프 3주차 JQuery + fetch

저번에 만들었던 앨범에서 추억 저장하기 버튼을 누르면 기록하는 파트가 나오고 또 누르면 사라지는 기능을 구현해보고

기록하기 누르면 카드가 자동생성되는 거 해본다고 함

버튼 눌러서 Toggle로 열고 닫기 1

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

JQuery를 쓸 수 있게 <head>와 </head> 사이에 임포트한다

 <div class="mypostingbox" id="postingbox">

토글할 부분에 id를 부여한다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
        function openClose(){
            $('#postingbox').toggle();
        }

    </script>

이 상태에서 버튼을 클릭하면

이렇게 나타났다 없어졌다 한다!

새 Element 동적으로 붙이기

이제 기록하기 버튼으로 카드를 생성하는 걸 해본다

<button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>

기록하기 버튼에 onclick으로 함수 달고

함수를 구현하기 전에 연결이 되었는지 alert로 한 번 확인을 해 본다

function makeCard(){
            alert('연결 확인')

        }

값을 받아오기 위해 텍스트창마다 id를 부여한다

<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>

어떻게 동작하는지 알기 위해서 alert창을 띄워본다

 function makeCard(){
            let image = $('#image').val();
            alert(image);

        }

기록하기를 누르면 앨범 이미지에 넣은 값이 잘 출력됨

let temp = ``;

백틱 안에다가 넣을 요소를 전체 다 써줌

생성한 새 카드 붙일 곳에다 id를 부여함

$('#cards').append(temp)

해서 카드를 붙이면 됨

백틱 사이 변수는 ${}로 넣는다

<script>
        function openClose(){
            $('#postingbox').toggle();
        }
        function makeCard(){
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let temp = `
            <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>`;
            $('#cards').append(temp)
        }

    </script>

구글에서 아무 이미지 소스나 갖다 넣었다

짠 이미지와 내용이 나타나게 된다 떡볶이가 맛있어 보인다

왼쪽은 이미지 소스 주소 대신에 텍스트 대충 입력했더니 에러나서 엑박뜨고 있는 모습이다

but 새로고침하면 떡볶이는 사라지게 된다

왜냐하면 그냥 코드를 불러오는데 db연결도 안 되어있으니 그냥 붙이는 기능만 달린 백지상태로 불려와서..

버튼으로 Toggle해서 열고닫기 2

예전에 한 스파르타플릭스로 실습한다

<button onclick="togglebox()" type="button" class="btn btn-outline-light">영화 기록하기</button>

버튼에다가 클릭시 동작할 함수를 연결한다

<div id="postingbox" class="mypostingbox">

열고닫을 부분에다가 id를 부여한다

function togglebox(){
            $('#postingbox').toggle();
        }

영화 기록하기를 누르면 저 박스가 사라지게 된다

짠

스파르타플릭스에도 카드붙이기를 해봄

눌러서 동작시킬 버튼에 onclick 으로 함수를 연결한다

<button onclick="makeCard()" type="button" class="btn btn-danger">기록하기</button>

받아와야하는 항목들에 id값을 부여한다

<div id="postingbox" class="mypostingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
            <label for="floatingInput" style="color: white;">영화 이미지 주소</label>

        </div>

        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="title" placeholder="영화 제목">
            <label for="floatingInput" style="color: white;">영화 제목</label>
            

        </div>

        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01" style="background-color: transparent; color: white;">별점</label>
            <select class="form-select" id  ="stars">
                <option selected>별점선택</option>
                <option value="⭐">⭐</option>
                <option value="⭐⭐">⭐⭐</option>
                <option value="⭐⭐⭐">⭐⭐⭐</option>
                <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
                <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
            </select>

        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="comment" placeholder="추천 이유">
            <label for="floatingInput" style="color: white;">추천 이유</label>

        </div>

        <button onclick="hey()" type="button" class="btn btn-danger">기록하기</button>

    </div>

script에서 읽어옴, 데이터 이용해서 새 카드 만들어서 붙여주면 된다

function makeCard(){
            let image = $('#image').val();
            let title = $('#title').val();
            let comment = $('#comment').val();
            let stars = $('#stars').val();

            let temp = 
            `<div class="col">
                <div class="card">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${stars}</p>
                        <p class="card-text">${comment}</p>
                    </div>
                </div>
            </div>`;

            $('#cards').append(temp);
        }

기록하기를 누르면

알리오올리오 카드가 생겨있는 모습을 확인할 수 있다.

이제 외부 서버의 데이터를 가져오는 fetch를 해보겠다 함

일단 서울시 미세먼지 Json file을 읽어봄

서울시 미세먼지 Open API

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

이렇게 보인다

JsonVue → chrome extension 을 설치한다

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSONVue

Validate and view JSON documents

chrome.google.com

그 후에는 정리되어서 보이게 됨

Fetch 실습

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

버튼에 onclick으로 함수 연결하고

다음과 같은 함수를 만든다

<script>
        function hey() {
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            fetch(url).then(res => res.json()).then(data=>{
                console.log(data)

            });
        }
    </script>

버튼을 누르면 콘솔에 이렇게 뜨게 된다

코드를 이렇게 바꾸면

fetch(url).then(res => res.json()).then(data=>{
                console.log(data['RealtimeCityAir']['row'][0])

            });

data가 이렇게 생겼다

{ 아래에 있는 요소들을 []로 접근할 수 있는 것 같다

딕셔너리랑 유사하게 생김

반복문으로 fetch를 통해 data 표현하기

fetch(url).then(res => res.json()).then(data=>{
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach(element => {
                    console.log(element)
                });
            });

이렇게 하면 각 row별로 출력이 된다

특정 데이터만 선별적으로 표현하기

지역이랑 미세먼지 수치만 뽑아서 보여줌

function hey() {
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            fetch(url).then(res => res.json()).then(data=>{
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach(element => {
                    let gu_name = element['MSRSTE_NM'];
                    let gu_dust = element['IDEX_NM'];
                    console.log(gu_name,gu_dust);
                });
            });
        }

업데이트 버튼을 누르면 정보 업데이트

<button onclick="q1()">업데이트</button>
        <ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>

<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(element => {
                    let gu_name = element['MSRSTE_NM'];
                    let gu_dust = element['IDEX_NM'];

                    let temp = `<li>${gu_name} : ${gu_dust}</li>`;
                    $('#names-q1').append(temp);

                });
            });
        }
    </script>

조건문 넣어서 글자 색 바꾸기

글자 색을 빨간색으로 바꾼 후 넣으려면 넣을 html코드에 클래스를 만들고 클래스에 맞는 스타일을 미리 지정해두면 된다

let temp = `<li class = "bad">${gu_name} : ${gu_dust}</li>`;
                    $('#names-q1').append(temp);

.bad{
            color: red;
        }

여기에 조건문을 넣으면

let gu_name = element['MSRSTE_NM'];
                    let gu_dust = element['IDEX_MVL'];

                    let temp = ``;

                    if (gu_dust > 40) {
                        temp = `<li class = "bad">${gu_name} : ${gu_dust}</li>`;
                        
                        
                    }else{
                        temp = `<li class = "good">${gu_name} : ${gu_dust}</li>`;

                    }
                    $('#names-q1').append(temp);

이렇게 된다

버튼 눌러서 업데이트 대신 페이지 불러올때 자동 업데이트

$(document).ready()를 사용하면 된다. 페이지가 다 로딩되면 자동으로 fetch해줌

$(document).ready(function () {
            alert('안녕!');
        })

ready()에

alert랑 위랑 동일하게 미세먼지에 따라 색 바꾸는 코드 넣으면

$(document).ready(function () {
                alert('updated');
                let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
                fetch(url).then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach(element => {
                    let gu_name = element['MSRSTE_NM'];
                    let gu_dust = element['IDEX_MVL'];

                    let temp = ``;

                    if (gu_dust > 40) {
                        temp = `<li class = "bad">${gu_name} : ${gu_dust}</li>`;


                    } else {
                        temp = `<li class = "good">${gu_name} : ${gu_dust}</li>`;

                    }
                    $('#names-q1').append(temp);




                });
            });

                
            })

페이지 새로고침 시 alert창이 뜨고 ok를 누르면 그 다음 단계가 자동으로 진행이 된다

alert 출력함수 빼면 페이지 출력시 자동으로 업데이트 됨

저작자표시

'Developing > TIL(Develop)' 카테고리의 다른 글

스파르타코딩클럽 사전캠프 5주차 db연결 복습+ 배포 (1)	2023.09.27
스파르타코딩클럽 사전캠프 4주차 Firebase 연결 (0)	2023.09.25
스파르타코딩클럽 사전캠프 2-3주차 JQuery (0)	2023.09.14
스파르타코딩클럽 사전캠프 2주차 Javascript (0)	2023.09.14
스파르타코딩클럽 사전캠프 1주차 HTML+CSS (0)	2023.09.07

Greedeveloper

스파르타코딩클럽 사전캠프 3주차 JQuery + fetch

버튼 눌러서 Toggle로 열고 닫기 1

새 Element 동적으로 붙이기

버튼으로 Toggle해서 열고닫기 2

Fetch 실습

반복문으로 fetch를 통해 data 표현하기

특정 데이터만 선별적으로 표현하기

업데이트 버튼을 누르면 정보 업데이트

조건문 넣어서 글자 색 바꾸기

버튼 눌러서 업데이트 대신 페이지 불러올때 자동 업데이트

'Developing > TIL(Develop)' 카테고리의 다른 글

티스토리툴바

스파르타코딩클럽 사전캠프 3주차 JQuery + fetch

버튼 눌러서 Toggle로 열고 닫기 1

새 Element 동적으로 붙이기

버튼으로 Toggle해서 열고닫기 2

Fetch 실습

반복문으로 fetch를 통해 data 표현하기

특정 데이터만 선별적으로 표현하기

업데이트 버튼을 누르면 정보 업데이트

조건문 넣어서 글자 색 바꾸기

버튼 눌러서 업데이트 대신 페이지 불러올때 자동 업데이트

'Developing > TIL(Develop)' 카테고리의 다른 글

관련글

티스토리툴바