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

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay