Got stuck in Random Quote Machine Challenge

1

I have been working on this project for some time, changing and experimenting with the code, but I got to the point where I feel lost. I used bootstrap grid because I wanted a responsive page, but the elements don’t
resize and adjust smoothly as I expected. Did I even need to use the grid for that project? Besides my code looks messy. Any hints how to keep a code clear and concise?
Also, the user story tell that quote should be twitted? What does it mean? I am not a Twitter user?
I appreciate any feedback. This is link to my project:

2

Do you have a link to your pen? It would be easier to help if we can see your code.

3

Yes, I am sorry. I clicked something and posted my message before it was finished.

4

First thing there is a typo in class="container-fluid"( extra bracket).

To use the Bootstrap col-xs-* etc only work in a div class="row"

col-sm-offset-* and col-sm-push/pull-* are not necessary if you set the value to 0.
What they do is telling the column by how much (or how many units out of 12) it should move. So if you don’t want them to be offset (like you did by setting them to 0), don’t put anything.

I’ll do a quick pen to show you what I mean.

1 Like
5

In regards to your question about twitter, the user should be able to tweet out a quote or a link to your page with the quote. You don’t need to have a twitter account to complete this. Twitter’s developer site has some great information about this.

twitter dev site

In order to actually create a dynamic tweet button (where the text from an element or quote is populated for the user upon click), you’ll need to create a twitter widget in your site. Follow the link above for directions on this.

1 Like
6

I will check it. Thank you for the hint.

7

Here is a basic example for columns and offset (bootstrap grid)

1 Like
8

That is awesome explanation. Also, thanks for spotting a typo.

1 Like
9

and here’s another pen to try to illustrate the PUSH/PULL idea…here

10

Also, unless you’re doing some funky stuff, if you’re using jQuery to make AJAX requests, there’s no reason you need any of the xhr stuff that you’re doing. The purpose of jQuery’s AJAX requests & other libraries is to make your life a lot easier in that respect. :slight_smile:

Using the ajax method, you could distill your onClick (and also your onLoad, but I’ll only demonstrate the first) to this:

$("#getMessage").on("click", function(){
   var output = $.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc
    success: function(data) {
   $("#quote").text(data.quote);
   $("#quote").append("<footer>"+data.author+"</footer>");
    },
    failure: function(data) {idk, some alert that says something goofed, try again?}

jQuery also has a handy little getJSON method, which would distill it down even further to:

$.getJSON( url, function( data ) {
   $("#quote").text(data.quote);
   $("#quote").append("<footer>"+data.author+"</footer>");
})

Here’s the docs for the getJSON shorthand.

1 Like
11

Thank you for the comment. In case of getJSON() method , how can I pass API key?

12

Your API key should go somewhere in the URL, right? (The “where” specifically depends on the API - look up the docs of the API - but that’s how, to my knowledge, the majority of APIs work.)