DEV Community

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

Posted on

1 2

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

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay