Skip to content

Latest commit

 

History

History
72 lines (49 loc) · 3.34 KB

README.md

File metadata and controls

72 lines (49 loc) · 3.34 KB
Raw

#To Do Lab

Objective: Build a to do app using HTML, CSS, and JavaScript with jQuery.

##Minimum Requirements

  1. 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

  2. Each task will include:
    • a task title
    • a description of the task

  3. 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.

  1. In script.js, user jQuery to create a new li for each of the tasks in your hard coded to do list. Hint: use a loop or an iterator!
  2. Update the loop you wrote above so that it also appends each new task to the ul in the view.
  3. 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.

  1. 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
  2. Change the hard coded tasks in your HTML to display a due date.
  3. Update the form to ask for a due date.
  4. Update the form submit event handler so that the new tasks it creates match the format you used in your hard coded HTML.
  5. Change the data model to store the due date.
  6. Change the styling of a task if its due date is soon.

Goal: Delete/Remove Tasks

  1. Instead of crossing off tasks when clicked, remove the task from the view and the model.
  2. 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

  1. Add a check for empty form inputs. If a task's title or description is empty, don't add it to the page.

  2. Give the user some feedback if their task is rejected because of an empty input field. Consider using a Bootstrap Alert.

Goal: Styling / Branding

  1. Add nicer styling to your page to make it more attractive to users. Get as creative as you want!

Super Stretch Goal: Edit Tasks

  1. Create a form to edit tasks. Add the form to each task's li.
  2. 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."
  3. Use the form data to update the task in the view and the model.

##Workflow & Submission

  1. 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.

  2. Meet the minimum requirements listed above. Use the module notes as a reference.

  3. Push your To Do app to a remote repo on your GitHub account.

  4. Submit the link to your To Do app repo in the homework submission form, along with any questions or comments from the pre-reading.