Building a Random Quote Machine...? help me

1

I’ve just started the Intermediate front end development projects and I’m a little lost…

As far as I understand it (and correct me if I’m wrong or if I’m missing any steps), we need to connect to an API to get a library of random quotes. These quotes are in the form of JSON data. We then need to parse the data to display only the quotes in an html element. A button generates the next random quote from the data.

As much as I love this course, I found FCC’s section on APIs and Ajax far too brief to be able to complete this project. Can anyone impart any of their knowledge, or suggest a good source where I can get relevant information to complete this project?

Thank you

1 Like
2

The FCC stuff about API’s and using AJAX is definitely very brief but I think it gives you more than enough to build out those projects.

If anything, just read the documentation for each of those API’s. For example, https://api.jquery.com/jQuery.getJSON/

If FCC has demonstrated the navigator.geolocation feature to get coordinates, you should then go and read up on the function so that you know what other options you have.

My advice (and this might not be what you were looking for) would be to just begin the project as best as you can and then start researching problems you face. Think of the projects as just another teaching lesson: a small idea is introduced (an API, or AJAX) and then a simple problem is given.

l[quote=“joshfilippi, post:1, topic:68088”]
As far as I understand it (and correct me if I’m wrong or if I’m missing any steps), we need to connect to an API to get a library of random quotes. These quotes are in the form of JSON data. We then need to parse the data to display only the quotes in an html element. A button generates the next random quote from the data.
[/quote]

P.S. you’re understanding of the problem is fine. I know it might seem overwhelming… but just start small and solve it one user-story at a time.

3

Using an API to fetch quotes is not required for this project. You can have an array of quotes hardcoded in your code and get a random quote from that instead.

1 Like
4

You’re right. I’ve just jumped into it and created the html and css. Now tackling each API issue as it comes.

Thanks

5

I’m also struggling a lot with this taks :frowning: I thought it would be better to start with the API issue so after 3 hours of work I’m still looking to a black screen. . .

Do you advise me to start with the html and css @joshfilippi?

6

This Intro to AJAX course really helped me to better understand. Although, I must say I’m still a bit lost. Other campers have been recommending it too!

1 Like
7

Although you asked @joshfilippi, I hope you don’t mind if I reply. I would not start with the html and css. I would get the javascript working first, both to reduce to set of potential problems, and also to have data to bind to DOM elements once you get to the html and css bits.

You don’t need html yet - you can output to console anywhere and everywhere!

In its simplest form, the .getJSON() jQuery method looks like this:

$.getJSON( API_endpoint_URL, success_callback );

You can actually define the above two terms as variables outside the AJAX request:

// setup
var api_endpoint_url = "http://your-source-of-quotes/api/";
var success_callback = function (response) {
  console.log( response );  // output the whole JSON object in your dev console
}

// ajax!
$.getJSON( api_endpoint_url, success_callback );
2 Likes
8

Thanks a lot :slight_smile: I think that my biggest trouble is to work out wit the success_calback. It’s hard for me to understand how it works and what should I do there. Maybe I’ll check @AlannaL’s advice. I think I need more understading of how the all thing works…

9

The callback is just a function that handles the response. $.getJSON() goes out and tries to ‘get’ some resource. If it succeeds, the callback is executed. A contrived example:

// get JSON from here
var api_endpoint_url = "http://your-source-of-quotes/api/";

// handle JSON response on success
var success_callback = function (response) {

  console.log(response);        // what did we get back?

  var $outputUl = $("#output-ul");  // cache output DOM element

  response.forEach(function(item) {  // for each response item...
    var $li = $("<li></li>");   // create new <li>
    $li.html(item.blah);        // add data from JSON response 
    $outputUl.append($li);      // append the <li> to output <ul>
  });
};

// ajax!
$.getJSON( api_endpoint_url, success_callback );
1 Like