To do App
This type of application is very common to tackle when learning a new language, which makes it extremely valuable to work through for the first time. This app allow user to create a to do list and for them to be able to remove them.
Build With
- HTML
- JavaScript
- Bootstrap
- Express.js
- jQuery
- PostgreSQL
Getting Started
To set this application up on your local machine, first fork, download, or clone this repository
Prerequisites
Some of the software require before attempting to start this application
- Have postico install
- Have Node.js
Installing
- set up database in Postico name "to-do-app", postico host is name localhost, and port of 5432
- npm install
- npm start
- To see the app working go to http://localhost:5000/ on your browser
Here are the specific components for the Application:
- Create a front end experience that allows a user to create a Task.
- When the Task is created, it should be stored inside of a database (SQL)
- Whenever a Task is created the front end should refresh to show all tasks that need to be completed.
- Each Task should have an option to 'Complete' or 'Delete'.
- 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.
- Whether or not a Task is complete should also be stored in the database.
- Deleting a Task should remove it both from the front end as well as the Database.
Create a Database
Be sure to create a new database through Postico. Use the name to-do-app. You will need to use this name in your database connection configuration on your server.
Copy the code inside weekend-to-do-app.sql and run it inside postico to set up some of the database
Database Structure
Please include a database.sql text file in your repo that includes all of your CREATE TABLE queries. This is so we can re-create your database while testing your app.
Next Steps
-
Add Bootstrap to the front end and style it up!
-
Buttons
-
Cards
-
Jumbotron
-
In whatever fashion you would like, create an 'are you sure: yes / no' option when deleting a task.
-
Adjust the logic so that completed tasks are brought to the bottom of the page, where the remaining tasks left to complete are brought to the top of the list.
-
Notification of task being added