From 163398f68444d278eb83543ba9798a6441c8af9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= Date: Wed, 17 May 2023 18:38:28 -0600 Subject: 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) --- index.html | 25 ++++++++++ src/App.jsx | 2 + src/ToDo-UI/NewToDo.jsx | 126 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 153 insertions(+) create mode 100644 src/ToDo-UI/NewToDo.jsx diff --git a/index.html b/index.html index b46ab83..13bc1aa 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,31 @@ Vite App + + + + + + + + + + + +
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 (
+
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 ( + <> +
+ +
+ + + + ); +} -- cgit v1.2.3