Display a todo list (as an OL) with some fake todo items already there. Add a textbox and button that when used add the text entered into the list.
Difficulty: MediumHigh
-
Clear text The text should clear from the textbox after you click the “Add” button
-
Delete items Add a “Delete” or “X” button alongside each todo item that when clicked remove that item
#Enhancements:
-
Checkbox to mark completed Create a checkbox to the left of todo items. If selected, the text in the todo item is marked with linethroug (strikethrough)
-
Enter key Allow the user to submit their todo item by pressing enter when typing in the text area
-
Editability Allow the user to edit each item. Add an edit button. Prompt the user for the new value in a modal, or inline. Do not attempt to use the same textbox that is used to add todos for this functionality. Prepopulat the edit textbox with the original text.
-
Sortability Allow the user to reorder the todo list using drag and drop functionality. Tip: Leverage the jQuery UI library for this.
-
Due date Allow the user to set a due date for each item