Help with Random Quote Generator

I need help with my project. I can’t figure out what is wrong with my code when I open it in browser it doesen’t display the quotes, please help. Any help is apreciated! :slight_smile:

This is my script.js file:

$(document).ready(function(){
  var quote;
  var author;
function getNewQuote(){
  $.ajax({
  url: 'http://api.forismatic.com/api/1.0/',
    jsonp: 'jsonp',
    dataType: 'jsonp',

    data: {
      method: 'getQuote',
      lang: 'en',
      format: 'jsonp',
    },
    success: function(response) {
      quote = response.quoteText;
      author = response.quoteAuthor;
      $("#quote").text(quote);
      if(author){
        $("#author").text(author);
      } else {
        $("#author").text("-Unknown Author");
      }
    }
  });
}
getNewQuote();

$('#new-quote').on('click', function(e) {
   e.preventDefault();
   getNewQuote();
 });

 $('#tweet-quote').on('click', function(e) {
   e.preventDefault();
   window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(quote));
 });

});

And this is my index.html file:

<!DOCTYPE html>
<html lang="en">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <link href='https://fonts.googleapis.com/css?family=Allan' rel='stylesheet'>
 <link rel="stylesheet" href="style.css">
<title>Random Quote Machine</title>
</head>

<body>
    <h1 class="text-center header">Random Quote Machine</h1>
<div class="container text-center">
<p id="quote"></p>
<p id="author"></p>
</div>
<div class="buttons text-center">
<div class="row">
  <div class="col-sm-4">
    <button class="btn btn-info" id="tweet-quote" target="_blank">Tweet!</button>
  </div>
  <div class="col-sm-4">
    <button class="btn" id="new-quote">New Quote</button>
  </div>
</div>
</div>
</body>
</html>

Please help :slight_smile:

First thing I notice is that the URL in the ajax call is HTTP. Codepen will block HTTP calls. They must be HTTPS.

Are you building this in regular text editor or codepen? I recommend using codepen as you might get different behavior when you submit your project. You index.html doesn’t link to your JS file.

I’m guessing he’s not using codepen since he’s loading the external files manually.

I do notice in your header that you load the jquery.min.js more than once (two different versions) and you have more than one <html> tag.

I was able to get everything loaded into codepen and it works fine, you can see it here.

The only change I made was switching the ajax call to https, as carbon mentioned. That and getting rid of the head info (codepen likes to handle that.)

The lack of a link to your index.js is a problem, you need something like:

 <script src="index.js"></script>

If you’re going to be sharing these programs and asking lots of questions on the forum, you might consider using something like codepen - it makes it soooooooooooooooo much easier for us to answer your question and try things out to help you find a solution. And it is pretty cool for small little projects like this, very quick to develop and test.

1 Like

Thanks a lot :slight_smile: