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 @@
|
||||
This has some text in it.
|
||||
@@ -0,0 +1 @@
|
||||
This file has some more text.
|
||||
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<title>CS 290 - Week 2 Assignment</title>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption>Comparison of Common Microcontroller Specifications</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Max Clock</th>
|
||||
<th>Num I/O</th>
|
||||
<th>Flash</th>
|
||||
<th>Ram</th>
|
||||
<th>EEPROM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Atmel ATMEGA328P</th>
|
||||
<td>16 MHz</td>
|
||||
<td>23</td>
|
||||
<td>32 KB</td>
|
||||
<td>2 KB</td>
|
||||
<td>1 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Atmel ATXMEGA256A3U</th>
|
||||
<td>32 MHz</td>
|
||||
<td>50</td>
|
||||
<td>256 KB</td>
|
||||
<td>16 KB</td>
|
||||
<td>4 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Atmel ATSAMD21J18</th>
|
||||
<td>48 MHz</td>
|
||||
<td>52</td>
|
||||
<td>256 KB</td>
|
||||
<td>32 KB</td>
|
||||
<td>N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>TI MSP430F2131</th>
|
||||
<td>16 MHz</td>
|
||||
<td>16</td>
|
||||
<td>8 KB</td>
|
||||
<td>256 B</td>
|
||||
<td>N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Microchip PIC16F1825</th>
|
||||
<td>32 MHz</td>
|
||||
<td>11</td>
|
||||
<td>14 KB</td>
|
||||
<td>1 KB</td>
|
||||
<td>256 B</td>
|
||||
</tr>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan=4>Important</td>
|
||||
<td colspan=2>Also Important</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</tbody>
|
||||
</table>
|
||||
<dl>
|
||||
<dt>Projects I've Done With Microcontrollers</dt>
|
||||
<dd>OSU Robotics Club Mars Rover Team System Control Boards</dd>
|
||||
<dd>Four Axis Stepper Motion Controller</dd>
|
||||
<dd>E-Paper Business Card (In-Progress)</dd>
|
||||
<dt>Embedded Languages I've Used</dt>
|
||||
<dd>Embedded C</dd>
|
||||
<dd>Embedded C++</dd>
|
||||
<dt>Projects Where I've Fried a Microntroller in Development</dt>
|
||||
<dd>Mars Rover Team Control Boards</dd>
|
||||
<dd>Four Axis Motion Controller REV 1</dd>
|
||||
<dd>75% Of My Microcontroller Based Projects</dd>
|
||||
</dl>
|
||||
<div class="outer-content">
|
||||
<div class="inner-content">
|
||||
<body><p>Needs More Micro</p></body>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-div">
|
||||
<fieldset>
|
||||
<legend>Form for POST Submission</legend>
|
||||
<form action="http://classes.engr.oregonstate.edu/eecs/winter2015/cs290-400/tools/class-content/form_tests/check_request.php" method="post">
|
||||
<fieldset>
|
||||
<p>Enter Text Here:<input type="text" name="text_input">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<p>Enter A Number Here:<input type="number" name="numerical_input">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<p>Enter A Password Here:<input type="password" name="password_input">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<p>Choose your favorite candy:</p>
|
||||
<input type="radio" name="candy" value="Snickers" checked>Snickers<br>
|
||||
<input type="radio" name="candy" value="Skittles">Skittles<br>
|
||||
<input type="radio" name="candy" value="Mentos">Mentos<br>
|
||||
<input type="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="get-div">
|
||||
<fieldset>
|
||||
<legend>Form for GET Submission</legend>
|
||||
<form action="http://classes.engr.oregonstate.edu/eecs/winter2015/cs290-400/tools/class-content/form_tests/check_request.php" method="get">
|
||||
<fieldset>
|
||||
<p>Enter Text Here:<input type="text" name="text_input">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<p>Enter A Number Here:<input type="number" name="numerical_input">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<p>Enter A Password Here:<input type="password" name="password_input">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<p>Choose your favorite candy:</p>
|
||||
<input type="radio" name="candy" value="Snickers" checked>Snickers<br>
|
||||
<input type="radio" name="candy" value="Skittles">Skittles<br>
|
||||
<input type="radio" name="candy" value="Mentos">Mentos<br>
|
||||
<input type="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
table>caption{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid black;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
tbody>tr>th{
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
tbody>tr:nth-of-type(even) {
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
tbody>tr:nth-of-type(odd) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
width: 75%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: lightblue;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.outer-content {
|
||||
float: left;
|
||||
width: 75%;
|
||||
background-color: pink;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
.post-div{
|
||||
margin-top: 100px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.get-div{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
form>fieldset{
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
input[type="submit"]{
|
||||
margin-left: 5px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>title</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="javascript_objects.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Call a function before it's declared
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//Function call and console logging BEFORE function decleration
|
||||
console.log(simple_string_reverser("Here is some text to reverse!")); //Workss
|
||||
|
||||
function simple_string_reverser(input_word) {
|
||||
if(typeof(input_word) != 'string'){
|
||||
console.log("Error. Wrong input type.");
|
||||
return;
|
||||
}
|
||||
|
||||
var new_simple_string = "";
|
||||
var input_length = input_word.length;
|
||||
for(var i = 0 ; i < input_word.length ; i++) {
|
||||
new_simple_string += input_word[input_length-1-i];
|
||||
}
|
||||
return new_simple_string;
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Call a function assigned to a variable before it's declared
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
console.log(one_year_ago_date_string()); //Doesn't work
|
||||
|
||||
var one_year_ago_date_string = function(){
|
||||
var temp_date = new Date();
|
||||
temp_date.setFullYear(temp_date.getFullYear()-1);
|
||||
return temp_date.toDateString();
|
||||
}
|
||||
console.log(one_year_ago_date_string()); //Works
|
||||
@@ -0,0 +1,45 @@
|
||||
function deepEqual(a, b){
|
||||
if(((typeof(a) === 'object') && (a !== null)) &&
|
||||
((typeof(b) === 'object') && (b !== null))){
|
||||
|
||||
var size_a = 0;
|
||||
var size_b = 0;
|
||||
|
||||
for(prop in a){ size_a++; }
|
||||
|
||||
for(prop in b){ size_b++; }
|
||||
|
||||
if(size_a == size_b){
|
||||
for(prop in a){
|
||||
if(!b.hasOwnProperty(prop)){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
for(prop in a){
|
||||
if(!deepEqual(a[prop], b[prop])){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
|
||||
}else{
|
||||
return (a === b);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
var obj = {here: {is: "an"}, object: 2};
|
||||
console.log(deepEqual(obj, obj));
|
||||
|
||||
console.log(deepEqual(obj, {here: 1, asd: 2}));
|
||||
|
||||
console.log(deepEqual(obj, {here: {is: "an"}, object: 2}));
|
||||
|
||||
//console.log(deepEqual(1, 2));
|
||||
|
||||
//console.log(deepEqual(2, 2));
|
||||
@@ -0,0 +1,95 @@
|
||||
function Automobile( year, make, model, type ){
|
||||
this.year = year; //integer (ex. 2001, 1995)
|
||||
this.make = make; //string (ex. Honda, Ford)
|
||||
this.model = model; //string (ex. Accord, Focus)
|
||||
this.type = type; //string (ex. Pickup, SUV)
|
||||
this.logMe = function(print_type){
|
||||
if(print_type){
|
||||
console.log(this.year + " " + this.make + " " + this.model + " " + this.type);
|
||||
}else{
|
||||
console.log(this.year + " " + this.make + " " + this.model);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var automobiles = [
|
||||
new Automobile(1995, "Honda", "Accord", "Sedan"),
|
||||
new Automobile(1990, "Ford", "F-150", "Pickup"),
|
||||
new Automobile(2000, "GMC", "Tahoe", "SUV"),
|
||||
new Automobile(2010, "Toyota", "Tacoma", "Pickup"),
|
||||
new Automobile(2005, "Lotus", "Elise", "Roadster"),
|
||||
new Automobile(2008, "Subaru", "Outback", "Wagon")
|
||||
];
|
||||
|
||||
//Implemented insertion sort algorithm.
|
||||
//Reversed [j] and [j-1] from traditional algorithm to sort max first
|
||||
function sortArr( comparator, array ){
|
||||
for(var i = 1 ; i < array.length ; i++){
|
||||
var j = i;
|
||||
while((j > 0) && (comparator(array[j], array[j-1]))){
|
||||
var temp = array[j];
|
||||
array[j] = array[j-1];
|
||||
array[j-1] = temp;
|
||||
j--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function yearComparator(auto1, auto2){
|
||||
if(auto1.year > auto2.year){
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function makeComparator(auto1, auto2){
|
||||
if(auto1.make.toLowerCase() < auto2.make.toLowerCase()){
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function typeComparator(auto1, auto2){
|
||||
var type_order = {'roadster': 4, 'pickup': 3, 'suv': 2, 'wagon': 1}
|
||||
var auto1_type = type_order[auto1.type.toLowerCase()];
|
||||
var auto2_type = type_order[auto2.type.toLowerCase()];
|
||||
|
||||
if(typeof(auto1_type) == 'undefined'){ auto1_type = 0; }
|
||||
if(typeof(auto2_type) == 'undefined'){ auto2_type = 0; }
|
||||
|
||||
if(auto1_type == auto2_type){
|
||||
return yearComparator(auto1, auto2);
|
||||
}else if(auto1_type > auto2_type){
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function print_auto_array(input_array, print_type){
|
||||
for(index in input_array){
|
||||
input_array[index].logMe(print_type);
|
||||
}
|
||||
}
|
||||
|
||||
var print_type = true;
|
||||
|
||||
console.log("*****");
|
||||
console.log("The cars sorted by year are:");
|
||||
sortArr(yearComparator, automobiles);
|
||||
print_auto_array(automobiles, print_type);
|
||||
|
||||
console.log("\nThe cars sorted by make are:");
|
||||
sortArr(makeComparator, automobiles);
|
||||
print_auto_array(automobiles, print_type);
|
||||
|
||||
console.log("\nThe cars sorted by type are:");
|
||||
sortArr(typeComparator, automobiles);
|
||||
print_auto_array(automobiles, print_type);
|
||||
console.log("*****");
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>title</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="automobile.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CS 290 DOM Assignment - Week 5</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
var current_col = 0;
|
||||
var current_selected_cell;
|
||||
|
||||
function up_event_handler(current_event){
|
||||
var prev_row_sib = current_selected_cell.parentElement.previousElementSibling;
|
||||
|
||||
if((typeof(prev_row_sib) == 'object') && (prev_row_sib != null)){
|
||||
handle_new_cell_selection(prev_row_sib.children[current_col]);
|
||||
}
|
||||
}
|
||||
|
||||
function down_event_handler(current_event){
|
||||
var next_row_sib = current_selected_cell.parentElement.nextElementSibling;
|
||||
|
||||
if((typeof(next_row_sib) == 'object') && (next_row_sib != null)){
|
||||
handle_new_cell_selection(next_row_sib.children[current_col]);
|
||||
}
|
||||
}
|
||||
|
||||
function left_event_handler(current_event){
|
||||
var prev_sib = current_selected_cell.previousSibling;
|
||||
|
||||
if((typeof(prev_sib) == 'object') && (prev_sib != null)){
|
||||
current_col--;
|
||||
handle_new_cell_selection(prev_sib);
|
||||
}
|
||||
}
|
||||
|
||||
function right_event_handler(current_event){
|
||||
var next_sib = current_selected_cell.nextSibling;
|
||||
|
||||
if((typeof(next_sib) == 'object') && (next_sib != null)){
|
||||
current_col++;
|
||||
handle_new_cell_selection(next_sib);
|
||||
}
|
||||
}
|
||||
|
||||
function mark_event_handler(current_event){
|
||||
current_selected_cell.style.backgroundColor = 'yellow';
|
||||
}
|
||||
|
||||
function handle_new_cell_selection(new_cell){
|
||||
current_selected_cell.style.border = '1px solid black';
|
||||
current_selected_cell = new_cell;
|
||||
current_selected_cell.style.border = '3px solid black';
|
||||
}
|
||||
|
||||
|
||||
function add_page_table(){
|
||||
var page_body = document.body;
|
||||
|
||||
var new_table = document.createElement("table");
|
||||
new_table.setAttribute('id', 'my_table_id');
|
||||
new_table.style.border = '1px solid black';
|
||||
new_table.style.borderCollapse = 'collapse';
|
||||
new_table.style.marginLeft = 'auto';
|
||||
new_table.style.marginRight = 'auto';
|
||||
|
||||
var new_thead = new_table.createTHead();
|
||||
var new_tbody = new_table.createTBody();
|
||||
var head_tr = new_thead.insertRow(0);
|
||||
|
||||
for(var i = 0 ; i < 4 ; i++){
|
||||
var new_header_cell = head_tr.insertCell(i);
|
||||
new_header_cell.style.border = '1px solid black';
|
||||
new_header_cell.textContent = 'Header ' + (i+1);
|
||||
}
|
||||
|
||||
for(var i = 0 ; i < 3 ; i++){
|
||||
var curr_row = new_tbody.insertRow(i);
|
||||
for(var j = 0 ; j < 4 ; j++){
|
||||
var curr_cell = curr_row.insertCell(j);
|
||||
curr_cell.style.border = '1px solid black';
|
||||
curr_cell.textContent = (j+1).toString() + ", " + (i+1).toString();
|
||||
}
|
||||
}
|
||||
|
||||
new_table.appendChild(new_thead);
|
||||
new_table.appendChild(new_tbody);
|
||||
page_body.appendChild(new_table);
|
||||
}
|
||||
|
||||
function add_page_buttons(){
|
||||
var page_body = document.body;
|
||||
|
||||
var new_table = document.createElement("table");
|
||||
new_table.style.marginTop = '20px';
|
||||
new_table.style.marginLeft = 'auto';
|
||||
new_table.style.marginRight = 'auto';
|
||||
var new_tbody = new_table.createTBody();
|
||||
|
||||
//Make row 0
|
||||
var curr_row = new_tbody.insertRow(0);
|
||||
|
||||
//Make row 0 with up arrow
|
||||
curr_row.insertCell(0);
|
||||
var curr_cell = curr_row.insertCell(1);
|
||||
var curr_button = document.createElement('Button');
|
||||
curr_button.innerHTML = '↑';
|
||||
curr_button.addEventListener("click", up_event_handler);
|
||||
curr_cell.appendChild(curr_button);
|
||||
curr_row.insertCell(2); //Final cell for 3x3
|
||||
|
||||
//Make row 1
|
||||
var curr_row = new_tbody.insertRow(1);
|
||||
|
||||
//Create right, Mark, and Left Buttons
|
||||
var curr_cell = curr_row.insertCell(0);
|
||||
var curr_button = document.createElement('Button');
|
||||
curr_button.innerHTML = '→';
|
||||
curr_button.addEventListener("click", right_event_handler);
|
||||
curr_cell.appendChild(curr_button);
|
||||
|
||||
var curr_cell = curr_row.insertCell(0);
|
||||
var curr_button = document.createElement('Button');
|
||||
curr_button.textContent = 'Mark Cell';
|
||||
curr_button.addEventListener("click", mark_event_handler);
|
||||
curr_cell.appendChild(curr_button);
|
||||
|
||||
var curr_cell = curr_row.insertCell(0);
|
||||
var curr_button = document.createElement('Button');
|
||||
curr_button.innerHTML = '←';
|
||||
curr_button.addEventListener("click", left_event_handler);
|
||||
curr_cell.appendChild(curr_button);
|
||||
|
||||
//Make row 2
|
||||
var curr_row = new_tbody.insertRow(2);
|
||||
|
||||
//Add down arrow
|
||||
curr_row.insertCell(0);
|
||||
var curr_cell = curr_row.insertCell(1);
|
||||
var curr_button = document.createElement('Button');
|
||||
curr_button.innerHTML = '↓';
|
||||
curr_button.addEventListener("click", down_event_handler);
|
||||
curr_cell.appendChild(curr_button);
|
||||
curr_row.insertCell(2); //Final cell for 3x3
|
||||
|
||||
|
||||
//Center all buttons in table
|
||||
var all_td = new_table.getElementsByTagName('td');
|
||||
for(var i = 0 ; i < all_td.length ; i++) {
|
||||
all_td[i].style.textAlign = 'center';
|
||||
}
|
||||
|
||||
//Add nested element and add to page
|
||||
new_table.appendChild(new_tbody);
|
||||
page_body.appendChild(new_table);
|
||||
}
|
||||
|
||||
function select_cell_1_1(){
|
||||
var main_table = document.getElementById('my_table_id');
|
||||
current_selected_cell = main_table.children[1].children[0].firstElementChild;
|
||||
current_selected_cell.style.border = '3px solid black';
|
||||
}
|
||||
|
||||
add_page_table();
|
||||
add_page_buttons();
|
||||
select_cell_1_1();
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "CS290_Week7",
|
||||
"version": "1.0.0",
|
||||
"description": "Week 7 content.",
|
||||
"main": "week7.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Corwin Perren",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"body-parser": "^1.13.3",
|
||||
"express": "^4.13.2",
|
||||
"express-handlebars": "^2.0.1",
|
||||
"express-session": "^1.11.3",
|
||||
"mysql": "^2.8.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<h1>Error 404 - Page Is Nowhere to be Found</h1>
|
||||
@@ -0,0 +1 @@
|
||||
<h1>Error 500 - Something Has Gone Terribly Wrong</h1>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Demo Page</title>
|
||||
</head>
|
||||
<body>
|
||||
{{{body}}}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "CS290_Week7",
|
||||
"version": "1.0.0",
|
||||
"description": "Week 7 content.",
|
||||
"main": "week7.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Corwin Perren",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"body-parser": "^1.15.0",
|
||||
"express": "^4.13.2",
|
||||
"express-handlebars": "^2.0.1",
|
||||
"express-session": "^1.11.3",
|
||||
"mysql": "^2.8.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<h1>Error 404 - Page Is Nowhere to be Found</h1>
|
||||
@@ -0,0 +1 @@
|
||||
<h1>Error 500 - Something Has Gone Terribly Wrong</h1>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CS 290 Get and Post Checker - Week 7</title>
|
||||
</head>
|
||||
<body>
|
||||
{{{body}}}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<h1>{{StatusHeader}}</h1>
|
||||
<h2>Query Parameters</h2>
|
||||
<ul>
|
||||
{{#each query_data}}
|
||||
<li>{{this.name}}: {{this.value}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
@@ -0,0 +1,14 @@
|
||||
<h1>{{StatusHeader}}</h1>
|
||||
<h2>Query Parameters</h2>
|
||||
<ul>
|
||||
{{#each query_data}}
|
||||
<li>{{this.name}}: {{this.value}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
<h2>Body Property Values</h2>
|
||||
<ul>
|
||||
{{#each body_data}}
|
||||
<li>{{this.name}}: {{this.value}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
@@ -0,0 +1,69 @@
|
||||
//Base code copied with permission from https://github.com/wolfordj/CS290-Server-Side-Examples
|
||||
var express = require('express');
|
||||
var app = express();
|
||||
var handlebars = require('express-handlebars').create({defaultLayout:'main'});
|
||||
var bodyParser = require('body-parser');
|
||||
|
||||
app.use(bodyParser.urlencoded({ extended: false }));
|
||||
app.use(bodyParser.json());
|
||||
|
||||
app.engine('handlebars', handlebars.engine);
|
||||
app.set('view engine', 'handlebars');
|
||||
app.set('port', 3000);
|
||||
|
||||
function get_data_array(data){
|
||||
params = [];
|
||||
|
||||
for(par in data){
|
||||
params.push({'name':par, 'value':data[par]});
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
function generateContext_GET(req){
|
||||
var dynamic_page_contents = {};
|
||||
dynamic_page_contents.StatusHeader = req.method + " Request Received";
|
||||
dynamic_page_contents.query_data = get_data_array(req.query);
|
||||
|
||||
return dynamic_page_contents;
|
||||
}
|
||||
|
||||
function generateContext_POST(req){
|
||||
var dynamic_page_contents = {};
|
||||
dynamic_page_contents.StatusHeader = req.method + " Request Received";
|
||||
|
||||
dynamic_page_contents.query_data = get_data_array(req.query);
|
||||
dynamic_page_contents.body_data = get_data_array(req.body);
|
||||
|
||||
return dynamic_page_contents;
|
||||
}
|
||||
|
||||
function my_get(req,res){
|
||||
res.render('week7_GET', generateContext_GET(req));
|
||||
}
|
||||
|
||||
app.get('/', my_get);
|
||||
|
||||
app.post('/', function(req,res){
|
||||
res.render('week7_POST', generateContext_POST(req));
|
||||
});
|
||||
|
||||
app.use(function(req,res){
|
||||
res.status(404);
|
||||
res.render('404');
|
||||
});
|
||||
|
||||
app.use(function(err, req, res, next){
|
||||
console.error(err.stack);
|
||||
res.type('plain/text');
|
||||
res.status(500);
|
||||
res.render('500');
|
||||
});
|
||||
|
||||
function on_listen(){
|
||||
console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.');
|
||||
}
|
||||
|
||||
app.listen(app.get('port'), on_listen);
|
||||
|
||||
Reference in New Issue
Block a user