Cacher is the code snippet organizer for pro developers

//*******************************
//* Using forms with JavaScript *
//*******************************
 
function onSubmit (event) {
  // Prevent form submit from refreshing the page
  event.preventDefault();
 
  console.debug('SUBMITTED');
 
  // 1. Get character info from form inputs
  // 2. Send POST request with character info
}
 
$('.js-submit').on('click', onSubmit);
 
 
function addCharacter () {
  // Create object with new character's info
  var newCharacter = {
    name: 'Chewbacca',
    occupation: 'Muscle',
    weapon: 'Bowcaster'
  };
 
  // Make a POST request to the API with the info
  var request = $.post('https://ironhack-characters.herokuapp.com/characters', newCharacter);
 
  function onSaveSuccess (response) {
    console.debug('BOOM', response);
  }
 
  function onSaveFailure (err) {
    // Print out the error response
    console.error(err.responseJSON);
  }
 
  request.done(onSaveSuccess);
  request.fail(onSaveFailure);
}
 
$('.js-add-character').on('click', addCharacter);
 
 
 
function fetchCharacters () {
  var request = $.get('https://ironhack-characters.herokuapp.com/characters');
 
  function handleCharacters (characters) {
    characters.forEach(function appendLi (chr) {
 
      // Store HTML in a variable since it's going to big
        // Use an array to make the concatenating easier
      var html = [
        '<li>',
          '<h2>' + chr.name + '</h2>',
          '<dl>',
            '<dt>Occupation:</dt>',
            '<dd>' + chr.occupation + '</dd>',
 
            '<dt>Weapon:</dt>',
            '<dd>' + chr.weapon + '</dd>',
 
            '<dt>Debt:</dt>',
            '<dd>' + chr.debt + '</dd>',
          '</dl>',
        '</li>'
 
      // Join the array by newline to make a giant string
      ].join('\n');
 
      // Append giant HTML to list
      $('.js-character-list').append(html);
    });
  }
 
  function handleError (err1, err2, err3) {
    console.error('OH NO!!', err1, err2, err3);
  }
 
  request.done(handleCharacters);
  request.fail(handleError);
}
 
$('.js-characters').on('click', fetchCharacters);

<h1 class="complex-heading">
  HTTP Requests in JavaScript
  <span>a.k.a. AJAX</span>
</h1>
 
<button class="js-add-character">Add a new character</button>
<button class="js-characters">Fetch characters</button>
 
 
<!-- Add a form to input character info -->
<form>
  <button class="js-submit" type="submit">SUBMIT</button>
</form>
 
 
<ul class="js-character-list"></ul>

//*************************
//* Making a POST request *
//*************************
 
function addCharacter () {
  // Create object with new character's info
  var newCharacter = {
    name: 'Chewbacca',
    occupation: 'Muscle',
    weapon: 'Bowcaster'
  };
 
  // Make a POST request to the API with the info
  var request = $.post('https://ironhack-characters.herokuapp.com/characters', newCharacter);
 
  function onSaveSuccess (response) {
    console.debug('BOOM', response);
  }
 
  function onSaveFailure (err) {
    // Print out the error response
    console.error(err.responseJSON);
  }
 
  request.done(onSaveSuccess);
  request.fail(onSaveFailure);
}
 
$('.js-add-character').on('click', addCharacter);
 
 
 
function fetchCharacters () {
  var request = $.get('https://ironhack-characters.herokuapp.com/characters');
 
  function handleCharacters (characters) {
    characters.forEach(function appendLi (chr) {
 
      // Store HTML in a variable since it's going to big
        // Use an array to make the concatenating easier
      var html = [
        '<li>',
          '<h2>' + chr.name + '</h2>',
          '<dl>',
            '<dt>Occupation:</dt>',
            '<dd>' + chr.occupation + '</dd>',
 
            '<dt>Weapon:</dt>',
            '<dd>' + chr.weapon + '</dd>',
 
            '<dt>Debt:</dt>',
            '<dd>' + chr.debt + '</dd>',
          '</dl>',
        '</li>'
 
      // Join the array by newline to make a giant string
      ].join('\n');
 
      // Append giant HTML to list
      $('.js-character-list').append(html);
    });
  }
 
  function handleError (err1, err2, err3) {
    console.error('OH NO!!', err1, err2, err3);
  }
 
  request.done(handleCharacters);
  request.fail(handleError);
}
 
