Nate Nate - 1 month ago 6
Javascript Question

Can someone correct my javascript code? (Free code camp)

I'm learning javascript from free code camp in general. Currently doing the question on generating a random quote. I'm not sure why it's not updating when i click my button. Can someone take a look and comment on it?

http://codepen.io/NateAlcedo/pen/mOdBzZ

Here's my script

$(document).ready(function() {
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json";
// on click event, obtain an instance of the data from api
$("#buttonGenerator").on("click", function() {
$.getJSON(url, function(data){
$("#quote").html(data.quoteText);
$("#author").html(data.quoteAuthor);
});
});
});

Answer
$("#quote").html(data.contents.quotes[0].quote); this will fix 

$(document).ready(function() {
  var url = "http://quotes.rest/qod.json";
 // on click event, obtain an instance of the data from api
  $("#buttonGenerator").on("click", function() {
    $.getJSON(url, function(data){
    $("#quote").html(data.contents.quotes[0].quote);
     $("#author").html(data.contents.quotes[0].author);
    });
  });
});
h1{
  padding: 20px;
  font-family: 'lobster';
}

#quote{
  font-size: 25px;
  font-family: cabin;
}

.buttons{
  font-family: Cabin;
}

#author{
  font-size: 30px;
}

footer {
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow:hidden;
}

#quotations{
  font-family: 'Arimo';
  font-size: 50px;
}

#buttonText{
  font-family : 'Arimo';
  font-size: 20px;
  color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron text-center">
    <h1 style="color: #1287A8"> 
        Random Quote Machine
      </h1>
    <hr size="" />
  </div>
  <div class="container">
    <div class="row">
      <!--Left button-->
      <div class="col-md-2">
        <button id="buttonGenerator"type="button" class="btn btn-info"> 
          <p id="buttonText">Generate Quote</p>
        </button>
        <br />
        <br />
        <button id="buttonTwitter"type="button" class="btn btn-info buttons"> 
          <p id="buttonText">Tweet out!</p>
        </button>
      </div>
      <!--End of button-->
      <!--Text box-->
      <div class="col-md-9">
        <span id="quotations"><em><i>"</i></em></span>
        <p id="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="pull-right"><span style="font-size: 20px">-</span> <i id="author"> George Washington</i></p>
      </div>
      <!--End of Text Box-->
    </div>
    <!--End of Container-->
    <!--Footer-->
    <footer>
      <p>Done By Nathaniel D Alcedo Jr</p>
    </footer>