Random Quote Machine

As I said in my intro post, I'm limping my way through freeCodeCamp. It jumps from "copy this bit of code in there and see the result," straight to "You'd better invest in a Ferrari if you want to keep up."

The project is to make a random quote machine. User cases are: 1) I can click a button and view a different quote each time. 2) I can click another button and tweet that quote.

I couldn't believe how many stumbling blocks I came to. Even seemingly simple stuff like centring the main heading tripped me up. For some reason, my heading was off halfway to the left of the screen. The boxes - coloured divs to contain the text - centred just fine and I used 'margin' to space them vertically, but that heading! What eventually fixed it was taking the heading out of the bootstrap container. While it was within the container, even with the same commands as the correctly centred boxes, it stayed stubbornly lopsided.

When it came to making the page function, the first thing I thought of was a form. I'd learnt how to do forms before, so I could program a 'submit' button. I quickly found that though I could send information out, I didn't know how to capture the information that the target site sent back. The lead up exercises to these projects was all about jQuery, which looked, to me, unintelligible. The fCC explanations were minimal; they gave you the code and told you to stick it in a certain place in your html. They tell you what it will do but I couldn't work out how it worked. So, I did the Try jQuery course on the jQuery website, run by Code School. It was a short course (3 hours recommended) but by the end, I could decipher basic jQuery code - yay! When I went back to fCC I could see what the code was supposed to do.

I did want to have a look at how to do it with vanilla javascript, or a form. I thought that surely it couldn't be too involved. Just set a variable equal to what you 'get' from a URL. The snippet of code I found in a Google search was hideous, so I went back to the much shorter arms of $.getJSON.

But then it was telling me that getJson is not a function. That turned out to be a problem with my placement of the script tag containing the link to the jQuery library. Putting it in the head of the document worked. (I was working on a local server and Visual Studio Code, not Codepen; obviously this wouldn't have been a problem on Codepen.)

With everything in place, using the same functions as the fCC tutorial examples, it still wouldn't work. I brought up the console to see if there were any clues there and found an error I'd never heard of before:

"No 'Access-Control-Allow-Origin' header is present on the requested resource"

What?!

At this stage I felt like I was the butt of some cosmic joke; like the Internet was just going to throw ever more esoteric and ridiculous-sounding roadblocks in front of me. Google to the rescue again. The fix was easy, just include another web address in front of the address I'm querying. The extra address apparently adds something to either the query or the answer to make it acceptable to the browser. It sounded like it must be very common - happening whenever a site is querying a resource that's not on its own server, but I'd never seen mention of it before.

I finally have a working version. I've linked here to a copy on CodePen

I still have to add a Tweet button and want to pretty it up some more. For instance, there's an annoying space at the end of some of the quotes, so I'd like to strip that off.

Back to digging...

!originalworks