Broken Quote Machine :(

Dear good people of FCC,

I come to you a broken coder, my RQM used to work fine, the only issue being the quotes didn’t fade in and out.

https://codepen.io/Joshuaswift/pen/bpXoEo

I really wanted that functionality so I tinkered with the code for a while and then one night after a long tinkering session I must’ve saved over my original working code and now I have a broken RQM!!!

I’ve looked over the code for what feels like an age and can’t see why it won’t return to the original functionality, so I humbly request your assistance in finding the source of my pain and anguish.

Your help is greatly appreciated.

Hi

This was commented out (line 18)

$(’#newQuoteBtn’).on(‘click’, removeQuote);

Is that how it was now?

Hey!

Thanks for the reply, apologies that was left over from my attempts to fix it, it shouldn’t be commented out. I’ve updated it now.

You have a cross-origin issue. Your http call needs to connect to https

Thanks for this, I’ve amended the getJSON call to HTTPS but still getting nothing. Is this what you mean?

Replace https in JSON with http

I’m a bit confused here, is it possible to call http from a https page?

Your codepen link is http

Apologies I don’t follow, feel like I’m going round in circles here!

My codepen page is https, my getJSON call is http. Is this correct or do I need to change my getJSON call to https?

Hi,

both should be http.

I pasted your json call in explorer with http and got the response so thats all working.

What is it exactly you are trying to accomplish? the fade out/in effect?

I don’t think forismatic API works via https.

You can add https://crossorigin.me/ in front of your url:

'https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?'

so you can call codepen with https

Wow that’s the first time I’ve heard of crossorigin.me, very useful!

That’s working now I appreciate your help. Now I just need to figure out how to fade in and out!

@MARKJ78 yes that’s what I was trying to achieve originally. The issue is getting the “New Quote” button to fade out the current quote and also fade in a new quote. I can get one or the other but never both it seems.

Edited to fix another bug.

Hi,

I rejigged it a bit.

  • I moved the click button functions out of the init function and then removed the init - because you dont need to call a function, to call a function to load the page - you can just skip straight to getQuote() call.

  • I changed the div you’re trying to “append” to. I changed it to html and quotebox. this ensures the animation works for fade out and in. nb - you will have to change your css to style the quote, by styling #quotebox p{styles}, not #quoteConetent. You can get rid of the <p> out of the quotebox div.

  • You dont need the removeQuote function. You only needed that because you were appending, rather than inserting with html.

  • I wrapped the whole page in a doc ready function like this to ensure the page runs through the script on load: (i’m not entirely sure if this is strictly required as it works without, but i think its good practice).

    <code>$(document).ready(function() {
          //page stuff
          });</code>
    
  • I removed the crossorigin.me (it was creating a lot of delay and is unnecessary if you use codepen and supply the project link as http.

  • I put an animation before your jquery fill order (is that even the right term!) call to allow the fade in/out. I used the animate method to change the opacity instead of fadeOut (does the same thing essentially|) for this one.

Hope that helps for next time :slight_smile:

all you need to do now is straighten up those buttons on smaller screens :wink:

$(document).ready(function() {

  //Function to obtain JSON data in the form of quote content from the Forismatic API and fade in
  var getQuote = function() { $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?', function(json) {
      $("#quotebox").animate({
        opacity: 0
      }, 375, function() {
        $(this).animate({
          opacity: 1
        }, 750); $("#quotebox").html("<i class = 'fa fa-quote-left fa-2x quote-mark'></i>" + json.quoteText + "<br>" + "<h3>" + json.quoteAuthor + "</h3>");
      });
    });
  };




  //Function to run when page is loaded
  //Ensures there is a quote when page is loaded initially 
  getQuote();

  //Enable sharing of quote via Twitter using Tweet button
  var tweetQuote = function() {
    window.open("https://twitter.com/intent/tweet?text=" + $("#quoteContent").text());
  };

  $('#shareBtn').on('click', tweetQuote);
  $('#newQuoteBtn').on('click', getQuote);

});

@MARKJ78 Thanks so much! I have a lot to learn especially when it comes to jQuery so I appreciate your patience and understanding. And yes the next step is making it responsive!

Me too, i’m also a noob.

I could only help you because i’ve already done the Quote machine and weather app and ran into many issues.

Don’t you worry, the more you build the more it will start to fall into place.

cheers

Mark

looking good (i just checked :smiley: )

dont forget to amend this…

window.open("https://twitter.com/intent/tweet?text=" + $("#quoteContent").text());

You read my mind! That was the last thing I checked, working great.