Forecast

const icons = {
    'Sunny': '&#x2600', // ☀
    'Partly sunny': '&#x26C5', // ⛅
    'Overcast': '&#x2601', // ☁
    'Rain': '&#x2614', // ☂
    'Degrees': '&#176' // °
}


async function attachEvents() {
    document.getElementById('submit').addEventListener('click', getWeatherInfo);
}

async function getWeatherInfo() {
    const inputLocation = document.getElementById('location').value;

    const response = await fetch(`http://localhost:3030/jsonstore/forecaster/locations`);
    const result = await response.json();

    const info = result.find(x => x.name === inputLocation);
    createForecaster(info.code);

}

async function createForecaster(code) {
    const currentSection = document.getElementById('current')
    const forecastContainer = document.getElementById('forecast')
    const upcomingContainer = document.getElementById('upcoming')
    const urlToday = `http://localhost:3030/jsonstore/forecaster/today/${code}`;
    const urlUpcoming = `http://localhost:3030/jsonstore/forecaster/upcoming/${code}`;

    const responseToday = await fetch(urlToday);
    const resultToday = await responseToday.json();

    const responseUpcoming = await fetch(urlUpcoming);
    const resultUpcoming = await responseUpcoming.json();

    forecastContainer.style.display = 'block';
    const todayHTMLTempl = createToday(resultToday);
    currentSection.appendChild(todayHTMLTempl);

    const upcomingHTMLTemp = createUpcoming(resultUpcoming);
    upcomingContainer.appendChild(upcomingHTMLTemp);

}

function createUpcoming(data) {
    const container = document.createElement('div');
    container.classList.add('forecast-info');

    data.forecast.forEach(data => {
        const spanHolder = generateSpans(data);
        container.appendChild(spanHolder);
    });

    return container;
}

function generateSpans(data) {
    const { condition, high, low } = data;
    const spanHolder = document.createElement('span');
    spanHolder.classList.add('upcoming');

    const iconSpan = document.createElement('span');
    iconSpan.classList.add('symbol');
    iconSpan.innerHTML = icons[condition];

    const tempSpan = document.createElement('span');
    tempSpan.classList.add('forecast-data');
    tempSpan.innerHTML = `${low}${icons['Degrees']}/${high}${icons['Degrees']}`;

    const conditionSpan = document.createElement('span');
    conditionSpan.classList.add('forecast-data');
    conditionSpan.textContent = condition;

    spanHolder.appendChild(iconSpan);
    spanHolder.appendChild(tempSpan);
    spanHolder.appendChild(conditionSpan);

    return spanHolder;

}

function createToday(data) {
    const { condition, high, low } = data.forecast;

    const conditionContainer = document.createElement('div');
    conditionContainer.classList.add('forecasts');

    const conditionIconSpan = document.createElement('span');
    conditionIconSpan.classList.add('condition', 'symbol');
    conditionIconSpan.innerHTML = icons[condition];

    const conditionSpan = document.createElement('span');
    conditionSpan.classList.add('condition');

    const nameSpan = document.createElement('span');
    nameSpan.classList.add('forecast-data');
    nameSpan.textContent = data.name;

    const tempSpan = document.createElement('span');
    tempSpan.classList.add('forecast-data');
    tempSpan.innerHTML = `${low}${icons['Degrees']}/${high}${icons['Degrees']}`;

    const conditionTxtSpan = document.createElement('span');
    conditionTxtSpan.classList.add('forecast-data');
    conditionTxtSpan.textContent = condition;

    conditionSpan.appendChild(nameSpan);
    conditionSpan.appendChild(tempSpan);
    conditionSpan.appendChild(conditionTxtSpan);

    conditionContainer.appendChild(conditionIconSpan);
    conditionContainer.appendChild(conditionSpan);

    return conditionContainer;
}

attachEvents();