Two things I am stuck on WEATHER APP

#1

First, open weather map API stopped working after I transfered my code from Brackets to CodePen.
Tried to add “https://crossorigin.me/” at the beginning of the request link, still not working.

Second, I tried to create a toggle button by bootstrap toggle, but I only get a checkbox instead.
bootstrap is linked to the file, since I successfully created a button using bootstrap.

my project

Thanks in advance, guys!

#2
  1. Your Codepen has to be loaded via HTTPS in order to get the user’s location.
    However, if you load the Pen over HTTPS, the browser won’t allow you to load the weather since the API is over HTTP. All of your URLs need to be HTTPS.
  2. Add https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js to your scripts to make your toggle button work (Bootstrap Toggle relies on its JS to work it looks like).

Fix those and see if it works. Let me know if it does!

#3

  1. I used ipinfo.io to get geolocation info instead of the piece of code given by FCC, it works over HTTP.
    $.getJSON(‘http://ipinfo.io’, function(data){
    console.log(data)
    })
    Now both of the location and weather API work.

  2. Still struggling making the toggle button work, I tried to attach https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js to the file, won’t work.

#4

(I’m assuming this pen is what you’re working on right now)

  1. Bootstrap Toggle relies on Bootstrap, so add Bootstrap to your external CSS.

  2. Add data-toggle="toggle" to your checkbox so that the Bootstrap Toggle script knows you want that checkbox to be a toggle.

Other than that, I think it’s working (or at least it worked after I tried those changes)

#5