Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function attachEvents() {
- const [location, submitBtn, foreCast, currentWeather, upcomingWeather] =
- ["#location", "#submit", "#forecast", '#current', '#upcoming'].map(selector => document.querySelector(selector))
- const urlLocation = `http://localhost:3030/jsonstore/forecaster/locations`
- submitBtn.addEventListener('click', onLoad)
- const symbols = {
- 'Sunny': '☀', // ☀
- 'Partly sunny': '⛅',
- 'Overcast': '☁', // ☁
- 'Rain': '☔', // ☂
- 'Degrees': '°',
- }
- function onLoad() {
- fetch(urlLocation)
- .then(response => { return response.json() })
- .then(data => {
- let findLocation = data.find(x => x.name === location.value)
- if (findLocation == undefined) throw new Error();
- foreCast.style.display = 'block'
- let code = findLocation.code
- const urlToday = `http://localhost:3030/jsonstore/forecaster/today/${code}`
- const threeDaysUrl = `http://localhost:3030/jsonstore/forecaster/upcoming/${code}`
- fetch(urlToday)
- .then(response => response.json())
- .then(dataToday => {
- const forestDiv = createElement('div', '', 'forecasts')
- let spnSymbol = createElement('span', '', ('condition', 'symbol'), symbols[dataToday.forecast.condition]);
- const conditionSpan = createElement('span', '', 'condition');
- const span1 = createElement('span', dataToday.name, 'forecast-data');
- const span2 = createElement('span', '', 'forecast-data', `${dataToday.forecast.low}°/${dataToday.forecast.high}°`)
- const span3 = createElement('span', dataToday.forecast.condition, 'forecast-data');
- append(conditionSpan, span1, span2, span3);
- append(forestDiv, spnSymbol, conditionSpan);
- append(currentWeather, forestDiv);
- fetch(threeDaysUrl)
- .then(response => response.json())
- .then(dataLine => {
- const divInfo = createElement('div', '', 'forecast-info')
- dataLine.forecast.forEach(el => {
- const upComingSpan = createElement('span', '', 'upcoming')
- let spanSymbol = createElement('span', '', 'symbol', symbols[el.condition])
- let span1 = createElement('span', '', 'forecast-data', `${el.low}°/${el.high}°`)
- let span2 = createElement('span', el.condition, 'forecast-data');
- append(upComingSpan, spanSymbol, span1, span2)
- append(divInfo, upComingSpan)
- return divInfo
- });
- append(upcomingWeather, divInfo)
- })
- })
- })
- .catch((e) => foreCast.textContent = "Error")
- }
- function createElement(type, content, className, weatherSymbol) {
- let element = document.createElement(type);
- content ? element.textContent = content : '';
- className ? element.classList.add(className) : '';
- // idName ? element.id = idName : '';
- if (weatherSymbol) {
- element.innerHTML = weatherSymbol;
- }
- return element;
- }
- function append(parent, ...elements) {
- elements.map((el) => parent.appendChild(el));
- }
- }
- attachEvents();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement