-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTODOLIST.txt
109 lines (93 loc) · 5.07 KB
/
TODOLIST.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
Tasks:
Base-Mode
[x] Create a front end experience that allows a user to create a Task.
[x] When the Task is created, it should be stored inside of a database (SQL)
[x] Whenever a Task is created the front end should refresh to show all tasks that need to be completed.
[x] Each Task should have an option to 'Complete' or 'Delete'.
[x] When a Task is complete, its visual representation should change on the front end. For example, the background of the task container could change from gray to green. The complete option should be 'checked off'. Each of these are accomplished in CSS, but will need to hook into logic to know whether or not the task is complete.
[x] Whether or not a Task is complete should also be stored in the database.
[x] Deleting a Task should remove it both from the front end as well as the Database.
Base-Mode Styling
[x] Use CSS styling to move the aesthetic of the page beyond the vanilla HTML look:
[x] background color of the page
[x] font family and size
[x] text color & or background color of tasks to show whether or not they have been completed
To Do:
[x] Create files
[x] npm init --yes
[x] npm install express
[x] npm install pg
[x] .gitignore
[x] edit README file?
[x] weekend-to-do-app.sql
[x] server folder
[x] modules folder
[x] pool.js
[x] public folder
[x] scripts folder
[x] client.js
[x] styles folder
[x] style.css
[x] vendors folder
[x] jQuery file
[x] index.html
[x] routes folder
[x] router.js
[x] server.js
[x] Create Database
[x] start up sql
[x] create weekend-to-do-app database in postico
[x] CREATE TABLE list (
"id" serial PRIMARY KEY,
"task" varchar(250),
"completed" varchar(1),
"notes" varchar(250)
);
[x] create weekend-to-do-app.sql
[x] Create front end
[x] create html in public folder
[x] script
[x] vendors/jquery
[x] sweetalert2
[x] scripts/client
[x] link styles/style
[x] create header (TO DO LIST) within body
[x] main
[x] h2 add task
[x] create labels and inputs (task name and notes)
[x] create add task button
[x] h2 Tasks
[x] create table with columns Task, notes, completed?, complete, delete.
- table info and toggle complete and delete buttons to be appended in
[x] POST - INSERT: Add a task to the database when new task is created
[x] GET - SELECT: Get tasks from database and refresh page to display tasks
[x] append updated info to DOM
[x] create complete button for PUT/UPDATE using data-id
[x] complete button should only appear for tasks that are not completed
[x] PUT - UPDATE: Update completed status from in database when "complete" button clicked
[x] clicking complete should change visual representation on front end
[x] change background color of task container to green
[x] change complete section from N to Y (create actual checkmark? add to stretch)
[x] id will be 'completeButton', use data-id to target task's table id
[x] DELETE - DELETE: Delete a task from the DOM and database
[x] confirm alert using sweetalert2 before deleting
[x] CSS Styling:
[x] change background color of page
[x] font family and size
[x] text color & or background color of tasks to show whether or not they are completed
Stretch Goals:
[] Git branching: Please refer to the branching notes for a reminder on commands.
Each branch will be merged into master using --no-ff.
This will allow us to see that you branched your feature when you turn in your code.
[not compelete] feature-styling-bootstrap
[not complete] Add Bootstrap to the front end and style it up!
[didnt work] Buttons -- make the creation buttons and completion buttons green and the delete red.
[didnt work] Inputs -- make your text inputs styled in the bootstrap way
[] Responsive -- make your app responsive to different screen sizes -- check out the Layout section
[x] feature-confirm-delete
[x] In whatever fashion you would like, create an 'are you sure: yes / no' option when deleting a task.
[x] Some styled options are Bootstrap Modal or Sweet Alerts: Use the CDN option.
[] feature-ordering-task-query
[] Research Query Params to have the request reverse the order of the returned todos.
[] feature-time-completed
[] Add the ability to record when a task was completed. Show the completed date on the frontend in a pretty format.