$('.js-characters').on('click', fetchCharacters);

<h1 class="complex-heading">
  HTTP Requests in JavaScript
  <span>a.k.a. AJAX</span>
</h1>
 
<!-- Add button for creating new characters -->
<button class="js-add-character">Add a new character</button>
 
<button class="js-characters">Fetch characters</button>
 
<ul class="js-character-list"></ul>

//********************
//* Teacher Solution *
//********************
 
function fetchCharacters () {
  var request = $.get('https://ironhack-characters.herokuapp.com/characters');
 
  function handleCharacters (characters) {
    characters.forEach(function appendLi (chr) {
 
      // Store HTML in a variable since it's going to big
        // Use an array to make the concatenating easier
      var html = [
        '<li>',
          '<h2>' + chr.name + '</h2>',
          '<dl>',
            '<dt>Occupation:</dt>',
            '<dd>' + chr.occupation + '</dd>',
 
            '<dt>Weapon:</dt>',
            '<dd>' + chr.weapon + '</dd>',
 
            '<dt>Debt:</dt>',
            '<dd>' + chr.debt + '</dd>',
          '</dl>',
        '</li>'
 
      // Join the array by newline to make a giant string
      ].join('\n');
 
      // Append giant HTML to list
      $('.js-character-list').append(html);
    });
  }
 
  function handleError (err1, err2, err3) {
    console.error('OH NO!!', err1, err2, err3);
  }
 
  request.done(handleCharacters);
  request.fail(handleError);
}
 
$('.js-characters').on('click', fetchCharacters);

//****************************************
//* Add request data to the page as HTML *
//****************************************
 
function fetchCharacters () {
  var request = $.get('https://ironhack-characters.herokuapp.com/characters');
 
  function handleCharacters (characters) {
    
    // Iterate over the character data array
    characters.forEach(function appendLi (chr) {
      
      // Append an <li> with the name for each character
      $('.js-character-list').append('<li>' + chr.name + '</li>');
    });
  }
 
  function handleError (err1, err2, err3) {
    console.error('OH NO!!', err1, err2, err3);
  }
 
  request.done(handleCharacters);
  request.fail(handleError);
}
 
$('.js-characters').on('click', fetchCharacters);

<h1 class="complex-heading">
  HTTP Requests in JavaScript
  <span>a.k.a. AJAX</span>
</h1>
 
<button class="js-characters">Fetch Characters</button>
 
<!-- Add empty list to fill with JavaScript later -->
<ul class="js-character-list"></ul>

//******************************
//* Make HTTP request on click *
//******************************
 
// Define fetch character function to be called when you click
function fetchCharacters () {
  var request = $.get('https://ironhack-characters.herokuapp.com/characters');
 
  function handleCharacters (characters) {
    console.debug('REQUEST FINISH', characters);
  }
 
  function handleError (err1, err2, err3) {
    console.error('OH NO!!', err1, err2, err3);
  }
 
  request.done(handleCharacters);
  request.fail(handleError);
}
 
// Register click callback
$('.js-characters').on('click', fetchCharacters);

<h1 class="complex-heading">
  HTTP Requests in JavaScript
  <span>a.k.a. AJAX</span>
</h1>
 
<!-- Add button to fetch characters -->
<button class="js-characters">Fetch Characters</button>

//******************************
//* Handle HTTP request errors *
//******************************
 
var request = $.get('https://ironhack-characters.herokuapp.com/characters');
 
function handleCharacters (characters) {
  console.debug('REQUEST FINISH', characters);
}
 
// Define error handler
function handleError (err1, err2, err3) {
  console.error('OH NO!!', err1, err2, err3);
}
 
request.done(handleCharacters);
 
// .fail() makes sure that your error callback is called when the API request fails
//   HTTP status codes 4XX or 5XX
//   Request takes too long
request.fail(handleError);

//**************************
//* Basic HTTP GET request *
//**************************
 
// Create a request object with URL to make request to
var request = $.get('https://ironhack-characters.herokuapp.com/characters');
 
// Define a callback for handling the data from API
function handleCharacters (characters) {
  console.debug('REQUEST FINISH', characters);
}
 
// .done() makes sure that your callback is called when the API request is complete
request.done(handleCharacters);