function attachEvents() {
  let weatherCodes = {
    Sunny: '☀',
    'Partly sunny': '⛅',
    Overcast: '☁',
    Rain: '☂'
  };

  document.querySelector('#submit').addEventListener('click', catchTheWeather);
  document.querySelector('#forecast').style.display = 'block';

  function printError() {
    let divForecasts = document.createElement('span');
    divForecasts.setAttribute('class', 'forecasts');
    divForecasts.textContent = 'Error!';
    document.querySelector('#current').appendChild(divForecasts);
  }

  async function catchTheWeather() {
    let location = document.querySelector('#location').value;
    location = location.toLowerCase();
    if (
      location === 'london' ||
      location === 'new york' ||
      location === 'barcelona'
    ) {
      const response = await fetch(
        `https://judgetests.firebaseio.com/forecast/today/${location}.json `
      );
      const data = await response.json();
      let weatherType = data.forecast.condition;
      let currentLocation = data.name;
      let degreece = `${data.forecast.low}°/${data.forecast.high}°`;
      createCurrentCondition(weatherType, currentLocation, degreece);
    } else {
      printError();
    }
  }

  function createCurrentCondition(weatherType, location, degreece) {
    let divForecasts = document.createElement('span');
    divForecasts.setAttribute('class', 'forecasts');
    let spanConditionSymb = document.createElement('span');
    spanConditionSymb.setAttribute('class', 'condition symbol');
    spanConditionSymb.textContent = weatherCodes[weatherType];
    let spanCondition = document.createElement('span');
    spanCondition.setAttribute('class', 'condition');

    let span1 = document.createElement('span');
    let span2 = document.createElement('span');
    let span3 = document.createElement('span');
    span1.setAttribute('class', 'forecast-data');
    span2.setAttribute('class', 'forecast-data');
    span3.setAttribute('class', 'forecast-data');
    span1.textContent = location;
    span2.textContent = degreece;
    span3.textContent = weatherType;
    spanCondition.appendChild(span1);
    spanCondition.appendChild(span2);
    spanCondition.appendChild(span3);
    divForecasts.appendChild(spanConditionSymb);
    divForecasts.appendChild(spanCondition);
    document.querySelector('#current').appendChild(divForecasts);
  }

  function createUpCommingCondition() {}
}

attachEvents();