View difference between Paste ID: rrk1813N and YcXCZWy1
SHOW: | | - or go back to the newest paste.
1
(() => {
2
3
    const BASE_URL = "https://judgetests.firebaseio.com/locations.json";
4
    const WEATHER_URL = "https://judgetests.firebaseio.com/forecast/{status}/{code}.json";
5
6
    const elements = {
7
        locationInput: document.querySelector("#location"),
8
        button: document.querySelector("#submit"),
9
        notificationHeading: document.querySelector('h1.notification'),
10
        currentDiv: document.querySelector('#current'),
11
        upcomingDiv: document.querySelector('#upcoming'),
12
        forecastWrapper: document.querySelector('#forecast')
13
    };
14
15
    const weatherSymbols = {
16
        "s": "☀",
17
        "p": "⛅",
18
        "o": "☁",
19
        "r": "☂",
20
        "d": "°"
21
    };
22
23
    const errorHandler = (e) => {
24
        console.dir(e);
25
        elements.notificationHeading.textContent = e.message;
26
    };
27
28
    const jsonMiddleware = (r) => r.json();
29
30
    elements.button.addEventListener("click", getLocationValue);
31
32
    function getLocationValue() {
33
34
        const location = elements.locationInput.value;
35
36
        fetch(BASE_URL)
37
            .then(jsonMiddleware)
38
            .then((data) => {
39
                const { name, code } = data.find((o) => o.name === location);
40
41
                const CURRENT_TODAY_URL = WEATHER_URL.replace('{status}/{code}', `today/${code}`);
42
                const CURRENT_UPCOMING_URL = WEATHER_URL.replace('{status}/{code}', `upcoming/${code}`);
43
44
                Promise.all([
45
                    fetch(CURRENT_TODAY_URL).then(jsonMiddleware),
46
                    fetch(CURRENT_UPCOMING_URL).then(jsonMiddleware)
47
                ])
48
                    .then(showWeatherLocation)
49
                    .catch(errorHandler)
50
            })
51
            .catch(errorHandler)
52
    }
53
54
    function showWeatherLocation([todayData, upcomingData]) {
55
56
        const { condition, high, low } = todayData.forecast;
57
58
        let forecastsDiv = createHTMLElement('div', ['forecasts']);
59
        let symbolSpan = createHTMLElement('span', ['condition', 'symbol'], weatherSymbols[condition[0].toLowerCase()]);
60
        let conditionSpan = createHTMLElement('span', ['condition']);
61
62
        let forecastFirstDataSpan = createHTMLElement('span', ['forecast-data'], todayData.name);
63
64
        let degreesInfo = `${low}${weatherSymbols.d}/${high}${weatherSymbols.d}`;
65
        let forecastSecondDataSpan = createHTMLElement('span', ['forecast-data'], degreesInfo);
66
67
        let forecastThirdDataSpan = createHTMLElement('span', ['forecast-data'], condition);
68
69
        conditionSpan.appendChild(forecastFirstDataSpan);
70
        conditionSpan.appendChild(forecastSecondDataSpan);
71
        conditionSpan.appendChild(forecastThirdDataSpan);
72
73
        forecastsDiv.appendChild(symbolSpan);
74
        forecastsDiv.appendChild(conditionSpan);
75
76
        elements.currentDiv.appendChild(forecastsDiv);
77
        elements.forecastWrapper.style.display = "block";
78
    }
79
})();
80
81
function createHTMLElement(tagName, classNames, textContent) {
82
    let element = document.createElement(tagName);
83
84
    if (classNames) {
85
        element.classList.add(...classNames);
86
    }
87
88
    if (textContent) {
89
        element.textContent = textContent;
90
    }
91
92
    return element;
93
}
94
95
96
// TODO: AWAIT ALTERNATIVE !!