What to know before beginning 'Random Quote Machine'

If you take a look for the instructions of the random quote machine you’ll see that number 2 is “Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need.” From there I started to read how to implement an API on my Machine, and then after I took a look at the example machine I asked myself ‘how can I implement this API so that it changes the quote everytime I do a new request’ and after googling I found out about AJAX…

so, Long story short: the user story doesn’t require AJAX, but they suggest you should use an API and the example refresh the quote each time you click on the button, so they kind of lead you towards AJAX.

ok, so…
i don’t want to use an API for quotes, i want to use specific quotes and pictures that go along. that means i have to make those in my html in order to show them on click?

or is there some other way that will make it a bit easier

you can do it as you say, making them on the HTML or creating an array on JavaScript and selecting a random quote from the array.

I think the best way to do that would be to create your own database of quotes, but at this stage it’s too early for us to work with our own databases, so you can either hardcode quotes, or take them from some API.

Yes you can create an array of javascript objects that point to the images. Then you will use javascript to randomly cycle through the images when a button is clicked. Here is an example that has an array similar to what we would need sitepoint article

I agree the AJAX/API solution is a bit overkill given what FCC has presented so far. It’s definitely something important to learn later down the line, but a simple array or external javascript file with an array is more than enough. The requirements for this challenge mention nothing of an API.

1 Like

This thread should be pinned.

3 Likes

I also think that it would be helpful to be pointed in the right direction when starting this project. Maybe a tip on how the JSON APIs and Ajax challenges come into play in this project.

2 Likes

I guess I’m weird. I would rather not rely on jQuery for something that seems relatively simple and imo could be solved with vanilla JS. I want to take the approach of using regular js (es6/2016 ftw :stuck_out_tongue: ) so I understand the fundamentals of the language before relying on frameworks and libraries.

1 Like

Can anyone help me with my API call to the Quotes on Design API?

Link to my work: http://codepen.io/NickolasTeixeira/pen/VPPMMv

I’m not sure if I need to use the ajax call or getJSON call. When I use the ajax call, it’s not allowing me to access the API data. My console is saying that I don’t have the correct credentials to access the data. Can anyone help me? I feel so close to finishing this project!

I second those people who think the JSON APIs and AJAX section of the curriculum in no way prepares you for this challenge.

I whipped up a quote generator fairly quickly using an array, which works. Maybe I have missed the point of the exercise…

But how to tweet the quote? I have no idea…
I found how to embed a twitter button that shares the URL on the twitter website, but not the quotes themselves.

Anyone know where I should go to learn this?

1 Like

Let’s assume that using AJAX and an API is a required element for this challenge. I agree that the FCC jQuery curriculum is a bit sparse on those topics for someone trying to accomplish this assignment, assuming that the FCC curriculum is the only thing you read or view. However, I don’t think that FCC expects you to not need outside information to complete this task–they are trying to point you in the right direction, so you know the questions you need to ask in order to find what you need to learn. They aren’t trying to spoon-feed you, because being able to figure out how-the-hell-to-do-that is one of the most important parts of being a dev.

So if you know or can guess at the right questions, who do you ask? Remember this always: Google is your friend. And so is YouTube. I was hung up getting started on this, so I searched YouTube, entering something like “javascript jquery ajax api” into the search box. That lead me to the jQuery Tutorials Playlist by LearnCode.academy. Since I already was familiar with jQuery and just needed some AJAX practice, I skipped ahead to video #7 in the series, “Using AJAX and API’s.” I followed along and did the mini-project in the videos, then dressed it up and made it my own so I could put it on my website. (I spent a couple of days making it something I would be willing to show in a junior web-dev portfolio.) By the time I finished that project, I was feeling pretty good about AJAX and APIs, and had no further trouble finishing out my Quote Machine project.

11 Likes

That’s exactly mi opinion!! I don’t think FCC is going to teach you how to do everything, they just gave you a little intro about AJAX and then a project, so you would assume there should be a relation between these two. I’ve created this topic looking for someone who did the project before and could tell me “you need to learn about JSON, AJAX and…” just to know what to search for in google or youtube.

I think somehow this helps you a lot in your professional life, more than once I was requested to do something within a project and of course I wasn’t allowed to say “ok, but how?” or “could you teach me how to do it?” so the only way to do it was just like I did here: ask what are we going to use to develop the project and then… “Google is your friend”.

1 Like

