Web Programming: The part below is what I am stuck on:

Modify index.html to contain a text box for the user to type in a city and a submit button. When the user types a city into the textbox and then clicks the submit button, the page should update with new weather information for that city. The old city weather information should be completely replaced with the new city weather information(I should not see multiple cities being displayed each time I click submit). You'll need to define a function that handles click events generated by the submit button. To intercept the click event, you need to add a onclick attribute to the submit button and set it to the click event handler function. Your event handler function should contain the code that calls the ajax function and should use the city that the user entered instead of "San Bernardino" for the OpenWeatherMap API url.

There are 3 files that I already created. The code being used is as follows:

***index.html****

**ajax.js***

//ajax.js function ajax(url, handler) { var req = new XMLHttpRequest(); if (!req) { alert('Browser not supported.'); return; }

req.onreadystatechange = function() { var resp; if (this.readyState === XMLHttpRequest.DONE) { if (this.status === 200) { resp = this.responseText; handler(resp); } else { handler('Ajax error, status: ' + this.status); } } }; req.open('GET', url, true); req.send(); }

//ajax.js function ajax(url, handler) { var req = new XMLHttpRequest(); if (!req) { alert('Browser not supported.'); return; }

req.onreadystatechange = function() { var resp; if (this.readyState === XMLHttpRequest.DONE) { if (this.status === 200) { resp = this.responseText; handler(resp); } else { handler('Ajax error, status: ' + this.status); } } }; req.open('GET', url, true); req.send(); }

*** parse-response.js ***

function parseResponse(responseText) { var response = JSON.parse(responseText); var condition = response.weather[0].main; var city = response.name; var country = response.sys.country; var degK = response.main.temp; //temperature data is in Kelvin var degF = 1.8*(degK - 273) + 32; //Converting Kelvin to Fahrenheit. degF = Math.floor(degF); //removing decimals var weatherBox = document.getElementById("weather"); response = city + ", " + country + " " + degF + "\u{00B0}" +" F " + condition; return response; }