Day 3: Putting the Pieces Together

Thursday, June 2, 2016

Solution to Wednesday’s homework: MegaRoster with delete and promote

Topics

Foundation

  • The grid system
  • Responsive design (changing style based on the window size)
  • Check out the Foundation Cheat Sheet

Functions as Methods

  • Methods calling methods (e.g. megaRoster.addChild calls this.buildListItem)
  • Binding: Manually setting the value of this with bind

Event Objects

  • currentTarget: The object on which the event occurred

DOM Manipulation

  • parentElement
  • childNodes
  • firstChild
  • firstElementChild
  • insertBefore

Project Organization

  • When to write a new function
  • Avoiding global variables

Presentations

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

Homework: MegaRoster - now with even more mega

Enhance MegaRoster! Make the students editable, and add the ability to move them around in the list.

Baseline Goal

Add a link that moves the student to the top of the list. Either change the behavior of the existing promote link, or add a new top link.

Bonus Credit

Add links to move the student up and down the list, one spot at a time.

Mega Bonus Credit

Disable the up link when the student reaches the top, and disable the down link when the student reaches the bottom.

Super Mega Bonus Credit

Make the student name editable in place after it’s added to the roster.

Super Mega Bonus Credit Hyper Fighting

Make the student data persistent between page refreshes! That is, keep the students from disappearing every time the page is refreshed.

Hint: Use localStorage.

Update: Solution: Editable MegaRoster