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)