Help with Random Quote Generator

1

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:

2

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.

3

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
4

Thanks a lot :slight_smile: