I am trying to move my projects from CodePen to Github. I am starting with the “Random Quote Generator” then I will move the others. It is working fine on CodePen, but when I move it to Github it seems to be failing on the API call to get the quote. I am retreiving the quote and setting up the button’s onClick() callback in the $(document).ready( function() {}, which I have included below. As I said, in CodePen this code works. On Github the initial ‘alert(“Document ready!”);’ runs, but neither of the alerts after the json call are being reached. The code is copied directly from CodePen, so I am guessing that there is something else that I need to set up manually on Github that CodePen is doing for me. I thought that I had caught all of that, but I must have missed something. I am also including index.html below:
********************************************
index.html
********************************************
<!DOCTYPE html>
<html>
<head>
<title>FCC Project -- Random Quote Genderator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container-fluid">
<h1>Random Quote Generator</h1>
<br />
<div id="quoteText" class="quoteStyle"></div>
<br />
<a id="getQuote" href="#" class="btn btn-custom" role="button">Get New Quote</a>
<br />
<a id="tweetQuote" href="#"; class="btn btn-custom" role="button">Tweet this quote</a>
</div>
</body>
</html>
*******************************
app.js
*******************************
var text = "";
$(document).ready( function() {
alert("Document ready!");
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
var html = "";
alert("json call completed");
html += "<h2>" + json.quoteText + "</h2>"
html += "<br />"
if (json.quoteAuthor !== "") {
html += " -- " + json.quoteAuthor;
} else {
html += " -- Unknown";
}
alert(html);
$("#quoteText").html(html);
text = document.getElementById("quoteText").textContent;
});
$("#getQuote").on("click", function() {
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
var html = "";
html += "<h2>" + json.quoteText + "</h2>";
html += "<br />";
if (json.quoteAuthor !== "") {
html += " -- " + json.quoteAuthor;
} else {
html += " -- Unknown";
}
$("#quoteText").html(html);
text = document.getElementById("quoteText").textContent;
});
});
});
$("#tweetQuote").click(function() {
window.open("https://twitter.com/intent/tweet?text=" + text , " " , "width=550,height=450");
});
