diff options
| author | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-17 18:38:28 -0600 |
|---|---|---|
| committer | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-17 18:38:28 -0600 |
| commit | 163398f68444d278eb83543ba9798a6441c8af9f (patch) | |
| tree | a0a6a449013e8ec969c19ed9c673c475e5e769c5 | |
| parent | 316f43a0f8db27620ba53bf5993f569a969742b5 (diff) | |
| download | ToDo-App-FE-163398f68444d278eb83543ba9798a6441c8af9f.tar.gz ToDo-App-FE-163398f68444d278eb83543ba9798a6441c8af9f.zip | |
Modal interface for new To Do.
Hardest one yet. I don't know how I did it, but I used the
`bootstrap-datepicker` plugin for selecting the Due Date.
(https://github.com/uxsolutions/bootstrap-datepicker)
| -rw-r--r-- | index.html | 25 | ||||
| -rw-r--r-- | src/App.jsx | 2 | ||||
| -rw-r--r-- | src/ToDo-UI/NewToDo.jsx | 126 |
3 files changed, 153 insertions, 0 deletions
@@ -5,6 +5,31 @@ <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> + + <!--Font Awesome (added because you use icons in your prepend/append)--> + <script src="https://kit.fontawesome.com/090a180a9a.js" crossorigin="anonymous"></script> + + <!-- Include jQuery --> + <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"></script> + + <!-- Include Date Range Picker --> + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker3.css"/> + + <script> + $(document).ready(function(){ + var date_input=$('input[name="new-todo-due-date"]'); + var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; + date_input.datepicker({ + format: 'mm/dd/yyyy', + container: container, + todayHighlight: true, + autoclose: true, + maxViewMode: 3, + todayBtn: "linked" + }) + }) + </script> </head> <body> <div id="root"></div> diff --git a/src/App.jsx b/src/App.jsx index 00b3278..a151a22 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,14 @@ import React from "react"; import { Counter } from "./features/counter/Counter"; import { Search } from "./ToDo-UI/Search"; +import { NewToDo } from "./ToDo-UI/NewToDo"; import { ToDoList } from "./ToDo-UI/ToDoList"; function App() { return ( <div> <Search /> + <NewToDo /> <ToDoList /> <Counter /> </div> diff --git a/src/ToDo-UI/NewToDo.jsx b/src/ToDo-UI/NewToDo.jsx new file mode 100644 index 0000000..e5c1652 --- /dev/null +++ b/src/ToDo-UI/NewToDo.jsx @@ -0,0 +1,126 @@ +import React from "react"; + +export function NewToDo() { + return ( + <> + <div className="container mt-3 mb-3"> + <button + type="button" + className="btn btn-outline-dark" + data-bs-toggle="modal" + data-bs-target="#NewToDo" + > + + New To Do + </button> + </div> + + <div + className="modal fade" + id="NewToDo" + tabIndex="-1" + role="dialog" + aria-labelledby="New To Do Window" + aria-hidden="true" + > + <div + className="modal-dialog modal-dialog-centered" + role="document" + > + <div className="modal-content"> + <div className="modal-header"> + <h5 + className="modal-title" + id="exampleModalLongTitle" + > + Add a new to do + </h5> + <button + type="button" + className="close" + data-bs-dismiss="modal" + aria-label="Close" + > + <span aria-hidden="true">×</span> + </button> + </div> + <div className="modal-body"> + <form> + <div className="form-floating mb-3"> + <input + className="form-control" + id="new-todo-id" + value="4" + disabled + /> + <label htmlFor="floatingInput">ID</label> + </div> + <div className="form-floating mb-3"> + <input + className="form-control" + placeholder="Text" + id="new-todo-text" + /> + <label htmlFor="floatingInput">Text</label> + </div> + <div className="input-group mb-3"> + <span className="input-group-text"> + <i className="fa-regular fa-calendar"></i> + </span> + <div className="form-floating"> + <input + className="form-control" + id="new-todo-due-date" + name="new-todo-due-date" + placeholder="Due date" + /> + <label htmlFor="floatingInput"> + Due Date + </label> + </div> + </div> + <div class="form-check mb-3"> + <input + class="form-check-input" + type="checkbox" + value="" + id="flexCheckDefault" + /> + <label + class="form-check-label" + for="flexCheckDefault" + > + Done + </label> + </div> + <div class="form-floating mb-3"> + <select + class="form-select" + id="floatingSelect" + aria-label="Floating label select example" + > + <option selected>Low</option> + <option value="1">Medium</option> + <option value="2">High</option> + </select> + <label for="floatingSelect">Priority</label> + </div> + </form> + </div> + <div className="modal-footer"> + <button + type="button" + className="btn btn-secondary" + data-bs-dismiss="modal" + > + Cancel + </button> + <button type="button" className="btn btn-primary"> + Add + </button> + </div> + </div> + </div> + </div> + </> + ); +} |