Блог

Я пытаюсь создать виджет погоды на основе геолокации. Я наткнулся на фрагмент кода, который я хотел бы использовать повторно, однако это jQuery, и я не смог полностью перевести его на JavaScript.

Проблема начинается уже в начале функции weatherWidget(), где я извлекаю JSON API (который работает до сих пор), но, похоже, я не могу получить доступ к отдельным значениям. Консоль начинается с сообщения о том, что «ipAPI не определен».

Я не до конца понимаю код, вероятно, поэтому мне так сложно перевести его на JavaScript, и хотя я провел много исследований по этому вопросу, я, похоже, не могу разобраться в сути проблемы. Любые предложения приветствуются!

 <section id="weather">

        <h1>Your Weather</h1>
        <div class="visual-only" aria-hidden="true">
            <div id="quick-view">
                <div id="weather-icons">
                <i class="wi"></i>
                <i class="wi"></i>
            </div>
            <div id="loading">
                Loading<span>.</span><span>.</span><span>.</span>
            </div>
            <span id="tempF" class="show">
                <span></span>
                <i class='wi wi-fahrenheit'></i>
            </span>
            <span id="tempC" class="hide">
                <span></span>
                <i class='wi wi-celsius'></i>
            </span>
            </div>
                <div id="grid">
                <div id="location">…</div>
                <div id="status">…</div>
                <div id="wind">
                <span class="compass">
                    <i class="wi">…</i>
                </span>
                <span id="miles" class="show">
                </span>
                <span id="meters" class="hide">
                </span>
            </div>
        </div>
        <button class="weatherBtn">F / C</button>
    </div>
        <p class="visually-hidden">
            Weather data currently unavailable.
        </p>

    </section>
 

 function weatherWidget() {

// Grab the latitude amp; longitude
fetch('https://ipapi.co/json/')
    .then(res => res.json())
    .then(getJSON1(ipAPI));

function getJSON1(ipAPI) {
  let latitude = ipAPI.latitude;
  let longitude = ipAPI.longitude;
  let city = ipAPI.city.replace(/(s)/gi, " "); // Replace spaces
  let region = ipAPI.region_code;
  
  // Grab a local map as background based on user's IP
  let imageURL =
    "https://maps.googleapis.com/maps/api/staticmap?center="   city   "amp;zoom=10amp;size=640x640amp;scale=2amp;format=jpegamp;key="   gmapsKey;

  // Feed the latitude and longitude to the OpenWeatherMap API
  fetch('https://cors-everywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat='   latitude   "amp;lon="   longitude   "amp;APPID="   owKey)
    .then(res => res.json())
    .then(getJSON2());

  function getJSON2(ow) {
    let location = city   ", "   region,
        status = ow.weather[0].main,
        windMeters = ow.wind.speed,
        windMiles = ow.wind.speed * Math.round(2.23694),
        tempF = Math.round(
          ((ow.main.temp - 273.15) * 1.8   32) * 10 / 10
        ).toFixed(0),
        tempC = Math.round(ow.main.temp - 273.15),
        iconSource = ow.weather[0].icon,
        icons = {
          // ow.weather[0].icon to wi
          // Daytime conditions
          "01d": "wi-day-sunny",
          "02d": "wi-day-sunny-overcast",
          "03d": "wi-day-cloudy",
          "04d": "wi-cloudy",
          "09d": "wi-day-sprinkle",
          "10d": "wi-day-rain",
          "11d": "wi-day-thunderstorm",
          "13d": "wi-day-snow",
          "50d": "wi-day-fog",

          // Nightime conditions
          "01n": "wi-stars",
          "02n": "wi-night-partly-cloudy",
          "03n": "wi-night-cloudy",
          "04n": "wi-cloudy",
          "09n": "wi-night-sprinkle",
          "10n": "wi-night-rain",
          "11n": "wi-night-thunderstorm",
          "13n": "wi-night-snow",
          "50n": "wi-night-fog"
        },
        iconName = iconSource.split(" ").map(function(code) {
          var results = [];
          results.push(icons[code]);
          return results.join("");
        }),
        icon = iconName[0],
        extremeSource = ow.weather[0].id.toString(),
        extremes = {
          // ow.weather[0].id to wi
          // Extreme weather conditions
          "900": "wi-tornado",
          "901": "wi-hurricane",
          "902": "wi-hurricane",
          "903": "wi-snowflake-cold",
          "904": "wi-hot",
          "905": "wi-windy",
          "906": "wi-hail",

          // Beaufort wind scale
          "951": "wi-beafort-1",
          "952": "wi-beafort-2",
          "953": "wi-beafort-3",
          "954": "wi-beafort-4",
          "955": "wi-beafort-5",
          "956": "wi-beafort-6",
          "957": "wi-beafort-7",
          "958": "wi-beafort-8",
          "959": "wi-beafort-9",
          "960": "wi-beafort-10",
          "961": "wi-beafort-11",
          "962": "wi-beafort-12"
        },
        extremeName = extremeSource.split(" ").map(function(code) {
          var results = [];
          results.push(extremes[code]);
          return results.join("");
        }),
        extreme = extremeName[0];

      let windIcon = "wi-wind towards-"   ow.wind.deg   "-deg";

    document.querySelector('.sr-only').empty().append("Current conditions in "   city   ": "   status   ", wind at "   windMiles   " MPH ("   windMeters   " m/s)");
      // quick-view
      document.querySelector("#loading").hide();
      document.querySelector("#tempF > span")
        .empty()
        .append(tempF);
      document.querySelector("#tempC > span")
        .empty()
        .append(tempC);
      document.querySelector("#weather-icons > i:first-child").classList.add(icon);
      document.querySelector("#weather-icons > i:last-child").classList.add(extreme);

      // grid
      document.querySelector("#location")
        .empty()
        .append(location);
      document.querySelector("#status")
        .empty()
        .append(status);
      // wind
      document.querySelector(".compass > i")
        .empty()
        .classList.add(windIcon);
      document.querySelector("#miles")
        .empty()
        .append(windMiles   " MPH");
      document.querySelector("#meters")
        .empty()
        .append(windMeters   " m/s");
    }

  function error() {
    document.querySelector("#main").textContent = "Unable to retrieve your location";
  }  
};

document.querySelector(".weatherBtn").click(function() {
    document.querySelector("#tempF").toggle.classList.add("show1 hide1");
    document.querySelector("#tempC").toggle.classList.add("show1 hide1");
    document.querySelector("#miles").toggle.classList.add("show1 hide1");
    document.querySelector("#meters").toggle.classList.add("show1 hide1");
});
}