#To Do Lab
Objective: Build a to do app using HTML, CSS, and JavaScript with jQuery.
##Minimum Requirements
- The user will be able to:
- add tasks to their to do list
- see the tasks that are currently on their list
- cross off tasks by clicking them
- Each task will include:
- a task title
- a description of the task
- Read about Client-Side Templating to prepare for tomorrow!
##Bonuses Goal: Starter Tasks
When the page loads, display all of the starter items hard coded into your scripts.js
file.
- In
script.js
, user jQuery to create a newli
for each of the tasks in your hard coded to do list. Hint: use a loop or an iterator! - Update the loop you wrote above so that it also appends each new task to the
ul
in the view. - Encapsulate your loop code in a function called
displayTasks
. Call the function in your code.
Goal: Give each task a due date.
Consider using the JavaScript Date data structure.
- Think about the places where you'll have to make changes:
- the list item view will have to display the date
- the item input form will need another blank for the date
- the data model will have to include the date
- Change the hard coded tasks in your HTML to display a due date.
- Update the form to ask for a due date.
- Update the form submit event handler so that the new tasks it creates match the format you used in your hard coded HTML.
- Change the data model to store the due date.
- Change the styling of a task if its due date is soon.
Goal: Delete/Remove Tasks
- Instead of crossing off tasks when clicked, remove the task from the view and the model.
- Building off part 1, add a delete button to each task. Update your code so that the task is only deleted when the button is clicked.
Goal: Input Validation
-
Add a check for empty form inputs. If a task's title or description is empty, don't add it to the page.
-
Give the user some feedback if their task is rejected because of an empty input field. Consider using a Bootstrap Alert.
Goal: Styling / Branding
- Add nicer styling to your page to make it more attractive to users. Get as creative as you want!
Super Stretch Goal: Edit Tasks
- Create a form to edit tasks. Add the form to each task's
li
. - Add an edit button to each task display, and style the form so that it toggles when the edit button is clicked. Hint: search "jQuery toggle form display."
- Use the form data to update the task in the view and the model.
##Workflow & Submission
-
You may choose to start on this project in two ways. Either: (a) Fork this repository, and clone it onto your local computer, OR (b) Create a repo for the To Do app on your local computer.
-
Meet the minimum requirements listed above. Use the module notes as a reference.
-
Push your To Do app to a remote repo on your GitHub account.
-
Submit the link to your To Do app repo in the homework submission form, along with any questions or comments from the pre-reading.