This is a basic to-do app. It is intended to be used to teach people how to make a functioning web application using jQuery event handlers and DOM manipulation. It also uses local storage to implement persistence.
Each commit represents an incremental Step (7 total) in development that is a natural checkpoint for students. To use this app in a class:
- Checkout each commit corresponding to Steps 1-7.
- Show the app at each Step in the browser.
- Have students try to implement that Step in code.
- Go over source code for each Step and explain how it works.
Provide links to documentation or hints as needed (a set of such links and hints corresponding to each Step is included below).
HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
jQuery: https://api.jquery.com/
STEP 2 LINKS AND HINTS
Centering in CSS: https://css-tricks.com/centering-css-complete-guide/
STEP 3 LINKS AND HINTS
Textarea attr: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
STEP 4 LINKS AND HINTS
Document ready: https://learn.jquery.com/using-jquery-core/document-ready/
Event handler: http://api.jquery.com/on/
Append html: http://api.jquery.com/append/
Grab value of inputs: http://api.jquery.com/val/
STEP 5 LINKS AND HINTS
Animate: http://api.jquery.com/animate/
Opacity: https://css-tricks.com/almanac/properties/o/opacity/
Event delegation: https://learn.jquery.com/events/event-delegation/
Remove html: https://api.jquery.com/remove/
STEP 6 LINKS AND HINTS
Local Storage:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
STEP 7 LINKS AND HINTS
Prompt: https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
Altering text: http://api.jquery.com/text/