JavaScript Day 4: LocalStorage & jQuery

Day 4: LocalStorage & jQuery

Friday, June 3, 2016

Solution to Thursday’s homework: Editable MegaRoster

Topics

The DOM

Editable content: contenteditable
Data attributes and .dataset

If you want to know more, the above items also link to explanations and tutorials.

`localStorage`

Using localStorage
JSON.stringify
- Using JSON.stringify
- Live example
- API reference, including optional arguments for whitelisting properties and transforming the data as it’s stringified
JSON.parse
- Using JSON.parse
- API reference, including optional argument for transforming the data as it’s parsed

CSS Selectors

:first-child pseudo-selector
:last-child pseudo-selector
[attribute=value] selector (e.g. [contenteditable=true])

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

w3schools has a thorough reference of CSS selectors beyond those we’ve discussed (or will discuss) in class. Seriously, if you’re having any trouble with selectors, check out CSS Diner and CSS Selector Game.

Font Awesome

Examples
Icon list
Font Awesome intro on w3schools, including a live editor
Icon Fonts & Accessibility

Foundation

Button styles

Don’t forget your friend the Foundation Cheat Sheet.

jQuery

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

$(), the jQuery function
Selecting elements
jQuery Objects vs. DOM elements
Manipulation
DOM traversal
Events
More jQuery tutorials:
- Codecademy’s Intro to jQuery
- jQuery Tutorial on w3schools

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

Megaroster with editable names

Homework

Make MegaRoster even fancier!

Baseline Goal

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

You’ll want to keep track of the student data—just the data, not the HTML elements—in an array.

Solution: MegaRoster with localStorage

Bonus Credit

Make the edit, up, etc. links look like buttons using Foundation styles.
Use Font-Awesome to make them even fancier.
Make it prettier to your heart’s content.

Solution: MegaRoster HTML and CSS snippets

Mega Bonus Credit

Add a favorite button that changes the appearance of the list item.
Make sure the favorite status persists between page loads.

Solution: Included in MegaRoster with localStorage

Super Mega Bonus Credit

Convert it to jQuery (ideally in a separate branch). The good news is that jQuery is already available in your project, thanks to Foundation.

Solution: MegaRoster with jQuery