I share the previous opinions about this part of the course being underwhelming at best. While it may sound reasonable to expect someone to go figure out how to reverse-engineer the AJAX and JSON and whatnot, the reality is that users who sign up for this camp are not doing so in order to figure it out themselves. If we could do that, we wouldn’t need this site in the first place. We’re here because this is supposed to be a place where we can be properly taught how something works, not where we have to cobble things together and cross our fingers.

For example, when I read the description of this problem, my first thought was to just make a switch statement and use Math.Random to spit out a number. That number would go through a switch statement and a pre-determined “random” quote would come back out.

At the very least, it would be nice if the site was a little more detailed in describing exactly what it is we’re supposed to accomplish. Nowhere does it say that we “need” to use a quote-generating API. Furthermore, it would be nice to get into a little more detail about some of the inner workings of AJAX and JSON, instead of taking two minutes to copy half a dozen snippets of code from one side of the page to the other and call them “lessons”. Maybe explain what each of the different parts of the API actually means, or go into more detail about the JSON object, or something like that.

Finally, the whole notion of “reverse-engineer the functionality without looking at the source code” is kind of an oxymoron. Even if you are able to resist the urge to just click on the CodePen link, doing a Google search will most likely lead you to other search results which are doing the exact same thing. What’s the difference? And how does that actually help you learn anything about what it is you’ve likely just copied/pasted?

7 Likes

To anyone who’s attempting this exercise as of May 1st 2017:

I think everyone has already mentioned that the use of API is by no means required for this project; simply hard-coding a set of quotes into an array will work just fine.

However, those of you who wish to learn more about API’s and how to use them to request data from a different service, this guide might be of help to you:

It is worth noting that the API Stephen used in his tutorial is no longer working. I’ve used this one in my own random quote machine.

The AJAX call was implemented as follows:

$.ajax({
            url: 'http://quotes.stormconsultancy.co.uk/random.json',
            dataType: 'json',
            success: function (response) {
                console.log('success', response);
                quote = response.quote;
                $('#quote').text('"'+quote+'"');
                if (response.author) {
                    $('#author').text('- ' + response.author);
                } else {
                    $('#author').text('- unkown');
                }
            }

It took me two whole days to get this to work, so I feel urged to help you guys steer clear of that massive vortex of wasted time!

7 Likes

As an alternate option to using ajax…I found a list of quotes hosted on GitHub…my implementation pulls the static file using an $.get call and then parses a few thousand quotes into an array.

link to GitHub quotes database

This needed a lot more use of array/map/reduce functions to process the text file which is quite closely aligned to the level that I had reached in the tutorials at the time.

My random quote machine results

3 Likes

Is not fair, I struggled for more 6 hours trying to figure out how to apply the previous lessons in my challenge:

Finally I gave up and I came up to realize the only way is using ajax and they haven’t taught that. I’ve learnt some stuff in the process but I disagree with user stories of the challenge.

After a couple of days suffering I’ll follow your advice and hard-code a set of quotes, I guess FCC will teach me ajax later. Anyway I found examples where people made a JSON work without ajax, but using different jquery versions, I tried in my own CodePen and I never made it work. https://codepen.io/jamesbarnett/pen/oHsvr

Im not sure what you mean… I used API for mine, and there are others here who did too. There is more than one way to come to a solution, for sure, incl AJAX which it seems a lot of people have done, but you can most definitely use API for this project if that is what you want.

If its any consolation, it took me 2 days to understand it and get it working (I only spent about an hour on the design and css…most of the time was spent trying to figure out API), and a lot of frustrating moments too, this is not an easy project.

I’ll admit, I almost gave up too, but the more frustrated I was, the more determined I was to figure it out cause it annoyed me to no end that I wasn’t getting it. But once I did, I was Queen of the World…felt like it anyway lol

So yeah, dont give up…search around, ask for help if youre having specific problems, etc. I turned to the help category and searched quote machine for a lot of tips that helped get me in the right direction, and also searched project feedback for quote machine with api to see projects that were completed with it.

If you keep at it, you’ll figure it out, for sure :slight_smile:

5 Likes

I struggled with just as much time working through that challenge! :slight_smile: I had to find that out using a bunch of YouTube tutorials!

This is how I feel about it. FCC doesn’t teach enough to really help us understand this topic. I went to Lynda.com to get a better understanding but I am still stuck. I know I will figure it out and I am good at reverse engineering but I would have liked an explanation of each part of the code rather than just a copy/paste approach the lessons took. It taught me nothing really.

4 Likes

Thanks for sharing the API you used. It took some time trawling through google searches to find some random quote APIs are no longer working.