明日学習キャンプ10日目TIL

📢TMI

今日外の雨がしとしとと降って、天気apiはみんなに表情を見せることを実現して、rain、cloudだけあります.早く晴れた日に帰って太陽のアイコンを見たいです.

✍TIL(Today I Learned)

外部api天気api実現

位置によって異なる情報を撮影するので、ユーザー座標を撮影できます.

    var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };

    function handleGeoSucc(position) {
        console.log(position);
        const latitude = position.coords.latitude;  // 경도
        const longitude = position.coords.longitude;  // 위도
        const coordsObj = {
            latitude,
            longitude
        }

        getWeather(latitude, longitude);
    }

    function handleGeoErr(err) {
        console.log("geo err! " + err);
    };

    navigator.geolocation.getCurrentPosition(handleGeoSucc, handleGeoErr, options);

コンソール上の私の位置について

私の位置情報が正常に撮影され、座標に値を割り当て、上のgetWeather(latitude,longitude)にアップロードされました.天気情報コードとマージ

  function getWeather(lat, lon) {
        fetch(
            `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=내키값&units=metric`
        )

コンソールに天気情報のコードを作成します

  .then(function (response) {
                return response.json();

            })
            .then(function (json) {

                console.log(json);
                let $country = json.sys.country;
                let $temp = json.main.temp;  //현재온도
                let $place = json.name;   // 사용자 위치
                let $humidity = json.main.humidity; //강수량
                let $sky = json.weather[0].main;

                let $temp_max = json.main.temp_max;//최고온도
                let $temp_min = json.main.temp_min;//최저온도
                let icon = json.weather[0].icon;//날씨아이콘
                let $wId = json.weather[0].id; // 날씨 상태 id 코드
                let $icon = 'http://openweathermap.org/img/w/' + icon


                console.log($temp, $place, $humidity, $sky,$wId)

                // $('.temptemp').append(temp + "°C");


                $('.csky').append($sky);
                $('.temp').append($temp + "°C");
                $('.humidity').append($humidity + "%");
                // $('.place').append($place);
                //  $('.place').append('/'+$country);
                $('.temp_max').append($temp_max + "°C");
                $('.temp_min').append($temp_min + "°C");
                $('.icon').append('<img src=" ' + $icon + '.png ">');

htmlファイルに値を付けて表示します!

フルスクリーン

👁‍🗨TIF(Today I Feel)

今日は外部apiを使うので考えて天気apiを持ってくることにしました.他のapiのほとんどの方法と同じように、キーを表示する必要があります.
確かに、外部apiを使うため、コードを書くのにいくつかの困難に直面し、3つのサンプルコードを見て、5時間ほど練習して、そこから私の欲しい情報を抽出しました...だんだん成型して、私が挿入したのではないと思って、興奮してつづって、すべての人のコードはすべて異なっていますが、しかし望みの目標は同じで、だから修正して完成しました.このように完成した書類を見て、私は本当に喜んでいます.やった!試行錯誤を重ねて、一つ一つ作っていくので、一つ一つのコードの意味がよくわかります!

📢 To-do list

1.明日は残りとコメントがあるので、最終版を提出します
2.天気apiと決済機能を組み合わせた設計