mirror of
https://github.com/caperren/school_archives.git
synced 2025-11-09 21:51:15 +00:00
Added work from my other class repositories before deletion
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://openlayers.org/api/OpenLayers.js"></script> <!-- Needed for maps if I do it... -->
|
||||
<title>CS 290 Ajax Interactions - Week 6</title>
|
||||
<link href="style.css" rel=stylesheet type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="open_weather_main">
|
||||
<p class="section_titles">Open Weather Maps Test</p>
|
||||
|
||||
<div id="weather_data_container">
|
||||
<p><span id="location_header">Location: </span><span id="location"></span></p>
|
||||
<p><span class="weather_data_headers">Current Conditions: </span><span id="current_conditions"></span></p>
|
||||
<p><span class="weather_data_headers">Temp: </span><span id="current_temp"></span></p>
|
||||
<p><span class="weather_data_headers">Pressure: </span><span id="current_pressure"></span></p>
|
||||
<p><span class="weather_data_headers">Humidity: </span><span id="current_humidity"></span></p>
|
||||
<p><span class="weather_data_headers">Recent Rainfall: </span><span id="current_recent_rainfall"></span></p>
|
||||
<p><span class="weather_data_headers">Open Weather Request Details: </span><span id="request_details"></span></p>
|
||||
</div>
|
||||
|
||||
<div id="open_weather_form">
|
||||
<fieldset>
|
||||
<p>Enter City or Zipcode: <input type="text" id="open_weather_input">
|
||||
<input id="weather_submit_button" type="submit">
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="post_bin_main">
|
||||
<p class="section_titles">HTTPBIN Submission Test</p>
|
||||
<div id="httpbin_response_container">
|
||||
<p><span style="font-weight: bold;">Response in JSON: </span><span id="httpbin_reponse_json"></span></p>
|
||||
<p><span style="font-weight: bold;">Response data: </span><span id="httpbin_reponse"></span></p>
|
||||
</div>
|
||||
|
||||
<div id="httpbin_form">
|
||||
<fieldset>
|
||||
<p>Enter Data to Send to HTTPBIN: <input type="text" id="httpbin_input">
|
||||
<input id="httpbin_submit_button" type="submit">
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
var openweather_api_string = '&APPID=4f5bcff87da17d71fc4f89eb44c1a8da';
|
||||
var openweather_url = 'http://api.openweathermap.org/data/2.5/weather?';
|
||||
|
||||
function on_openweather_submit_pressed(event){
|
||||
|
||||
var search = document.getElementById("open_weather_input").value;
|
||||
|
||||
if(isNaN(parseInt(search))){
|
||||
var payload = encodeURI("q=" + search);
|
||||
}else{
|
||||
var payload = encodeURI("zip=" + search + ",us")
|
||||
}
|
||||
|
||||
var req = new XMLHttpRequest();
|
||||
var full_url = openweather_url + payload + openweather_api_string;
|
||||
|
||||
req.open('GET', full_url, true);
|
||||
req.addEventListener('load', on_openweather_response_received);
|
||||
req.send(null);
|
||||
|
||||
console.log(full_url);
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function on_openweather_response_received(response){
|
||||
var location = document.getElementById("location");
|
||||
var conditions = document.getElementById("current_conditions");
|
||||
var temp = document.getElementById("current_temp");
|
||||
var pressure = document.getElementById("current_pressure");
|
||||
var humidity = document.getElementById("current_humidity");
|
||||
var rainfall = document.getElementById("current_recent_rainfall");
|
||||
var details = document.getElementById("request_details");
|
||||
|
||||
var text_box = document.getElementById("open_weather_input");
|
||||
text_box.value = "";
|
||||
|
||||
var req_status = response.srcElement.status;
|
||||
console.log(response);
|
||||
|
||||
if(req_status >=200 && req_status < 400){
|
||||
var response_json = JSON.parse(response.srcElement.responseText);
|
||||
|
||||
if(response_json.cod == 404){
|
||||
location.textContent = "";
|
||||
conditions.textContent = "";
|
||||
temp.textContent = "";
|
||||
pressure.textContent = "";
|
||||
humidity.textContent = "";
|
||||
rainfall.textContent = "";
|
||||
details.textContent = "City Not Found!";
|
||||
}else{
|
||||
|
||||
location.textContent = response_json.name;
|
||||
conditions.textContent = response_json.weather[0].main;
|
||||
temp.textContent = (parseFloat(response_json.main.temp) - 273.15).toFixed(2).toString() + " °C";
|
||||
pressure.textContent = response_json.main.pressure + " hPa";
|
||||
humidity.textContent = response_json.main.humidity + "%";
|
||||
|
||||
var rainfall_data = response_json.rain;
|
||||
if(typeof(rainfall_data) == 'undefined'){
|
||||
rainfall.textContent = "";
|
||||
}else{
|
||||
rainfall.textContent = response_json.rain['3h'].toFixed(1) + "mm in the last 3 hours";
|
||||
}
|
||||
|
||||
details.textContent = "City Found Sucessfully!";
|
||||
}
|
||||
}else{
|
||||
location.textContent = "";
|
||||
conditions.textContent = "";
|
||||
temp.textContent = "";
|
||||
pressure.textContent = "";
|
||||
humidity.textContent = "";
|
||||
rainfall.textContent = "";
|
||||
details.textContent = "Failed communications with Open Weather Server!";
|
||||
}
|
||||
}
|
||||
|
||||
function on_httpbin_submit_pressed(event){
|
||||
var text_input = document.getElementById("httpbin_input").value;
|
||||
|
||||
var req = new XMLHttpRequest();
|
||||
var payload = {'mydata': text_input};
|
||||
req.open('POST', "http://httpbin.org/post", true);
|
||||
req.setRequestHeader('Content-Type', 'application/json');
|
||||
req.addEventListener('load', on_httpbin_response_receieved);
|
||||
req.send(JSON.stringify(payload));
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function on_httpbin_response_receieved(response){
|
||||
var response_span_json = document.getElementById("httpbin_reponse_json");
|
||||
var response_span_data = document.getElementById("httpbin_reponse");
|
||||
|
||||
var parsed_json = JSON.parse(response.srcElement.responseText);
|
||||
|
||||
response_span_json.textContent = parsed_json.data;
|
||||
response_span_data.textContent = parsed_json.json.mydata;
|
||||
}
|
||||
|
||||
function setup_events(){
|
||||
document.getElementById("weather_submit_button").addEventListener("click", on_openweather_submit_pressed);
|
||||
document.getElementById("httpbin_submit_button").addEventListener("click", on_httpbin_submit_pressed);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', setup_events);
|
||||
@@ -0,0 +1,33 @@
|
||||
#open_weather_main{
|
||||
width: 100%;
|
||||
height 40%;
|
||||
}
|
||||
|
||||
.section_titles {
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#location_header {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.weather_data_headers {
|
||||
font-weight: bold;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#open_weather_form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#post_bin_main {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
#httpbin_response_container {
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
Reference in New Issue
Block a user