https://github.com/tompinataro/toms-to-do-list
48-hr Sprint: Full-Stack (CRUD) To-Do List Application
https://github.com/tompinataro/toms-to-do-list
clientside serverside sqldatabase
Last synced: 2 months ago
JSON representation
48-hr Sprint: Full-Stack (CRUD) To-Do List Application
- Host: GitHub
- URL: https://github.com/tompinataro/toms-to-do-list
- Owner: tompinataro
- Created: 2024-09-19T01:22:26.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-13T00:28:12.000Z (4 months ago)
- Last Synced: 2024-12-27T23:13:24.979Z (4 months ago)
- Topics: clientside, serverside, sqldatabase
- Language: JavaScript
- Homepage: https://github.com/tompinataro/Toms-To-Do-List
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 48-hour Sprint: Full-Stack CRUD to-do list application
Designed and built a To-Do List App with client-side, server-side, and an SQL database
## Features:
* A front-end experience that allows a user to create and store tasks inside
a database table and updates the DOM to display it as a new to-do item
* Tasks have buttons to 'Complete' or 'Delete'
* When a task is marked a completed:
* Its `isComplete` boolean value in the database table is updated to `TRUE`
* When a task has been marked as completed a CSS class is applied to the task
its "complete" button visibly appears grayed out
* When a task is marked a deleted:
* It is removed from the database table
* The DOM updates task list without the deleted task
## CSS styling moves project aesthetic beyond basic HTML
- Background color of the single page view is unique
- Font family and size are adjusted to please the eye
- Text or background color of Tasks indicate their status
## Database Created through Postico
- Runs the queries documented in `database.sql`
- Creates a `todos` table and populates it with Tasks
## Testing Rubrics
- A task's text has data-testid = "toDoTextInput"
- New Task Button has data-testid = "submitButton"
- Rendered Tasks have data-testid = "toDoItem"
- HTML elements for tasks have ...
- Delete buttons have data-testid ="deleteButton" and are children of data-testid = "toDoItem"
- Complete buttons have data-testid ="completeButton" and are children of data-testid = "toDoItem"
## Future Feature Ideas
- Colorize Creation, Completion and Delete Buttons
- Add Bootstrap styles to Task text inputs
- Responsive screen sizes
- Add Sweet Alert pop-ups as confirmations
- Add TIMESTAMP column to the Task table