|
- Create at HTML page with an input field (city), a button and a label. Test to make sure it works: when you type something into the field and press the button, have it appear on the label.
- Set up your own account on openweathermap.org. Get an API key and save it as a variable in your code.
- Look up the documentation on https://openweathermap.org/current
to get the syntax for a weather call using a city name. Make sure to add your APPID to the call.
Create a request string using the City Name input and show it on the page
- Look up and understand JavaScript's XMLHttpRequest() method.
- Setup an XMLHttpRequest object (call it myXHR or similar). Add an eventListner to it. The event listener has a function that will do all the work of parsing the reply. It looks something like:
myXHR.addEventListener("readystatechange", function() {
WORK HAPPENS HERE
}, true);
And don't forget to open and send your request.
- In the eventListener work function, get a response object and display the JSON on the page. Hint: use JSON.parse(myXHR.responseText)
- Now that you see the JSON, pull the elements you want out of the response and display them on the page.
- EXTRA CREDIT - look at the conditions for your selected city, and change the page background to an image showing the weather there.
- Finish the project till it looks perfect to you.
Have fun and good luck!
|
|
