Verify fiddle and ajax works

Todo handling

by Ryan Morris

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>Testing jQuery and jsFiddle</h2>
    
    <div id="status">
       Checking...
    </div>
</div>

CSS

#status {
  color: yellow;
}

#status.done {
  color: green;
}

#status.fail {
  color: red;
}

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

var result = $.getJSON('http://jsonplaceholder.typicode.com/todos?userId=5');

result.done(function(response) {
  if (response && response.length > 2) {
     $("#status").addClass('done').html("We are ok!");
   } else {
     $("#status").addClass('error').html("Something went wrong");
   }
});

result.fail(function() {
  $("#status").addClass('fail').html("Something went wrong");
});