Can’t seem to get the button to call the API.
Heres a link to my codepen: https://codepen.io/bakecaker/pen/rYWVmO?editors=1011
When I open the link in my browser I can see the API quote, but I can’t call it for some reason.
Any hints?
Random Quote Gen Help
Random Quote Gen Help
0
bakecaker
#1
Two problems:
- You need to move your
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
above your external Bootstrap Javascript link. Bootstrap depends on JQuery, so it must be listed first.
- Once you fix that, you will get an error in the browser console (Ctrl+Shft+I in Chrome) complaining about mixed content. Basically, you are trying to use an api which starts with http and since Codepen is served over https, that is a problem. You can easily fix this by adding an “s” the the end of the “http” of the api link and your code will work.
bakecaker
#3
You are a God.
On the note order of scripts, is there a general order to run them in? I always try to do it through the settings interface on codepen but I always end up manually adding them.
Actually, if you would have checked the browser console, it was giving an error message stating you must add JQuery before Bootstrap. I would say there is no general order to add scripts, but you just have to make sure you understand each library’s dependencies which would be stated somewhere in the library’s documentation.
As far as where to put them into the HTML, it is best practice to add the external CSS in between the head tags and put the JavaScript external libraries near the bottom of your html but before your own custom JavaScript code or external link to your own custom JavaScript code.