Day 5: jQuery & Ajax

Monday, June 6, 2016

Topics

Deployment

git checkout -b gh-pages     # Create a new branch
git push -u master gh-pages  # Push it to GitHub

Your site will be published at username.github.io/repository.

Ajax

JavaScript Arrays

Each of the above items links to the w3schools page for that method, including examples, reference material (including browser support) and a Try it Yourself live editor.

CSS Selectors

Seriously, if you’re having any trouble with selectors, check out CSS Diner and CSS Selector Game.

jQuery

If you’re new to jQuery, start with Try jQuery.

Be sure to check out the excellent jQuery API documentation.

Presentations

Presentations have been converted from their original format to play in web browsers.

Projects

$.ajax({
  url: 'https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY',
  method: 'get',
  success: function(data) {
    $(document.body).prepend('<img src="' + data.hdurl + '">');
  }
});

Homework

Talk to the Mutant School API!

Baseline Goal

  • Start a new project (or fork JSON People and work from there) that loads all Mutants from the API.
  • When a new record is added to your app, create a new Mutant record by POSTing to the API.

Bonus Credit

Add a button to delete individual mutants from the API.

Mega Bonus Credit

Update existing mutant records.

Super Mega Bonus Credit

Integrate the Mutant API with MegaRoster.

Super Mega Bonus Credit Hyper Fighting

Add Pokémon, Star Wars characters, or something else from an existing API.