Как заставить Skycons появляться в погодном приложении? - PullRequest
Новая
       14

Как заставить Skycons появляться в погодном приложении?

0 голосов
/ 02 ноября 2018

Я делаю приложение погоды, используя apixu weather api. Я пытаюсь также добавить анимированные skycons с иконками вместо иконок, которые дал API. Но когда я изменяю его на холст, чтобы он показывал горизонт, изображения не появляются, а значок появляется только тогда, когда это изображение? Любые предложения о том, как заставить apixu weather api и skycons работать вместе? 

const iconImg = document.getElementById('weather-icon');
const locationField = document.getElementById('location');
const tempField = document.getElementById('temperature');
const weatherTextField = document.getElementById('weather-text');
const searchForm = document.getElementById('search-weather');

const API_URL = `https://api.apixu.com/v1/current.json?key=d80c517ddff0453783791909170907&q=`;

navigator.geolocation.getCurrentPosition(({ coords }) => {
  getInitialWeather(coords);
});

function getInitialWeather({ latitude, longitude }) {
  fetch(`${API_URL}${latitude},${longitude}`)
    .then(response => response.json())
    .then(json => setWeatherInfo(json));
}

function setWeatherInfo({ current, location }) {
  const locationName = location.name;
  const temperature = current.temp_c;
  const { text, icon } = current.condition;
  const iconUrl = `https:${icon}`;
  
  iconImg.src = iconUrl;
  locationField.textContent = locationName;
  tempField.textContent = temperature;
  weatherTextField.textContent = text;
}

function searchWeather(e) {
  const location = document.querySelector('input').value;
  e.preventDefault();
  
  fetch(`${API_URL}${location}`)
    .then(response => response.json())
    .then(json => setWeatherInfo(json));
}

searchForm.addEventListener('submit', searchWeather);
<div class="container">
  <div class="row">
    <div class="col l6 offset-l3">
      <div class="card center-align">
        <div class="card-content">
          <span class="card-title">
            Local Weather App
          </span>
          <img id="weather-icon" src="" alt="Loading Icon">
          <div class="weather-info">
            <span id="location"></span> / 
            <span id="temperature"></span>ºC / 
            <span id="weather-text"></span>
          </div>
        </div>
        
        <div class="card-action">
          <form id="search-weather">
            <input type="text" name="location" placeholder="Your location">
            <button type="submit" class="btn">Find Weather</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
...