App is deployed but not working properly

i have my weather app deployed and all the html and css displays correctly but when i attempt to use it i get the following error:

Mixed Content: The page at ‘https://vibrant-wilson-731881.netlify.app/’ was loaded over HTTPS, but requested an insecure resource ‘http://api.openweathermap.org/data/2.5/weather?zip=18330&units=imperial&appid=ba1b55a1f42012c5a6a96317ed4392c6’. This request has been blocked; the content must be served over HTTPS.
getWeather @ app.js:26
vibrant-wilson-731881.netlify.app/:1 Uncaught (in promise) TypeError: Failed to fetch

this app uses the openweathermaps api and im not sure why it does not work properly once it has been deployed. here is the link to the site:

https://vibrant-wilson-731881.netlify.app/

hey there, this notice is a safety message supposed to prevent a secure (https) site from becoming insecure (http) by prohibiting you from loading in insecure content via an API call.

I think that the openweathermap api is actually addressable via https. can you replace the URL in the API call to https://api.openweathermap.org/data/2.5/weather? + the rest and see if that works?