Deliverables: You should submit a zip file with one or two html pages and as man
ID: 3838294 • Letter: D
Question
Deliverables:
You should submit a zip file with one or two html pages and as many js or css files as you need.
Requirements:
The HTML page(s) should have two forms. The first is the form you will construct in the activites that connect to Open Weather Map, lets a user input a city or a zip code and asynchronously shows the weather information retrieved from Open Weather Map (via a GET).
The other should be a form that submits to http://httpbin.org/post.
This from should submit asynchronously via a POST. It needs to send a content-type of application/json (you can also experiment with other content-types like application/x-www-form-urlencoded). You should display the data you get back (which should match the data you send). It will be stored as a string in the data field of the JSON encoded string returned from the server.
Explanation / Answer
Answer:
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>POST Async</title>
</head>
<body>
<h1>Submit Weather Data</h1>
<h3>
<a href="weather.html">Check the weather!</a>
<br>
<a href="form.html">Submit weather information!</a>
</h3>
<h5>POST Form</h5>
<div id="form_input">
<form>
<label>Name/Zip:
<input type="text" name="form_city" id="form_city" size="20">
</label>
<br>
<label>Temperature:
<input type="text" name="form_temperature" id="form_temperature" size="20">
</label>
<br>
<label>Weather (description):
<input type="text" name="form_weather" id="form_weather" size="20">
</label>
<br>
<label>Humidity:
<input type="text" name="form_humidity" id="form_humidity" size="20">
</label>
<br>
<label>Wind Speed:
<input type="text" name="form_wind" id="form_wind" size="20">
</label>
<br>
<button type="submit" id="button_submit">HTTP BIN SUBMIT</button>
</form>
</div>
<div id="form_response">
</div>
<script src="form.js"></script>
</body>
</html>
Form.js
function pasteBin() {
document.getElementById('button_submit').addEventListener('click', function(event) {
var request = new XMLHttpRequest();
var urlSubmission = 'http://httpbin.org/post';
var payload = {
'form_city' : null,
'form_temperature' : null,
'form_weather' : null,
'form_humidity' : null,
'form_wind' : null,
};
payload.form_city = document.getElementById('form_city').value;
payload.form_temperature = document.getElementById('form_temperature').value;
payload.form_weather = document.getElementById('form_weather').value;
payload.form_humidity = document.getElementById('form_humidity').value;
payload.form_wind = document.getElementById('form_wind').value;
request.open('POST', urlSubmission, true);
request.setRequestHeader('Content-Type', 'application/json');
request.addEventListener('load', function() {
if (req.status >= 200 && req.status < 400) {
var result = JSON.parse(JSON.parse(req.responseText).data);
console.log(result);
postResponse(result);
} else {
console.log("Error in network: " + result.status);
}
});
request.send(JSON.stringify(payload));
event.preventDefault();
});
}
Style.css
label {
display: inline-block;
margin: 2px;
}
Weather.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Weather Report</title>
</head>
<body>
<h1>Weather Server</h1>
<h3>
<a href="weather.html">Check the weather!</a>
<br>
<a href="form.html">Submit weather information!</a>
</h3>
<form>
<fieldset>
<legend>Open Weather Map Request Form:</legend>
<label>Please enter your city and state <b>OR</b> zip code. Correct spelling is <i>very</i> important.</label>
<fieldset>
<p>
<label>City:
<input type="text" name="city" id="city" size="20">
</label></p>
<p>
<label>State:
<select id="state">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
</label></p>
<p>
<label>Zip Code:
<input type="text" name="zip" id="zip" size="5">
</label></p>
<p>
<input type="submit" name="submit_data" id="submit_data"></p>
</fieldset>
</fieldset>
</form>
<div id="result_output">
<table id="result_table">
<caption>Current Weather Results</caption>
<tr>
<th>Description</th>
<th>Measurement</th>
</tr>
<tr>
<td>City/Town:</td>
<td id="owm_name">N/A</td>
</tr>
<tr>
<td>Temperature:</td>
<td id="owm_main_temp">N/A</td>
</tr>
<tr>
<td>Weather:</td>
<td id="owm_weather_description">N/A</td>
</tr>
<tr>
<td>Humidity:</td>
<td id="owm_main_humidity">N/A</td>
</tr>
<tr>
<td>Wind Speed:</td>
<td id="owm_wind_speed">N/A</td>
</tr>
<tr>
<td>Sunrise:</td>
<td id="owm_sunrise">N/A</td>
</tr>
<tr>
<td>Sunset:</td>
<td id="owm_sunset">N/A</td>
</tr>
</table>
</div>
<script src="weather.js"></script>
</body>
</html>
Weather.js
function bindButtons() {
document.getElementById('submit_data').addEventListener('click', function(event) {
// generate AJAX request
var request = new XMLHttpRequest();
var result;
var owmURL = 'http://api.openweathermap.org/data/2.5/weather';
var cityJoin = '?q=';
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
state = "," + state.toLowerCase();
var zipJoin = '?zip=';
var zip = document.getElementById("zip").value;
var countryCode = ',us';
var apiJoin = '&appid=';
var apiKey = '94365262';
apiKey += '92fe4f1f';
apiKey += '43a53e26';
apiKey += 'b01b18d0';
var payload;
if (zip === '' || zip.length <= 4) {
payload = owmURL + cityJoin + city + state + apiJoin + apiKey;
}
// If city, state and/or zip are listed, use zip
else {
payload = owmURL + zipJoin + zip + countryCode + apiJoin + apiKey;
}
// For debugging
console.log("City is: ", city);
console.log("State is: ", state);
console.log("Zip is: ", zip);
console.log("Complete URL: ", payload);
// open and send async. request in required format
request.open('GET', payload, true);
// add listener to store JSON data in results if it successfully loads
request.addEventListener('load', displayAPIResults);
request.send(null);
// stop event from auto-refreshing
event.preventDefault();
})
}
// To add to HTML table
function displayAPIResults(response) {
console.log("Printing response: ", response);
var rJSON;
if(response.srcElement.status >= 200 && response.srcElement.status < 400) {
rJSON = JSON.parse(response.srcElement.responseText);
console.log(rJSON);
}
// Add gathered data to website
document.getElementById("owm_name").textContent = rJSON.name;
document.getElementById("owm_main_temp").textContent = kelvinToFahrenheit(rJSON.main.temp) + "F";
document.getElementById("owm_weather_description").textContent = rJSON.weather[0].description;
document.getElementById("owm_main_humidity").textContent = rJSON.main.humidity + "%";
document.getElementById("owm_wind_speed").textContent = msTomph(rJSON.wind.speed);
document.getElementById("owm_sunrise").textContent = timeConverter(rJSON.sys.sunrise);
document.getElementById("owm_sunset").textContent = timeConverter(rJSON.sys.sunset);
}
// converts UNIX time to user's local time
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
var hour = a.getHours();
var min = a.getMinutes();
var sec = a.getSeconds();
return (hour + ':' + min + ':' + sec);
}
// converts kelvin to fahrenheit
// inspired by basic math
function kelvinToFahrenheit(kelvin) {
var f = (kelvin * (9/5) - 459.67);
f = f.toFixed(2);
return f;
}
// converts m/s to m/h
// inspired by super basic math
function msTomph (speed) {
speed = speed * 2.2369362620544;
speed = speed.toFixed(2);
return speed;
}
// init
function init() {
document.addEventListener('DOMContentLoaded', bindButtons);
}
// get things going
init();
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.