Final Lab

by jordwms

HTML

<script src="https://raw.githubusercontent.com/ded/reqwest/master/reqwest.min.js"></script>

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