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

Question

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 <strong> 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:

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:

Explanation / Answer

You need to understand that this is a very big assignment which is impossible to be done in 2 hours (the time which the Chegg experts get to answer a problem). I would suggest you to split this problem into parts and upload the problem parts wise so that it becomes easy for the Chegg Experts to complete your assignmnt.

For time being, I am providing a sample weather App which fetches weather data from Yahoo Weather API and provides the weather data.

Weather.html

******************************

main.js

*************************

moment.min.js(this is a bootstrap js -> just copy it)

*******************************

style.css

**********************

pure.min.cs(this is a bootstrap file -> just copy it)

*************************

*****NOTE: Put the .js files inside scripts folder and put .css files inside stylesheets folder. The Weather.html is the index html page.

Related Questions

Navigate

• Browse (All)
• Browse M
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.