Final Lab

by Andrew Corliss

HTML

<script src="https://raw.githubusercontent.com/ded/reqwest/master/reqwest.min.js"></script>
<form id='postCodeInput'>
   <input type='number' id='postCode' />
   <input type='submit' value='Submit' />
</form>
<div class="row">
    <table id="weather">
        <thead>
            <tr>
                <th id="header" colspan="2">Conditions</th>
            </tr>
        </thead>
    </table>
</div>

CSS

table {
    width: 300px;
    border-spacing: 0;
    border-collapse: collapse;
}
th {
    width: 25%;
    border-bottom: 1px solid gray;
}
td {
    width: 75%;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    padding-left: 5px;
}
.row {
    margin-top: 0.5rem;
}
}

JavaScript

// Create a table-building function that will accept some JSON data from http://jsonplaceholder.typicode.com
// and generate a table with all the trimmings
//
// Since native XHR is a pain, the reqwest library is made available in this fiddle.  Docs on how to use it are here:
// https://github.com/ded/reqwest
//
// It should:
// - build a <thead> element, with the appropriate <th> elements
// - build a <tbody> element
// - request data from the server, and create a <tr> for each item in the response (add as many columns as you like)
// - include an "actions" column for buttons
//   - add a "remove" button in the actions column which, when clicked, will send a DELETE request to the server, 
//     and remove the row when successful
// 
// BONUS 1: Create a form to add new rows to the table.  when the form is submitted, it sends a POST request with 
//          the form's data and, when the XHR is successful, adds the row to the table.
// BONUS 2: Limit the number of returned rows in each request to 10, and add pagination UI in a <tfoot> element
Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}


var el = document.getElementById('postCodeInput');

var postCode,
    url;


function getWeatherReport() {
	var xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);

    xhr.addEventListener('load', function xhrLoad(e) {
		var tbody, data, output = '';
        
        if (xhr.status === 200) {
            data = JSON.parse(xhr.responseText);
            // update the header row
            document.getElementById('header').innerHTML = data.query.results.channel.item.title;

            // grab just the conditions node
            conditions = data.query.results.channel.item.condition;
      ...