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
Top comments (0)