Moving project from CodePen to Github. Help needed

Moving project from CodePen to Github. Help needed
0

#1

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");
});

#2

To make exporting to Github easier, refer this thread: http://forum.freecodecamp.com/t/issues-with-converting-projects-from-codepen-to-github/18824/6

Relevant info:


#3

I took a look at the actual app on Github, and it seems you have the following errors:

Try using https versions of those resource links.


#4

My problem is that I don’t have an export button on codepen. Is there another way to export pens to Github?