README.md (4100B) - raw

      1 # To Do App (Front End)
      2 
      3 A basic and simple To Do App. **This is just the front end part. The back end
      4 will be later added on a different repository.**
      5 
      6 ## Try it yourself!
      7 
      8 **_NOTE: It doesn't save any info. After restarting the page, all info will be
      9 deleted._**
     10 
     11 ### Online
     12 
     13 You can try this program online. Go to the following link:
     14 [https://hisiste.github.io/ToDo-App-Front-End/](https://hisiste.github.io/ToDo-App-Front-End/)
     15 
     16 ### Locally
     17 
     18 You need to have [Node](https://nodejs.org/en) installed on your computer. It is
     19 recommended to use version 20.x or above.
     20 
     21 You can run it locally using the following commands:
     22 
     23 1. Clone this repository.
     24 
     25     ```
     26     git clone https://github.com/Hisiste/ToDo-App-Front-End.git
     27     ```
     28 
     29 1. Enter the folder and install the dependencies.
     30 
     31     ```
     32     cd ToDo-App-Front-End && npm install
     33     ```
     34 
     35 1. Run a server.
     36 
     37     ```
     38     npm run dev
     39     ```
     40 
     41     It will display an output similar to this:
     42 
     43     ```
     44     VITE v4.3.7  ready in 1080 ms
     45 
     46     ➜  Local:   http://localhost:5173/
     47     ➜  Network: use --host to expose
     48     ➜  press h to show help
     49     ```
     50 
     51     There you have your URL!
     52 
     53 ## Goals
     54 
     55 The program currently has/lacks the following functionality:
     56 
     57 -   [x] Create a "to do" specifying the name, a priority, and a due date.
     58 -   [x] Ability to edit name, priority and due date for existing "to do" tasks.
     59     -   Be able to specify a due date or clear the due date (not interested in
     60         when to finish that "to do"?).
     61 -   [ ] Be able to filter "to do's" specifying the name (or part of the name),
     62         the priority and if they are done/undone.
     63 -   [x] Be able to sort the "to do's" by priority and/or due date.
     64     -   For example, be able to sort items where their due date is soon and sort
     65         them also by priority to see what tasks are more urgent or less urgent.
     66 -   [x] Mark "to do's" as done (clicking in a checkbox) or to undone a "to do".
     67     -   The undone functionality is just there if there is a mistake. :D
     68 -   [ ] Since it is possible that you can have a lot of "to do's", there's the
     69         need to paginate the list of "to do's".
     70 -   [ ] Ability to know, in average, the time between creation and done for all
     71         "to do's". This should be shown in general for all done "to do's" and
     72         also grouped by priority.
     73 
     74 ## How to use
     75 
     76 ### Creating to do's
     77 
     78 You will see a button with the text `+ New To Do`. After clicking it, a modal
     79 should appear with the following inputs:
     80 
     81 -   `ID` $\rightarrow$ The id it will be assigned. It is automatic and disabled
     82     by default.
     83 -   `Text` $\rightarrow$ The name of the to do.
     84 -   `Due date` $\rightarrow$ The date for which the to do is due. **It only
     85     accepts days and not hours, minutes nor seconds.**
     86 -   `Completed` $\rightarrow$ If the to do is already completed or not.
     87 -   `Priority` $\rightarrow$ The priority of the to do. It could be either
     88     _Low_, _Medium_ or _High_.
     89 
     90 ### Editing / deleting a to do
     91 
     92 You can find a table where every to do is shown. Every row corresponds to a
     93 single task. The last column (`Actions`) is where you can find two buttons for
     94 each row:
     95 
     96 -   `Edit` $\rightarrow$ A modal should appear in the same layout as if you
     97     where creating a new to do. Except that the fields are already filled with
     98     the corresponding info of the current to do. After accepting the new values,
     99     the to do will be updated.
    100 -   `Delete` $\rightarrow$ After clicking this button, the to do will be
    101     instantly deleted. You won't be prompted before. **This is not reversible.**
    102 
    103 ### Sorting the to do's
    104 
    105 On the table's heading you will find `Priority` and `Due Date`. Click on any of
    106 those headings to start sorting the to do's. The symbol next to the column name
    107 will start changing, telling the current way of sorting. The possible sorting's
    108 symbols are as follows:
    109 
    110 -   **<span>&#8283;</span>** $\rightarrow$ Currently not sorting.
    111 -   **<span>&#8593;</span>** $\rightarrow$ Sorting in descending order. Highest
    112     goes top.
    113 -   **<span>&#8595;</span>** $\rightarrow$ Sorting in ascending order. Lowest
    114     goes top.