Make a web page that displays the weather forecast using AJAX requests to a weather server.

Make an empty HTML document; name it weather.html

Define a function in JavaScript; call it fetchWeather(). You may write your JavaScript in an embedded script in your HTML document.

Inside your fetchWeather() function, make an AJAX request to the weather server.

We have a server that outputs the current weather in JSON format.

IMPORTANT: Under normal circumstances, AJAX requests cannot be performed cross-domain for security reasons. We have set the Access-Control-Allow-Origin header on our server to allow requests from your EC2 instances, or from localhost. You will therefore need to upload your code to your EC2, or access it via localhost, in order for the AJAX requests to work. This means that you cannot, for example, complete this part of the individual portion in JSFiddle.

In your callback, process the JSON and use JavaScript to manipulate the HTML DOM to display the following information on your page:Location

City, in a tag

State, not in any tag

Humidity

Current Temperature

Image for Tomorrow's Forecast

Finally, bind fetchWeather() to the DOMContentLoaded event so that your weather widget is automatically initialized when the page is loaded:

document.addEventListener("DOMContentLoaded", fetchWeather, false); 

In addition, add a button that runs your fetchWeather function when clicked. This should update your widget with the current weather conditions.

Use the following HTML:

Include the CSS file from here: http://classes.engineering.wustl.edu/cse330/content/weather.css

When everything is working, the weather widget should look something like this:

St. Louis MO Currently 54 Humidity: 93%