Как искать giphy, основываясь на сводке погоды? - PullRequest
Новая
       36

Как искать giphy, основываясь на сводке погоды?

0 голосов
/ 03 апреля 2019

Я использую Darksky-API для погоды и Giphy-API для картинок. Мое приложение должно искать gif в теме погоды.

Пример: когда идет дождь, он должен искать Giphy с «дождливым» в описании.

Теперь я использую innerHTML из API погоды для поиска gif, но мой giphy-api может выполнять поиск только при полной загрузке погоды. В противном случае нет поискового термина и он не может искать gif.

Надеюсь, кто-нибудь может мне помочь, я застрял на пару дней.

`` 

    <div id="horloge">
        <div id="scherm">
                <div id="container"></div>
    <h2>The weather is</h2>

    <h1></h1>
    <div id="weather">
    </div>

</div>
    </div>


        class Weather{
        constructor(API_KEY){
            this.API_KEY = API_KEY;
            this.initialize();
        }

        initialize(){
            this.getMyLocation();
            //console.log(navigator);
        }

        getMyLocation(){

            navigator.geolocation.getCurrentPosition(position => { //function(position)

            console.log(position);

            let lat = position.coords.latitude;
            let lng = position.coords.longitude;
            this.getWeather(lat,lng);

        }, err => {
            console.log("error");
        });
        }

        getWeather(lat,lng){

            let url = `https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/${this.API_KEY}/${lat},${lng}?units=si`;
            fetch(url)
            .then(response =>{
                return response.json();
            })
            .then(json=>{
                console.log(json);
                let temp = document.getElementById('weather');
                temp.innerHTML = json.currently.summary;
                document.getElementById('weather').append(temp);
                return this.temp;

            }) 
            let newapp = new Giphy('yxRKm3nflyaTUlEIMhRfPMK4FmqdqIun');    
        }
    }
    let app = new Weather('fb03a92b4a767e8e67a5662226ddb892');//API KEY

    /// foto's--------------------------------

    class Giphy{

        constructor(API_KEY_GIPHY){
            this.API_KEY_GIPHY = API_KEY_GIPHY;
            this.initialize();
        }

        initialize(){
            this.getGiphy();
        }

        getGiphy(){

        let search = document.getElementById('weer').innerHTML;


        let urlGiphy =`http://api.giphy.com/v1/gifs/search?q=${search}&api_key=${this.API_KEY_GIPHY}&limit=1&lang=en`;

        fetch(urlGiphy)

        .then(response =>{
        return response.json();
        })

        .then(json=>{
        console.log(json);

        //zet het item in een div
        let giphy = document.createElement("div");

                //krijg de eerste afbeelding terug uit de array
                let id = json.data[0]["id"];

                //test
                console.log("zoekterm is"+ search);

                giphy.innerHTML = `<img src=https://media0.giphy.com/media/${id}/giphy-preview.webp height="100">`;
                document.querySelector("#container").appendChild(giphy);

        });

    }

        }

https://codepen.io/abuijzen/pen/RONRPV

...