Random Quote Machine Project: How prevent the content "move" when resizing window

1

Here is my project: https://codepen.io/Tencchi/pen/KvmpeO/

In the sample random quote machine project, the elements do not move when resizing window

however, in my project, all the elements group together when resizing, just wondering how to fix it?

And I also want to ask a few questions about api,

In my project, I used same method to request web service api as the sample code

function GetQuote() {
  $.ajax({
    type: "POST",
    dataType: "json",
    crossDomain: true,
    headers: {
      "X-Mashape-Key": "LD5GckREnGmshwxthK554sz334QPp1Z77DejsnT6F56iZEfb36",
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
    success: function(data) {
      //Convert the JSON string
      if (typeof data === 'string') {
       data = JSON.parse(data); 
      }
      //First Animation: set the div opacity to nothing0 
      //Second Animation: set back the div opacity to something1 and display the text
       $(".quote-text").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $('#Quote').text(data.quote);
          $('#Quote').prepend("\"");
        });

      $(".quote-author").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $('#QuoteAuthor').html(data.author);
          $('#QuoteAuthor').prepend("- ");
        });
     }
   });
}

  1. How to know if I get the correct format of the url? I know there are many different of web server api, but I am very confuse on the part of how to request web server api data using the url. For example, https://github.com/Rafase282/My-FreeCodeCamp-Code/wiki/Zipline-Build-a-Random-Quote-Machine, this person url is completely different than mine, but I have no idea how his url work.
    Are there any websites introduce or teach about that? Because I don’t see FCC teach this.

  2. Do the method which I used to request the web server api also work on other web server api?

  3. How can I know or How can I get the web server api on a website? For example, I believe Wikipedia do has a web server api, but I have no idea how to get it.
    In my project, I did need to sign up in the mashape.com to get the key and api, is it similar as this?

Thank!

2
  1. Each website or (should i say web application and service) has its own api url and structure (though similar in usage).
  2. Depends on how the web api is designed, but yeah this method should work for all similar requests.
  3. Each website host documentation fot he API services. for example you can view api (details and how to use) for wikipedia on this link: https://www.mediawiki.org/wiki/API
3

Thank for reply
and I kind of get the idea

just want to ask a few more questions,

  1. you said each website service has it own url and structure, is that mean every time we want to use an api, we have to understand its structure to be able to use it? is there any rule to follow so we can quickly understand the website service own url and structure?

2.Could you give an example of how to use the wikipedia api to search an user wants such a historical person or movie?

https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json

I am really confuse on how to put the user wants on the url.

  1. This question does not refer to api. Is there any way to stop the elements moving or pin them on its current position while resizing the browser window similar as the sample random quote machine project?

THANK

4

  1. Yes, exactly. There is no specific rule, but there are few quick things you should memorize. RESTful Services Quick Tips

  2. This is already explained on the the ink i provided, i will quote it here as it is:

The format
format=json This tells the API that we want data to be returned in JSON format. You might also want to try format=jsonfm to get an HTML version of the result that is good for debugging. The API supports other output formats such as XML and native PHP, but there are plans to remove less popular formats (phab:T95715), so you might not want to use them.

The action
action=query

The MediaWiki web service API implements dozens of actions and extensions implement many more; the dynamically generated API help documents all available actions on a wiki. In this case, we’re using the “query” action to get some information. The “query” action is one of the API’s most important actions, and it has extensive documentation of its own. What follows is just an explanation of a single example.

Action-specific parameters
titles=Main%20Page

The rest of the example URL contains parameters used by the “query” action. Here, we’re telling the web service API that we want information about the Wiki page called “Main Page”. (The %20 comes from percent-encoding a space.) If you need to query multiple pages, put them all in one request to optimize network and server resources: titles=PageA|PageB|PageC. See the query documentation for details.

prop=revisions
You can request many kinds of information, or properties, about a page. This parameter tells the web service API that we want information about a particular revision of the page. Since we’re not specifying any revision information, the API will give us information about the latest revision — the main page of Wikipedia as it stands right now.

rvprop=content
Finally, this parameter tells the web service API that we want the content of the latest revision of the page. If we passed in rvprop=content|user instead, we’d get the latest page content and the name of the user who made the most recent revision.

Official documentation is always the best source of the information about the structure.

  1. If i understand your question this is expected behavior.