What to know before beginning 'Random Quote Machine'

Hi!! as the topic says, I’m about to begin with this challenge, haven’t written anything at all basically because I don’t know where to start… so I want to ask you what knowledge should I have before starting the project, any kind of tutorial, documentation, something that could give me the previous knowledge to understand how to begin with.

Thanks in advance!!

16 Likes

Hey. You can start off with creating some basic html structure, create your button and where the quotes are going to show up. I would then jump to JavaScript, find an api for random quotes you would want to use. And use JQuery to get the object with your quotes and author by sending a GET request to the Api server. (JSON and Ajax lessons) Once you get the object with the quote you can pull the information you want assign it to some variables like Quote and Author and finally using JQuery display it in you html. I think all the lessons so far give you all the tools to make this happen just go for it. Good luck. Happy coding.
You can use this api http://forismatic.com/en/api/ and read documentation.

24 Likes

@TTomaszito hit the nail on the head here.

Points of emphasis:

  • Get a basic understanding of JSON and AJAX. You will probably need to google a little bit for this, especially on the AJAX part.

  • Sending a GET Request to the api Server

  • Using the response data from the api server and injecting that into your html via jQuery(with .html() or .text() methods).

11 Likes

Thank you so much for your suggestions!! I’ve started reading about the $.ajax() method but there’s something bothering me… I see from the official documentation that you have to pass a data object regarding the info you want to send to the server. Correct me if I’m wrong [I’m 98% sure I am] but in this case I don’t want to send info but to get a json file from the server, so what should I do with this data object? or is it just an optional parameter?

Not sure if you figured this out…but, wanted to just pipe in, I think what you are sending to the server is a question or a query, right? And, if you are looking for a resource to understand more about AJAX and jquery, can I recommend the intro to AJAX free course at Udacity?. Good luck!

2 Likes

What is all the fuzz about AJAX here ?
Do the user stories require AJAX ?
Or are you just cheaters that have looked to the example code and just because the example CODE is using an API you overrule User stories with stuff you see in the exmaple code.
Common !

To comply with the user story it is enough to have some static quotes to choose from.

8 Likes

It comes immediately after the json API / Ajax section of the curriculum. You don’t need to cheat to arrive at the conclusion that Ajax might be the answer.

12 Likes

What the 2h “AJAX” sectoin (in reality this section is more about JSON - not AJAX) is providing is not enough to UNDERSTAND Ajax in a way that a beginner would be able to
a) find suitable services
b) understand the various API
c) has the tools and deep understanding of fix issues when the API does not run
So, at the moment of the exercise beginners don’t have a clue how to get quotes from a remote source.
And I think it does not help beginners, when know-it-all experts like you show (at the moment) overcomplex solutions that go beyond requirements.
Understanding requirements is much more important than coding. That’s why IT has so many problems: Much to many experts on code but not able to understand what users want :wink:

15 Likes

I look forward to one day being a know it all expert, but I am just a beginner like most others on here, with no background in programming beyond some amaturish tinkering that embarrasses me now to look at.

I worked hard to work out the ajax stuff - you’re right, the FCC curriculum glosses over it to the extent that you’d have to be some kind of wizard to work it out just based on the little bit of getJSON they feed you. I could have just used an array, but I wanted to learn the API stuff better, so it served as my own unofficial user story.

What FCC has always been great at providing, though, is a supportive community. I had some really great mentors pitch in during the API projects in the front end Gitter channel, and searching through the archives there really helped too.

12 Likes

I’m stuck with this challenge too
I agree that the FCC’s Ajax section is nowhere near sufficient and I am pretty frustrated.
I could’ve just hard coded the quotes into my JavaScript, but since (I’ve read that) JSON and Ajax are so useful, it probably doesn’t hurt to start looking into them now.

I’m trying to use http://forismatic.com/en/api/, but my console gives me an “No ‘Access-Control-Allow-Origin’ header” error, any way to get around that?

Thanks in advance!

3 Likes

@donfour
I used $ajax rather than $getjson with the forismatic API.

That allows you to pass more parameters in the object you submit with your get request.

One thing you want to add specifically is a few references to jsonp rather than json. Jsonp is a similar format that gets around the cross origin problem you have.

Have a read around about the ajax jquery method and jsonp, and check forismatic carefully - I think they have some docs somewhere in the site with some clues about how to progress.

You could also search the front end Gitter chat channel, but that may be a little spoilery.

If you get really stuck and nothing is working, gimme a prod and I’ll try to help out more :slight_smile:

3 Likes

Wow! Thank you for the quick reply!
I figured out a solution without using jsonp. I added “https://crossorigin.me” as a prefix to my url (I read this solution from another post), and I successfully got myself a quote.
But now my issue is that I’m getting the same quote every time I press the button, which is kind of strange…

For your reference:

$.ajax({
  type: 'GET',
  dataType: 'json',
  url: 'https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en',
  success: function(data){
    $("div").html(data.quoteText + "<br>" + data.quoteAuthor);
  }
});

That’s odd. I use the same parameters as you but get a different quote every time.

Maybe crossorigin.me caches your request and returns the cached object when it recognises you? Just a guess.

2 Likes

Ok, so after 30 mins of struggling, I found that I can add a “cache:false” line into my $ajax function.
I think my browser cashes my request.
I’ve been working for 2 days just to get the button to work haha
I’m so glad I can move on to the Twitter button :triumph:

Thanks a lot for your help, btw!

2 Likes

@realB12 Completely agree with your point. The JSON section does not teach us anything about AJAX, and I am stuck on this challenge since the last couple of days. Do you suggest just saving all the quotes in an array?

1 Like

I can’t recall where but somewhere inside FCC I had read that you should learn some things on your own, they’re gonna be ‘explained’ on the FCC Map but in order to use it you’ll need to go out there and learn them on your own. Obviously the easiest way is to save all the quotes inside an array but in the future, when you’ll be working as a Dev one of the things you’ll be doing a lot is connecting to an API and most of the times using an AJAX request.

So, my recommendation is: go to Google and look a lot for AJAX and CORS [jquery doc has an useful page about it here] and finaly you’ll manage to solve it.

4 Likes

@miguelopezv I agree that learning additional stuff is going to be beneficial to us in the long run. Thanks for taking the time to answer my question!

My pleasure! just remember that as the OP I had no previous knowledge about APIs, AJAX request, CORS, how to read and use a JSON file… this random quote machine was my first approach to all of this concepts, and after a lot of struggling and reading and making connections in a paper I’ve finally manage to understand and solve this project. In fact, I just finished the local weather project to days ago!

So my advice is that you should search and read a lot, don’t try to go the easy way and you’ll see that finally you will understand and manage to solve all project in the most professional way. Obviously your code could be a mess, but that’s something that we’ll learn to polish in time.

7 Likes

@miguelopezv That was quite motivating! I have started learning more of getJSON and AJAX and will surely finish the project soon. Thanks again!

I agree with you.

I have been coding for less than 45 days and I barely understand JSON or AJAX…

1 Like