Two-day solo lab! (but collaborate as much as needed)
Deployed My Todo App with page for tracking a single list of TODOs
- Display a list of todos and indicate whether or not complete
- Have a form for adding a todo
- Mark a todo as complete
- STRETCH: Remove a todo
- Create new repository for this lab
- Copy
starter-code
to your repo, there is a lot of code to get you going - Create a "my_todos" database
- Running locally? cli command is
createdb my_todos
to create a db - Or setup heroku and retrieve db uri via
heroku config:get DATABASE_URL
- (you can start psql with
psql <the database uri>
to connect to remote db)
- Running locally? cli command is
- There are already
scripts
inpackage.json
- Database scripts are provided. Run
npm run setup-db
Work in vertical slices!
- Get Todos
- Add a Todo
- Mark (or unmark) Todo complete (aka update)
- STRETCH: Delete a Todo
Deploy to Heroku!
Looks like:
{
task: 'Thing to do',
completed: false
}
- HTML pages already provided, all of the work today will happen on todos page.
- You will need to create components (indicated below).
- You will need to add some more CSS, but feel free to change any starter code CSS styling
- All of the data work will happen in the
TodoApp
component - For adding or removing data, don't refresh the list of todos from the server, instead:
- add, update, or remove the todo using a server method
- on success, modify the array you already have (add, replace, or remove to/from array of todos)
- call update on the list component with the updated array
TodoApp
AddTodo
(props:onAdd
)TodoList
(props:todos
,onUpdate
, STRETCH:onRemove
)- [
TodoItem
] (props:todo
,onUpdate
, STRETCH:onRemove
)
- [
Draw both a boxed UI component diagram and a tree-flow diagram and submit a photo with your lab
- Draw UI boxes
- Compose Tree Diagram from step #1
- For each component, what does it need?
- Map out how the data will flow
getTodos()
addTodo(todo)
updateTodo(todo)
- STRETCH:
removeTodo(todoId)
Route | SQL |
---|---|
GET /todos |
SELECT |
POST /todos |
INSERT w/ RETURNING |
PUT /todos/:id |
UPDATE w/ RETURNING |
STRETCH: DELETE /todos/:id DELETE |
Looking For | Points (10) |
---|---|
Component UI Diagram and Data Flow Diagram | 2 |
Vertical: Get Todos | 3 |
Vertical: Add a Todo | 2 |
Vertical: Mark Todo Complete | 3 |
Vertical: Remove Todo | +2 |