Exercise - jQuery AJAX

Todo handling

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
    <h2>Todos</h2>
    
    
</div>

JavaScript

// Ajax with jQuery
// We will be using this service to fetch data
// This server is friendly enough to be CORS:*
//     http://jsonplaceholder.typicode.com/
// if we have trouble with that, we can do this on
// local servers fetching up static .json data
//

// Part 1
// Make a JSON request to
//     http://jsonplaceholder.typicode.com/todos
// Load the data from here and build a ul/li of TODO items
// Each todo items should display at least its title
// Hint: filter by a userId to limit the data, ?userId=5

$.getJSON('http://jsonplaceholder.typicode.com/todos?userId=5', function(response) {
   console.log(response); 
});

// Part 2
// Completion checkbox
//
// Include a checkbox with each todo item. 
// The checkbox should be checked when the item is completed
// And unchecked when the item is not completed

// Part 3
// Completed items only
//
// Update your REQUEST so that you are only fetching completed items
// Add a handler to the checkbox so that when a user checks the item
// It fades out the todo list item

// Part 4
// Telling the server something was completed
//
// When a user completes a todo item
// Send the change to the API via a PUT request
// (Note: try using $.ajax for this, with promises)
//
// Example:
//    PUT to url http://jsonplaceholder.typicode.com/todos/1
//    Data: {id: 1, title: "Title", completed: true}
//
// When the request fails (errors) make sure the todo list item
// is re-displayed to the user and given a RED background
// to indicate a failure
//
// BONUS: Indicate a failure to the user with a message in a modal

// Part 5 (BONUS)
// Still going strong?
//
// The ability to view a given user for each todo item
//
// Add a button or link to each todo list item, "View user"
// Clicking this should asynchronously load the given
// USER for that todo item (based on userId). 
// The endpoint to fetch user information is:
//    http://jsonplaceholder.typicode.com/users/1
// Display some user information in the page
// I'll leave...