슬기로운 AI생활 - 집요한 PM 에릭

띵동코딩 14주차 - JS&Jquery&Fetch 본문

코딩공부

띵동코딩 14주차 - JS&Jquery&Fetch

집요한 기획자 에릭 2022. 9. 5. 22:17

1. 이번 주 느낀 점

Javascript 특유의 문법이 아직은 어렵지만 조금씩 적응하고 있는 중이다.

Java를 사용할 수 있게 되면서 할 수 있게 된 것 중 가장 큰 점은,

API를 활용해서 많은 웹 사이트를 만드는 법을 알아가고 있다는 것이다.

물론 아직 구조가 익숙치 않지만, 다음 시간까지 해 보면서 웹 사이트를 하나 구축하는 목표에 조금씩이라도 가까워지면 좋을 거 같다.

 

2. 이번 주 코드

 

스스로 해보기 : 오늘의 점심 웹페이지

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩 - 오늘은 뭐 먹지?</title>
    <style>
        .wrap {
            width: 500px;
            margin: 20px 20px;
        }
        .wrap >div {
            padding-top: 30px;
        }
        img {
            margin-top : 20px;
            display: block;
        }
    </style>
    <script>
        function lunch() {
            let url = 'https://foodish-api.herokuapp.com/api/'
            fetch(url).then(res => res.json()).then((data) => {
                let imgurl = data['image']
                $('#mylunch').attr('src',imgurl)
            });
        }
    </script>
</head>

<body>
    <div class="wrap">
        <button onclick="lunch()">오늘의 점심 메뉴 추천</button>
        <img id="mylunch" src="https://foodish-api.herokuapp.com/images/dosa/dosa10.jpg" width="300">
    </div>

</body>

</html>

한 걸음 더 : 국가별 코로나 확진자 정보 불러오기

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩- Jquery + Fetch</title>
    <style>
        .wrap {
            width: 500px;
            margin: 20px 20px;
        }
        .wrap > div{
            padding-top: 10px;
        }
        .covid {
            color: red;
        }
        .safe {
            color: blue;
        }
    </style>
    <script>
        function covid() {
            let inputCountry = $('#country').val();
            fetch(url).then(res => res.json()).then((data) => {
                for(let i =0; i<data.length; i++){
                    let country = data[i]['country'];
                    let active = data[i]['active'];
                    let temp_html = '';
                    if (inputCountry==country){
                        temp_html = `<li>${country} : 현재 확진자 :${active}</li>`;  
                        }
                    $('#covidCountry').append(temp_html);
                }

            });
        }
    </script>
</head>

<body>
    <div class="wrap">
        <button onclick="covid()">전 세계 코로나 정보</button>
        <div>
            <input id="country" placeholder="영어로 입력해주세요">
        </div>
        <ul id="covidCountry"></ul>
    </div>

</body>

</html>

'코딩공부' 카테고리의 다른 글

띵동코딩 16주차 : 할일 페이지 만들기(momentum 앱 참고)  (1) 2022.09.21
띵동코딩 15주차 : Netflix 클론코딩  (0) 2022.09.16
띵동코딩 13주차 개발일지 : Fetch 활용하기  (0) 2022.08.30
띵동코딩 12주차 개발일지 : Fetch 사용하기  (0) 2022.08.22
띵동코딩 11주차 개발 일지 : jquery와 Javascript  (0) 2022.08.20
'코딩공부' Related Articles more