由于可能的HTTP阻止，Weather App按钮不起作用

Question

我的weather app在我的本地计算机上运行良好，但是当我将其托管在github页面上时，搜索按钮根本无法工作。当我使用inspect元素时，发现以下错误：

Mixed Content: The page at 'https://inquisitivedev2016.github.io/WeatherApp/
Weather%20App%20Project/' was loaded over HTTPS, but requested an insecure resource 'http://api.openweathermap.org/data/2.5/weather?zip=10001&APPID=cfa4adbc3034b0d94fbc43de23cf46ac&units=metric'. This request has been blocked; the content must be served over HTTPS.
searchWeather @ script.js:19

Uncaught (in promise) TypeError: Failed to fetch
https://inquisitivedev2016.github.io/WeatherApp/Weather%20App%20Project/

GitHub代码： https://github.com/InquisitiveDev2016/WeatherApp/blob/master/README.md

WeatherApp链接： https://inquisitivedev2016.github.io/WeatherApp/Weather%20App%20Project/

将所有网址从http更改为https ...或者至少希望如此。

let appId = "ignoreThisSOguys this variable works :)";
let units = 'metric';
let searchMethod ;

function getSearchMethod(searchTerm) {
  if(searchTerm.length === 5 && Number.parseInt(searchTerm) + '' === searchTerm)
    //if searchTerm's length is 5 and every single item inside of the searchTerm is a number //
    // This is to check if something can be considered as a zipCode //
    searchMethod = 'zip';
  else
    searchMethod = 'q';
}
function searchWeather(searchTerm) {
  getSearchMethod(searchTerm);
  // You can inject javaScript into a URL by typing in ${} at the end //
  // Using the searchMethod variable to find the weather for different cities //
  // The & symbol seperates each query parameter //
  // AppID used to fetch weather data from the api //
  fetch(`https://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`).then(result => {
    return result.json();
  }).then(result => {
      init(result);
  })
}
// First the 'then' function is used to wait for information from the server and then converting it into JSON//
// When that is done we are calling 'init' with the result from the server //


function init(resultFromServer){
  switch (resultFromServer.weather[0].main) {
    case 'Clear':
      document.body.style.backgroundImg = 'url("clear.jpg")';
      break;

    case 'Clouds':
      document.body.style.backgroundImage = 'url("cloudy.jpg")';
      break;

    case 'Rain':
    case 'Drizzle':
    case 'Mist':
      document.body.style.backgroundImage = 'url("rain.jpg")';
      break;

   case 'Thunderstorm':
    document.body.style.backgroundImage = 'url("storm.jpg")';
    break;

    case 'Snow':
      document.body.style.backgroundImage = 'url("snow.jpg")';
      break;


    default:
      document.body.style.backgroundImage = 'url("default.jpg")';
      break;
  }

  let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader');
  let temperatureElement = document.getElementById('temperature');
  let humidityElement = document.getElementById('humidity');
  let windSpeedElement = document.getElementById('windSpeed');
  let cityHeader = document.getElementById('cityHeader');
  let weatherIcon = document.getElementById('documentIconImg');

  weatherIcon.src = 'https://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png';

  let resultDescription = resultFromServer.weather[0].description;
  weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);

  temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176' //code for degree symbol //;
  windSpeedElement.innerHTML = 'Winds at ' + Math.floor(resultFromServer.wind.speed) + 'm/s';
  cityHeader.innerHTML = resultFromServer.name;
  humidityElement.innerHTML = 'Humidity levels at ' + resultFromServer.main.humidity + '%';

  setPositionForWeatherInfo();

}

function setPositionForWeatherInfo() {
  let weatherContainer = document.getElementById("weatherContainer");
  let weatherContainerHeight = weatherContainer.clientHeight;
  let weatherContainerWidth = weatherContainer.clientWidth;

  weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`;
  weatherContainer.style.top = `calc(50% - ${weatherContainerHeight/1.3}px)`;
  weatherContainer.style.visibility = `visible`;

}

document.getElementById('searchBtn').addEventListener('click', () =>{
  let searchTerm = document.getElementById('searchInput').value;
  if(searchTerm)
    searchWeather(searchTerm);
})

希望在单击按钮后从OpenWeather api检索数据，但是除了在我的控制台上返回HTTP错误请求外，它没有任何作用。