To-Do list using HTML, jQuery, and CSS.

gistfile1.md

To-Do list using HTML, jQuery, and CSS.

This exercises needs jQuery, it may be best to download jQuery and add it locally to the project as doing so allows you to work offline.

Tech:

• MongoDB via MongoLab
• ExpressJS api

Requirements:

• Application must have a title, e.g. 'Teuxdeux' or 'Listify'
• User must be able to retrieve all tasks stored in the database when visiting the root path GET to /tasks
• User must be able to add items onto the list
  • User may enter text into an input field and add that text to a list by clicking on an 'add' button next to the input field.
  • New Tasks are sent via POST to it's create resource route. POST to /tasks
  • The Application must use a database (e.g. MongoDB via MongoLabs) to save all tasks.
• User must be able to view each item on it's own page GET to /tasks/:id
  • User must be able to edit/update the task with a form GET to /tasks/:id/edit shows the page with the form
  • User must be able to edit/update each item wit PUT to /tasks/:id
• User must be able to delete a task of the list DELETE to /task/:id
• User must be able to check off items on the list
  • User must have a way to keep track of progress via a checkbox next to an item on the list.
  • Once an item is checked, that element's background should become green and the text striked-through.
• There must be an area near the title to keep track of tasks left, e.g. '3 more tasks left'

In your DevLeague projects directory via the Terminal app.

1. Create a directory called 'toDo'
2. in that directory create:

• an index.html file to home your html code
• a directory for your javascript files
  • a JS file in your javascript folder to home your JS code
• a directory for your stylesheets files
  • a CSS file in your stylesheets folder to home your CSS code

3. Download jQuery (as noted above) or use a CDN.
4. In your HTML file build the scaffolding for your project and remember to link and reference all your js and css files.
5. Remember to rap your code in jQuery's .ready() function like in our other projects. (Do you remember why this must be done?)

All your functionality should be inside of functions. For example:

function highlightCurrentTask(text) { // do stuff to highlight a task }

Bonus Points: Using a framework such as Foundation or Bootstrap to build a mobile-only view. Add a way for users to remove a task from the to-do list. e.g. a delete button or by making the item draggable (hint: jQueryUI's draggable feature).

Super Bonus Saiyan Points 5 (aka we didn't go over this in class but if you figure it out, you win!): Instead of having just one list for the user to interact with find a way to give the User the ability to add multiple lists. How can we store this data so that if the user closes the page the information in the list is persistant across sessions.