DEV Community 👩‍💻👨‍💻

Cover image for Day 63: Fetching Icons from Open weather
Margaret W.N
Margaret W.N

Posted on

Day 63: Fetching Icons from Open weather

I worked on fetching icons from open weather to autoupdate my app.

<div class="left">
      <img id="weatherIcon" src="" alt="">
 </div>
Enter fullscreen mode Exit fullscreen mode
let icon = data.weather[0].icon
const img = document.querySelector('#weatherIcon');
img.setAttribute('src', `http://openweathermap.org/img/wn/${icon}@2x.png`)
Enter fullscreen mode Exit fullscreen mode

I also fetched the icons and data for the next seven days.

    await axios(`https://api.openweathermap.org/data/2.5/onecall?lat=33.441792&lon=-94.037689&exclude=hourly,minutely,current&appid=`,{
            "method": "GET"
        })
        .then(response=> {
            let data = response.data
            console.log(data)


            data.daily.forEach(day => {
                let icon = day.weather[0].icon

                const section = document.querySelector('.section3');
                const card = document.createElement('div')
                card.setAttribute('class','card')
                section.appendChild(card);

                const p = document.createElement('p')
                p.textContent = 'nextDay'
                card.appendChild(p)

                const innerCard = document.createElement('div')
                innerCard.setAttribute('class','innerCard')
                card.appendChild(innerCard)

                // const innerCard = document.querySelector('.innerCard')
                const img = document.createElement('img')
                img.setAttribute('src', `http://openweathermap.org/img/wn/${icon}.png`)
                innerCard.appendChild(img)

                const temp = document.createElement('p')
                temp.textContent = `${Math.round(day.temp.day - 273.15)}°`;
                innerCard.appendChild(temp)

                const weather = document.createElement('p')
                weather.textContent = day.weather[0].main
                innerCard.appendChild(weather)

            });

        })
Enter fullscreen mode Exit fullscreen mode

Day 63

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