* Here, we will learn how to use all the concepts we learned about Asynchronous JavaScript to make an AJAX Request
* and get some Weather Data from a Real Weather API (https://www.metaweather.com/api/). In order to the AJAX Request
* we are going to use a modern Web API called fetch() [By "Web API", we mean that these parts are available to the
* browser and are not really part of the JavaScript language itself. See more at event_loop.pdf @https://github.com/Ch-sriram/JavaScript/blob/master/Asynchronous-JS/assets/event_loop.pdf].
*
* With fetch() we can do AJAX Requests in a very simple way. We can do Asynchronous Network Requests across the
* internet to fetch data from other servers or even from our own server. We used to previously make AJAX Calls
* using the rather complex XML HTTP Request Interface, and quite frankly, it has better browser support compared to
* fetch() because it has been around for more time compared to fetch().
*
* Now, we'll see how to use the fetch() function.
*/
// To make an AJAX Call (here, we are specifically requesting data), all we have to do is use the fetch() function.
// The syntax of fetch function: fetch(<URL>), where URL is where the API is located i.e., the URL to which we are
// sending the request. We are using a Weather API called metaweather. Read the documentation of the metaweather API
// @https://www.metaweather.com/api/. Normally, APIs request a key in order to use it, but metaweather API is simple
// API and it doesn't require an API key, so it will make our life easier understanding the concept of AJAX Calls.
// All of the following is taken from the documentation of https://metaweather.com/api/
// The syntax of the URL of metaweather API (aka API Endpoint) we are using is: "/api/location/(woeid)/" where
// 'woeid' means, "Where in The World ID". Each 'woeid' corresponds to place on Earth.
// Example URL of San Francisco: https://www.metaweather.com/api/location/2487956/, where we can see that the woeid
// of San Francisco is 2487956. So the entire API URL is https://metaweather.com/<API Endpoint>/
// When we open https://www.metaweather.com/api/location/2487956/ in a browser, we can see some data in JSON
// (JavaScript Object Notation) format, which looks like a JavaScript Object, but it is not really an Object. JSON
// is a text-based data format which is similar looking to the JavaScript Object, but the difference is that JSON is
// really just a single string and not an entire object inside the JavaScript Engine. Therefore, data in the JSON
// format is like string that we receive from the server, and then we can convert that string into a JavaScript
// Object, and we'll see how to convert the string we received in JSON format into a JavaScript Object.
// Specifically, the JSON formatted string from https://www.metaweather.com/api/location/2487956/ contains a field
// called "consolidated_weather" which is an array that contains data for the forecast of the next 5 days of the
// weather in San Francisco. Under the "consolidated_weather" field we have other fields which are "title", "woeid",
// "timezone", "latt_long", "time", "sun_rise", "sun_set", etc.
// Now, this is how we make an AJAX request for San Francisco's Weather Data using the fetch() function.