loading...
Cover image for Day 63: Fetching Icons from Open weather

Day 63: Fetching Icons from Open weather

mtee profile image Margaret W.N ・1 min read

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

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

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)

            });

        })

Day 63

Posted on by:

mtee profile

Margaret W.N

@mtee

Developer | GADs 20 scholar | Diving into backend

Discussion

pic
Editor guide