I refactored the web app javscript code into functions.
Function to get current weather forecast
async function getDaysForecast(typedString){ await axios(`https://api.openweathermap.org/data/2.5/weather?q=${typedString}&APPID=`, { "method": "GET" }) .then(async response => { let data = response.data const lat = data.coord.lat const lon = data.coord.lon console.log(data); displayDaysForecast(data) getWeeksForecast(lat, lon) }) .catch(err => { console.log(err); }); }
Function to display current weather forecast
function displayDaysForecast(data) { const city = document.querySelector('.city'); city.textContent = `${data.name},` const country = document.querySelector('.country'); country.textContent = data.sys.country let icon = data.weather[0].icon const img = document.querySelector('#weatherIcon'); img.setAttribute('src', `http://openweathermap.org/img/wn/${icon}@2x.png`) const temp = document.querySelector('.degrees') temp.textContent = `${Math.round(data.main.temp - 273.15)}°`; const weather = document.querySelector('.weather'); weather.textContent = data.weather[0].description const humidity = document.querySelector('#humidityRate') humidity.textContent = `${data.main.humidity}%` const cloudRate = document.querySelector('#cloudRate'); cloudRate.textContent = `${data.clouds.all}%` const windSpeed = document.querySelector('#windSpeedRate'); windSpeed.textContent = `${data.wind.speed} m/s` const pressureRate = document.querySelector('#pressureRate'); pressureRate.textContent = `${data.main.pressure} hPa` }
Function to get the weekly weather forecast
async function getWeeksForecast(lat, lon) { await axios(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=hourly,minutely,current&appid=`, { "method": "GET" }) .then(response => { let data = response.data console.log(data) displayWeeksForecast(data) }) .catch(err => { console.log(err); }); }
Function to display the weekly weather forecast
function displayWeeksForecast(data) { clearPlaceholder() 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 = 'next' 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 64
Top comments (2)
Maybe you should have written a function that returns the correct spelling of function and called that each time you wanted to write function. ;-)
😂😂... I definetly will.