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 !! |