Day 64: Refactoring code into functions

#100daysofcode #javascript

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)

    });
}