To Do App (Front End)

A basic and simple To Do App. This is just the front end part. The back end part is on a different repository in this same account. Go check it out!

Try it yourself!

Online

You can try this program online. Go to the following link: https://hisiste.github.io/ToDo-App-Front-End/

NOTE: It doesn't save any info, as the Back End is not implemented here. After restarting the page, all info will be deleted.

NOTE 2: You will see a lot of errors on the console part of the page. This is normal. It will try to communicate with the API but won't find it. Regardless, this is still usable and you can experiment with it.

Locally

You need to have Node installed on your computer. It is recommended to use version 20.x or above.

You can run it locally using the following commands:

Clone this repository.

git clone https://github.com/Hisiste/ToDo-App-Front-End.git

Enter the folder and install the dependencies.
```
cd ToDo-App-Front-End && npm install
```

Run a server.

npm run dev

It will display an output similar to this:

VITE v4.3.7  ready in 1080 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

There you have your URL!

Be sure to also clone the Back End and run it to save your to dos!

Goals

The program currently has/lacks the following functionality:

Create a "to do" specifying the name, a priority, and a due date.
Ability to edit name, priority and due date for existing "to do" tasks.
- Be able to specify a due date or clear the due date (not interested in when to finish that "to do"?).
Be able to filter "to do's" specifying the name (or part of the name), the priority and if they are done/undone.
Be able to sort the "to do's" by priority and/or due date.
- For example, be able to sort items where their due date is soon and sort them also by priority to see what tasks are more urgent or less urgent.
Mark "to do's" as done (clicking in a checkbox) or to undone a "to do".
- The undone functionality is just there if there is a mistake. :D
Since it is possible that you can have a lot of "to do's", there's the need to paginate the list of "to do's".
Ability to know, in average, the time between creation and done for all "to do's". This should be shown in general for all done "to do's" and also grouped by priority.

How to use

Creating to do's

You will see a button with the text + New To Do. After clicking it, a modal should appear with the following inputs:

ID $\rightarrow$ The id it will be assigned. It is automatic and disabled by default.
Text $\rightarrow$ The name of the to do.
Due date $\rightarrow$ The date for which the to do is due. It only accepts days and not hours, minutes nor seconds.
Completed $\rightarrow$ If the to do is already completed or not.
Priority $\rightarrow$ The priority of the to do. It could be either Low, Medium or High.

Editing / deleting a to do

You can find a table where every to do is shown. Every row corresponds to a single task. The last column (Actions) is where you can find two buttons for each row:

Edit $\rightarrow$ A modal should appear in the same layout as if you where creating a new to do. Except that the fields are already filled with the corresponding info of the current to do. After accepting the new values, the to do will be updated.
Delete $\rightarrow$ After clicking this button, the to do will be instantly deleted. You won't be prompted before. This is not reversible.

Sorting the to do's

On the table's heading you will find Priority and Due Date. Click on any of those headings to start sorting the to do's. The symbol next to the column name will start changing, telling the current way of sorting. The possible sorting's symbols are as follows:

⁛ $\rightarrow$ Currently not sorting.
↑ $\rightarrow$ Sorting in descending order. Highest goes top.
↓ $\rightarrow$ Sorting in ascending order. Lowest goes top.