From b997762df62d9f37dc0e44c9121db7e6e4eaade9 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Fri, 25 Aug 2023 13:38:21 -0600 Subject: [PATCH 01/17] Component first coded --- src/App.js | 49 ++++++++++++++++++++++++++--------------- src/CreateTodoButton.js | 5 +++++ src/TodoCounter.js | 9 ++++++++ src/TodoItem.js | 11 +++++++++ src/TodoList.js | 5 +++++ src/TodoSearch.js | 5 +++++ 6 files changed, 66 insertions(+), 18 deletions(-) create mode 100644 src/CreateTodoButton.js create mode 100644 src/TodoCounter.js create mode 100644 src/TodoItem.js create mode 100644 src/TodoList.js create mode 100644 src/TodoSearch.js diff --git a/src/App.js b/src/App.js index 952c8f1fd..45c8fc8ef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,37 @@ -import logo from './platzi.webp'; -import './App.css'; +import logo from "./platzi.webp"; +import { TodoCounter } from "./TodoCounter"; +import { TodoSearch } from "./TodoSearch"; +import { TodoList } from "./TodoList"; +import { TodoItem } from "./TodoItem"; +import { CreateTodoButton } from "./CreateTodoButton"; +import "./App.css"; +import React from "react"; + +const defaultTodos = [ + { text: "Cortar Cebolla", completed: true }, + { text: "Website en React", completed: false }, + { text: "Website using node", completed: false }, + { text: "SISII", completed: false }, +]; function App() { return ( -
-
- logo -

- Edita el archivo src/App.js y guarda para recargar. -

- - Learn React - -
-
+ + + + + + {defaultTodos.map((todo) => ( + + ))} + + + + ); } diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js new file mode 100644 index 000000000..95daf4bdc --- /dev/null +++ b/src/CreateTodoButton.js @@ -0,0 +1,5 @@ +function CreateTodoButton() { + return ; +} + +export { CreateTodoButton }; diff --git a/src/TodoCounter.js b/src/TodoCounter.js new file mode 100644 index 000000000..037376bc7 --- /dev/null +++ b/src/TodoCounter.js @@ -0,0 +1,9 @@ +function TodoCounter({ total, completed }) { + return ( +

+ Has completado {completed} de {total} TODOs +

+ ); +} + +export { TodoCounter }; diff --git a/src/TodoItem.js b/src/TodoItem.js new file mode 100644 index 000000000..a1d66cb68 --- /dev/null +++ b/src/TodoItem.js @@ -0,0 +1,11 @@ +function TodoItem(props) { + return ( +
  • + V +

    {props.text}

    + X +
    • + ); +} + +export { TodoItem }; diff --git a/src/TodoList.js b/src/TodoList.js new file mode 100644 index 000000000..d6ec6e3cc --- /dev/null +++ b/src/TodoList.js @@ -0,0 +1,5 @@ +function TodoList({ children }) { + return ; +} + +export { TodoList }; diff --git a/src/TodoSearch.js b/src/TodoSearch.js new file mode 100644 index 000000000..c84f2eba4 --- /dev/null +++ b/src/TodoSearch.js @@ -0,0 +1,5 @@ +function TodoSearch() { + return ; +} + +export { TodoSearch }; From 652f97074744ebafbb91adfd044435d75169ef92 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Fri, 25 Aug 2023 22:19:19 -0600 Subject: [PATCH 02/17] Basic components were created --- public/index.html | 8 ++++- src/App.css | 38 ------------------------ src/App.js | 19 ++++++------ src/TodoCounter.js | 9 ------ src/{ => components}/CreateTodoButton.js | 0 src/components/TodoCounter.js | 7 +++++ src/{ => components}/TodoItem.js | 0 src/{ => components}/TodoList.js | 0 src/{ => components}/TodoSearch.js | 0 src/css/TodoCounter.css | 6 ++++ src/css/body.css | 3 ++ 11 files changed, 33 insertions(+), 57 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/TodoCounter.js rename src/{ => components}/CreateTodoButton.js (100%) create mode 100644 src/components/TodoCounter.js rename src/{ => components}/TodoItem.js (100%) rename src/{ => components}/TodoList.js (100%) rename src/{ => components}/TodoSearch.js (100%) create mode 100644 src/css/TodoCounter.css create mode 100644 src/css/body.css diff --git a/public/index.html b/public/index.html index e5b37b15c..83d664de7 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,12 @@ + + + - React App + EdCenten0's TODOs APP diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 4661df052..000000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #233553; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #97ca3f; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 45c8fc8ef..7a51e07ac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,10 @@ -import logo from "./platzi.webp"; -import { TodoCounter } from "./TodoCounter"; -import { TodoSearch } from "./TodoSearch"; -import { TodoList } from "./TodoList"; -import { TodoItem } from "./TodoItem"; -import { CreateTodoButton } from "./CreateTodoButton"; -import "./App.css"; +import { TodoCounter } from "./components/TodoCounter"; +import { TodoSearch } from "./components/TodoSearch"; +import { TodoList } from "./components/TodoList"; +import { TodoItem } from "./components/TodoItem"; +import { CreateTodoButton } from "./components/CreateTodoButton"; import React from "react"; +import "./css/body.css"; const defaultTodos = [ { text: "Cortar Cebolla", completed: true }, @@ -16,7 +15,8 @@ const defaultTodos = [ function App() { return ( - + // + <> @@ -31,7 +31,8 @@ function App() { - + + // ); } diff --git a/src/TodoCounter.js b/src/TodoCounter.js deleted file mode 100644 index 037376bc7..000000000 --- a/src/TodoCounter.js +++ /dev/null @@ -1,9 +0,0 @@ -function TodoCounter({ total, completed }) { - return ( -

    - Has completado {completed} de {total} TODOs -

    - ); -} - -export { TodoCounter }; diff --git a/src/CreateTodoButton.js b/src/components/CreateTodoButton.js similarity index 100% rename from src/CreateTodoButton.js rename to src/components/CreateTodoButton.js diff --git a/src/components/TodoCounter.js b/src/components/TodoCounter.js new file mode 100644 index 000000000..fe4cdfde7 --- /dev/null +++ b/src/components/TodoCounter.js @@ -0,0 +1,7 @@ +import "./../css/TodoCounter.css"; + +function TodoCounter({ completed }) { + return

    Yuu have {completed} pending TODOs

    ; +} + +export { TodoCounter }; diff --git a/src/TodoItem.js b/src/components/TodoItem.js similarity index 100% rename from src/TodoItem.js rename to src/components/TodoItem.js diff --git a/src/TodoList.js b/src/components/TodoList.js similarity index 100% rename from src/TodoList.js rename to src/components/TodoList.js diff --git a/src/TodoSearch.js b/src/components/TodoSearch.js similarity index 100% rename from src/TodoSearch.js rename to src/components/TodoSearch.js diff --git a/src/css/TodoCounter.css b/src/css/TodoCounter.css new file mode 100644 index 000000000..23b09dafa --- /dev/null +++ b/src/css/TodoCounter.css @@ -0,0 +1,6 @@ +h1 { + font-size: 24px; + text-align: center; + margin: 0; + padding: 48px; +} diff --git a/src/css/body.css b/src/css/body.css new file mode 100644 index 000000000..112e6bd89 --- /dev/null +++ b/src/css/body.css @@ -0,0 +1,3 @@ +body { + font-family: "Dosis", sans-serif; +} From b6b79dceb36f78258316c768a867a4b9b15d4593 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sat, 26 Aug 2023 16:26:16 -0600 Subject: [PATCH 03/17] Basic CSS desing --- src/App.js | 59 ++++++++++++++++------ src/components/CreateTodoButton.js | 6 ++- src/components/CreateTodoInput.js | 7 +++ src/components/ImgItem.js | 7 +++ src/components/SectionContainer.js | 7 +++ src/components/SimpleText.js | 7 +++ src/components/TodoCounter.js | 2 +- src/components/TodoItem.js | 24 ++++++--- src/components/TodoList.js | 5 -- src/components/TodoSearch.js | 5 -- src/css/CreateTodoButton.css | 19 ++++++++ src/css/CreateTodoInput.css | 21 ++++++++ src/css/ImgItem.css | 13 +++++ src/css/SectionContainer.css | 29 +++++++++++ src/css/SimpleText.css | 11 +++++ src/css/TodoCounter.css | 7 +-- src/css/TodoItem.css | 42 ++++++++++++++++ src/css/body.css | 17 +++++++ src/css/button-input.css | 4 ++ src/img/cancel-black.svg | 7 +++ src/img/cancel-red.svg | 7 +++ src/img/check.svg | 7 +++ src/{ => img}/platzi.webp | Bin src/img/programmer.svg | 76 +++++++++++++++++++++++++++++ src/img/send.svg | 10 ++++ 25 files changed, 362 insertions(+), 37 deletions(-) create mode 100644 src/components/CreateTodoInput.js create mode 100644 src/components/ImgItem.js create mode 100644 src/components/SectionContainer.js create mode 100644 src/components/SimpleText.js delete mode 100644 src/components/TodoList.js delete mode 100644 src/components/TodoSearch.js create mode 100644 src/css/CreateTodoButton.css create mode 100644 src/css/CreateTodoInput.css create mode 100644 src/css/ImgItem.css create mode 100644 src/css/SectionContainer.css create mode 100644 src/css/SimpleText.css create mode 100644 src/css/TodoItem.css create mode 100644 src/css/button-input.css create mode 100644 src/img/cancel-black.svg create mode 100644 src/img/cancel-red.svg create mode 100644 src/img/check.svg rename src/{ => img}/platzi.webp (100%) create mode 100644 src/img/programmer.svg create mode 100644 src/img/send.svg diff --git a/src/App.js b/src/App.js index 7a51e07ac..9431029dc 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,57 @@ import { TodoCounter } from "./components/TodoCounter"; -import { TodoSearch } from "./components/TodoSearch"; -import { TodoList } from "./components/TodoList"; +import { CreateTodoInput } from "./components/CreateTodoInput"; import { TodoItem } from "./components/TodoItem"; import { CreateTodoButton } from "./components/CreateTodoButton"; +import { SectionContainer } from "./components/SectionContainer"; +import { SimpleText } from "./components/SimpleText"; +import { ImgItem } from "./components/ImgItem"; import React from "react"; +import programmer from "./img/programmer.svg"; +import sendImg from "./img/send.svg"; import "./css/body.css"; - -const defaultTodos = [ - { text: "Cortar Cebolla", completed: true }, - { text: "Website en React", completed: false }, - { text: "Website using node", completed: false }, - { text: "SISII", completed: false }, -]; +import "./css/button-input.css"; +// const defaultTodos = [ +// { text: "Cortar Cebolla", completed: true }, +// { text: "Website en React", completed: false }, +// { text: "Website using node", completed: false }, +// { text: "SISII", completed: false }, +// ]; function App() { return ( // <> - - + + +
    + + + +
    + + + + +
    + + +     +     - + + + + + + + + +
    + + {/* {defaultTodos.map((todo) => ( ))} - - - + */} //     ); diff --git a/src/components/CreateTodoButton.js b/src/components/CreateTodoButton.js index 95daf4bdc..7215b616e 100644 --- a/src/components/CreateTodoButton.js +++ b/src/components/CreateTodoButton.js @@ -1,5 +1,7 @@ -function CreateTodoButton() { - return ; +import "./../css/CreateTodoButton.css"; + +function CreateTodoButton({ children }) { + return ; } export { CreateTodoButton }; diff --git a/src/components/CreateTodoInput.js b/src/components/CreateTodoInput.js new file mode 100644 index 000000000..10754fefb --- /dev/null +++ b/src/components/CreateTodoInput.js @@ -0,0 +1,7 @@ +import "./../css/CreateTodoInput.css"; + +function CreateTodoInput() { + return ; +} + +export { CreateTodoInput }; diff --git a/src/components/ImgItem.js b/src/components/ImgItem.js new file mode 100644 index 000000000..d0a300157 --- /dev/null +++ b/src/components/ImgItem.js @@ -0,0 +1,7 @@ +import "./../css/ImgItem.css"; + +function ImgItem({ url, className }) { + return ; +} + +export { ImgItem }; diff --git a/src/components/SectionContainer.js b/src/components/SectionContainer.js new file mode 100644 index 000000000..0d9f6fbcf --- /dev/null +++ b/src/components/SectionContainer.js @@ -0,0 +1,7 @@ +import "./../css/SectionContainer.css"; + +function SectionContainer({ children, className }) { + return
    {children}
    ; +} + +export { SectionContainer }; diff --git a/src/components/SimpleText.js b/src/components/SimpleText.js new file mode 100644 index 000000000..549feb1f1 --- /dev/null +++ b/src/components/SimpleText.js @@ -0,0 +1,7 @@ +import "./../css/SimpleText.css"; + +function SimpleText(props) { + return

    {props.text}

    ; +} + +export { SimpleText }; diff --git a/src/components/TodoCounter.js b/src/components/TodoCounter.js index fe4cdfde7..ba6bfbecf 100644 --- a/src/components/TodoCounter.js +++ b/src/components/TodoCounter.js @@ -1,7 +1,7 @@ import "./../css/TodoCounter.css"; function TodoCounter({ completed }) { - return

    Yuu have {completed} pending TODOs

    ; + return

    You have {completed} pending TODOs

    ; } export { TodoCounter }; diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js index a1d66cb68..632951561 100644 --- a/src/components/TodoItem.js +++ b/src/components/TodoItem.js @@ -1,10 +1,22 @@ -function TodoItem(props) { +import { ImgItem } from "./ImgItem"; +import { SimpleText } from "./SimpleText"; +import check from "./../img/check.svg"; +import deleteBlack from "./../img/cancel-black.svg"; +import deleteRed from "./../img/cancel-red.svg"; + +import "./../css/TodoItem.css"; + +function TodoItem({ text, completed }) { return ( -
  • - V -

    {props.text}

    - X -
    • +
    +
    + +
    +
    + +
    +
    +
    ); } diff --git a/src/components/TodoList.js b/src/components/TodoList.js deleted file mode 100644 index d6ec6e3cc..000000000 --- a/src/components/TodoList.js +++ /dev/null @@ -1,5 +0,0 @@ -function TodoList({ children }) { - return
      {children}
    ; -} - -export { TodoList }; diff --git a/src/components/TodoSearch.js b/src/components/TodoSearch.js deleted file mode 100644 index c84f2eba4..000000000 --- a/src/components/TodoSearch.js +++ /dev/null @@ -1,5 +0,0 @@ -function TodoSearch() { - return ; -} - -export { TodoSearch }; diff --git a/src/css/CreateTodoButton.css b/src/css/CreateTodoButton.css new file mode 100644 index 000000000..4af864b2f --- /dev/null +++ b/src/css/CreateTodoButton.css @@ -0,0 +1,19 @@ +:root { + --darker-blue: #146c78; + --lighter-blue: #0e91a1; + --light-green: #7dce94; + --yelowed-white: #efede7; + --white: #ffffff; + --black: #252525; +} + +.CreateTodoButton { + height: 4rem; + width: 15%; + position: absolute; + border: 0.5px solid var(--black); + cursor: pointer; + border-radius: 12px; + right: 10px; + background-color: var(--white); +} diff --git a/src/css/CreateTodoInput.css b/src/css/CreateTodoInput.css new file mode 100644 index 000000000..1ca370eeb --- /dev/null +++ b/src/css/CreateTodoInput.css @@ -0,0 +1,21 @@ +:root { + --darker-blue: #146c78; + --lighter-blue: #0e91a1; + --light-green: #7dce94; + --yelowed-white: #efede7; + --white: #ffffff; + --black: #252525; +} + +.CreateTodoInput { + outline: none; + border: 1px solid var(--black); + border-radius: 12px 0 0 12px; + height: 4rem; + width: 85%; + padding: 1rem; +} + +.CreateTodoInput:focus { + border: 1px solid var(--lighter-blue); +} diff --git a/src/css/ImgItem.css b/src/css/ImgItem.css new file mode 100644 index 000000000..accf31f4d --- /dev/null +++ b/src/css/ImgItem.css @@ -0,0 +1,13 @@ +.programmer-img { + width: 35rem; +} + +.send-img { + width: 3.7rem; +} + +.check-img { + position: absolute; + top: -15px; + width: 5rem; +} diff --git a/src/css/SectionContainer.css b/src/css/SectionContainer.css new file mode 100644 index 000000000..6e726daa7 --- /dev/null +++ b/src/css/SectionContainer.css @@ -0,0 +1,29 @@ +:root { + --darker-blue: #146c78; + --lighter-blue: #0e91a1; + --light-green: #7dce94; + --yelowed-white: #efede7; + --white: #ffffff; + --black: #252525; +} + +.principal-container { + padding: 1rem; + background-color: var(--light-green); + border: 1px solid var(--black); +} + +.secondary-container { + background-color: var(--yelowed-white); + padding: 1rem; + gap: 2rem; +} + +.principal-container, +.secondary-container { + display: flex; + flex-direction: column; + border-radius: 12px; + align-items: center; + width: 100%; +} diff --git a/src/css/SimpleText.css b/src/css/SimpleText.css new file mode 100644 index 000000000..ade8aec2d --- /dev/null +++ b/src/css/SimpleText.css @@ -0,0 +1,11 @@ +.header { + font-size: 4rem; + text-align: center; + margin: 0; + padding: 2rem; + font-weight: bold; +} + +.light-text { + font-size: 2rem; +} diff --git a/src/css/TodoCounter.css b/src/css/TodoCounter.css index 23b09dafa..4159e8cc3 100644 --- a/src/css/TodoCounter.css +++ b/src/css/TodoCounter.css @@ -1,6 +1,7 @@ -h1 { - font-size: 24px; +.TodoCounter { + font-size: 4rem; text-align: center; margin: 0; - padding: 48px; + padding: 2rem; + font-weight: bold; } diff --git a/src/css/TodoItem.css b/src/css/TodoItem.css new file mode 100644 index 000000000..fac746bc7 --- /dev/null +++ b/src/css/TodoItem.css @@ -0,0 +1,42 @@ +:root { + --darker-blue: #146c78; + --lighter-blue: #0e91a1; + --light-green: #7dce94; + --yelowed-white: #efede7; + --white: #ffffff; + --black: #252525; +} + +.TodoItem { + display: flex; + justify-content: space-between; + padding: 0 2rem; + align-items: center; + border: 1px solid var(--black); + border-radius: 12px; + width: 100%; + height: 4rem; +} + +.TodoItem--checkbox { + border: 1px solid var(--black); + width: 3rem; + height: 3rem; + position: relative; + cursor: pointer; +} + +.TodoItem--delete { + width: 2rem; + height: 2rem; + background: url("../img/cancel-black.svg"); + background-repeat: no-repeat; + background-size: cover; +} + +.TodoItem--delete:hover { + background: url("../img/cancel-red.svg"); + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; +} diff --git a/src/css/body.css b/src/css/body.css index 112e6bd89..db61188d4 100644 --- a/src/css/body.css +++ b/src/css/body.css @@ -1,3 +1,20 @@ +html { + font-size: 62.5%; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + body { font-family: "Dosis", sans-serif; } + +.body-wrapper { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 3rem; + margin: 0 3rem; +} diff --git a/src/css/button-input.css b/src/css/button-input.css new file mode 100644 index 000000000..caddfbc81 --- /dev/null +++ b/src/css/button-input.css @@ -0,0 +1,4 @@ +.button-input { + width: 100%; + position: relative; +} diff --git a/src/img/cancel-black.svg b/src/img/cancel-black.svg new file mode 100644 index 000000000..0a49238d1 --- /dev/null +++ b/src/img/cancel-black.svg @@ -0,0 +1,7 @@ + + + + + + cancel Created with Sketch. + \ No newline at end of file diff --git a/src/img/cancel-red.svg b/src/img/cancel-red.svg new file mode 100644 index 000000000..1e314239d --- /dev/null +++ b/src/img/cancel-red.svg @@ -0,0 +1,7 @@ + + + + + + cancel Created with Sketch. + \ No newline at end of file diff --git a/src/img/check.svg b/src/img/check.svg new file mode 100644 index 000000000..a6dae7007 --- /dev/null +++ b/src/img/check.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/platzi.webp b/src/img/platzi.webp similarity index 100% rename from src/platzi.webp rename to src/img/platzi.webp diff --git a/src/img/programmer.svg b/src/img/programmer.svg new file mode 100644 index 000000000..c1796e7fe --- /dev/null +++ b/src/img/programmer.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/send.svg b/src/img/send.svg new file mode 100644 index 000000000..c8b06fde2 --- /dev/null +++ b/src/img/send.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file From 9ce7202b210f7abd906ac9cf23dc963477f24333 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sat, 26 Aug 2023 16:30:15 -0600 Subject: [PATCH 04/17] light-text fixed --- src/App.js | 4 ++-- src/css/SectionContainer.css | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 9431029dc..a3259f9af 100644 --- a/src/App.js +++ b/src/App.js @@ -25,7 +25,7 @@ function App() {
    - +
    @@ -42,7 +42,7 @@ function App() { - + diff --git a/src/css/SectionContainer.css b/src/css/SectionContainer.css index 6e726daa7..b50c61ea4 100644 --- a/src/css/SectionContainer.css +++ b/src/css/SectionContainer.css @@ -17,6 +17,7 @@ background-color: var(--yelowed-white); padding: 1rem; gap: 2rem; + height: 100%; } .principal-container, From 571cbb3661ca14783f460e059d04e5710789cd68 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sun, 27 Aug 2023 11:42:54 -0600 Subject: [PATCH 05/17] Mobile and Tablet media queries --- src/App.js | 12 ++++++++++++ src/components/TodoItem.js | 2 -- src/css/ImgItem.css | 20 ++++++++++++++++++++ src/css/SectionContainer.css | 20 ++++++++++++++++++++ src/css/SimpleText.css | 12 ++++++++++++ src/css/TodoItem.css | 12 +++++++++++- src/css/body.css | 11 +++++++++++ 7 files changed, 86 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index a3259f9af..e4404a99e 100644 --- a/src/App.js +++ b/src/App.js @@ -44,6 +44,18 @@ function App() { + + + + + + + diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js index 632951561..bd35a31f4 100644 --- a/src/components/TodoItem.js +++ b/src/components/TodoItem.js @@ -1,8 +1,6 @@ import { ImgItem } from "./ImgItem"; import { SimpleText } from "./SimpleText"; import check from "./../img/check.svg"; -import deleteBlack from "./../img/cancel-black.svg"; -import deleteRed from "./../img/cancel-red.svg"; import "./../css/TodoItem.css"; diff --git a/src/css/ImgItem.css b/src/css/ImgItem.css index accf31f4d..5f592c39e 100644 --- a/src/css/ImgItem.css +++ b/src/css/ImgItem.css @@ -11,3 +11,23 @@ top: -15px; width: 5rem; } + +@media (max-width: 768px) { + .programmer-img { + display: none; + } +} +@media (max-width: 1024px) { + .programmer-img { + width: 25rem; + } +} +@media (max-width: 1200px) { + .programmer-img { + width: 30rem; + } +} +@media (min-width: 480px) { + .programmer-img { + } +} diff --git a/src/css/SectionContainer.css b/src/css/SectionContainer.css index b50c61ea4..d4658eca6 100644 --- a/src/css/SectionContainer.css +++ b/src/css/SectionContainer.css @@ -11,6 +11,7 @@ padding: 1rem; background-color: var(--light-green); border: 1px solid var(--black); + max-height: 80vh; } .secondary-container { @@ -18,6 +19,8 @@ padding: 1rem; gap: 2rem; height: 100%; + overflow: auto; + justify-content: space-evenly; } .principal-container, @@ -28,3 +31,20 @@ align-items: center; width: 100%; } + +@media (max-width: 768px) { + .secondary-container { + } +} +@media (max-width: 1024px) { + .secondary-container { + } +} +@media (max-width: 1200px) { + .secondary-container { + } +} +@media (min-width: 480px) { + .secondary-container { + } +} diff --git a/src/css/SimpleText.css b/src/css/SimpleText.css index ade8aec2d..41c9ad75e 100644 --- a/src/css/SimpleText.css +++ b/src/css/SimpleText.css @@ -9,3 +9,15 @@ .light-text { font-size: 2rem; } + +@media (max-width: 768px) { + .header { + font-size: 3rem; + } +} + +@media (max-width: 480px) { + .header { + font-size: 2rem; + } +} diff --git a/src/css/TodoItem.css b/src/css/TodoItem.css index fac746bc7..d197f7375 100644 --- a/src/css/TodoItem.css +++ b/src/css/TodoItem.css @@ -15,7 +15,9 @@ border: 1px solid var(--black); border-radius: 12px; width: 100%; - height: 4rem; + min-height: 5rem; + max-height: 30rem; + overflow: auto; } .TodoItem--checkbox { @@ -26,6 +28,14 @@ cursor: pointer; } +.TodoItem--textbox { + width: 80%; + overflow: hidden; +} +.TodoItem--textbox p { + text-align: center; +} + .TodoItem--delete { width: 2rem; height: 2rem; diff --git a/src/css/body.css b/src/css/body.css index db61188d4..2c71b70fd 100644 --- a/src/css/body.css +++ b/src/css/body.css @@ -18,3 +18,14 @@ body { gap: 3rem; margin: 0 3rem; } + +.inactive { + display: none !important; +} + +@media (max-width: 768px) { + .body-wrapper { + grid-template-columns: none; + grid-template-rows: 1fr 2fr; + } +} From 0c6c93e0dbbe30bb0553ae0ee8b626166222479c Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sun, 27 Aug 2023 15:57:04 -0600 Subject: [PATCH 06/17] Counting todos completed --- src/App.js | 50 +++++++++++++++++++++++++++++++++++++------------- 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index e4404a99e..540036a67 100644 --- a/src/App.js +++ b/src/App.js @@ -10,18 +10,24 @@ import programmer from "./img/programmer.svg"; import sendImg from "./img/send.svg"; import "./css/body.css"; import "./css/button-input.css"; -// const defaultTodos = [ -// { text: "Cortar Cebolla", completed: true }, -// { text: "Website en React", completed: false }, -// { text: "Website using node", completed: false }, -// { text: "SISII", completed: false }, -// ]; +import { TodoInputSearch } from "./components/TodoInputSearch"; +const defaultTodos = [ + { text: "Cortar Cebolla", completed: true }, + { text: "Website en React", completed: true }, + { text: "Website using node", completed: true }, + { text: "SISII", completed: false }, +]; function App() { + const [todos, setTodos] = React.useState(defaultTodos); + + const completedTodos = todos.filter((todo) => !!todo.completed).length; + const totalTodos = todos.length; + return ( // <> - +
    @@ -43,22 +49,40 @@ function App() { + + + + + + + + + + + + + + + + + - + +
    From 94bcece8e7446c8dcf5ec48bca04858f13c663e5 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sun, 27 Aug 2023 15:57:48 -0600 Subject: [PATCH 07/17] Search bar created React code and css created --- src/components/TodoInputSearch.js | 7 +++++++ src/css/TodoInputSearch.css | 12 ++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 src/components/TodoInputSearch.js create mode 100644 src/css/TodoInputSearch.css diff --git a/src/components/TodoInputSearch.js b/src/components/TodoInputSearch.js new file mode 100644 index 000000000..14a4301c0 --- /dev/null +++ b/src/components/TodoInputSearch.js @@ -0,0 +1,7 @@ +import "./../css/TodoInputSearch.css"; + +function TodoInputSearch() { + return ; +} + +export { TodoInputSearch }; diff --git a/src/css/TodoInputSearch.css b/src/css/TodoInputSearch.css new file mode 100644 index 000000000..da75017f8 --- /dev/null +++ b/src/css/TodoInputSearch.css @@ -0,0 +1,12 @@ +.TodoInputSearch { + outline: none; + border: 1px solid var(--black); + border-radius: 12px; + height: 4rem; + width: 85%; + padding: 1rem; +} + +.TodoInputSearch:focus { + border: 1px solid var(--lighter-blue); +} From 013da3b9842c8496130f6618e95f6a4678cc25f7 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sun, 27 Aug 2023 15:57:59 -0600 Subject: [PATCH 08/17] Styles improvement --- src/components/TodoCounter.js | 8 ++++++-- src/components/TodoItem.js | 10 ++++++++-- src/css/SectionContainer.css | 19 +------------------ src/css/SimpleText.css | 4 ++++ src/css/TodoItem.css | 4 ++++ 5 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/components/TodoCounter.js b/src/components/TodoCounter.js index ba6bfbecf..0d2ee4b7f 100644 --- a/src/components/TodoCounter.js +++ b/src/components/TodoCounter.js @@ -1,7 +1,11 @@ import "./../css/TodoCounter.css"; -function TodoCounter({ completed }) { - return

    You have {completed} pending TODOs

    ; +function TodoCounter({ completed, total }) { + return ( +

    + You have completed {completed} of {total} total TODOs +

    + ); } export { TodoCounter }; diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js index bd35a31f4..c1266f755 100644 --- a/src/components/TodoItem.js +++ b/src/components/TodoItem.js @@ -8,10 +8,16 @@ function TodoItem({ text, completed }) { return (
    - +
    - +
    diff --git a/src/css/SectionContainer.css b/src/css/SectionContainer.css index d4658eca6..ac134429c 100644 --- a/src/css/SectionContainer.css +++ b/src/css/SectionContainer.css @@ -12,6 +12,7 @@ background-color: var(--light-green); border: 1px solid var(--black); max-height: 80vh; + gap: 1rem; } .secondary-container { @@ -20,7 +21,6 @@ gap: 2rem; height: 100%; overflow: auto; - justify-content: space-evenly; } .principal-container, @@ -31,20 +31,3 @@ align-items: center; width: 100%; } - -@media (max-width: 768px) { - .secondary-container { - } -} -@media (max-width: 1024px) { - .secondary-container { - } -} -@media (max-width: 1200px) { - .secondary-container { - } -} -@media (min-width: 480px) { - .secondary-container { - } -} diff --git a/src/css/SimpleText.css b/src/css/SimpleText.css index 41c9ad75e..61359347a 100644 --- a/src/css/SimpleText.css +++ b/src/css/SimpleText.css @@ -10,6 +10,10 @@ font-size: 2rem; } +.crossed-line { + text-decoration: line-through; +} + @media (max-width: 768px) { .header { font-size: 3rem; diff --git a/src/css/TodoItem.css b/src/css/TodoItem.css index d197f7375..9486b9dec 100644 --- a/src/css/TodoItem.css +++ b/src/css/TodoItem.css @@ -50,3 +50,7 @@ background-size: cover; cursor: pointer; } + +.inactive { + display: none !important; +} From 6e91b078fd23b29bdfd211b8ece886536ec2b994 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sun, 27 Aug 2023 17:44:44 -0600 Subject: [PATCH 09/17] Completed todos, delete todos and search todos --- src/App.js | 77 ++++++++++++++----------------- src/components/ImgItem.js | 4 +- src/components/TodoInputSearch.js | 13 +++++- src/components/TodoItem.js | 8 ++-- src/css/ImgItem.css | 1 + src/css/TodoInputSearch.css | 1 + 6 files changed, 54 insertions(+), 50 deletions(-) diff --git a/src/App.js b/src/App.js index 540036a67..2a3b7cf55 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ import sendImg from "./img/send.svg"; import "./css/body.css"; import "./css/button-input.css"; import { TodoInputSearch } from "./components/TodoInputSearch"; + const defaultTodos = [ { text: "Cortar Cebolla", completed: true }, { text: "Website en React", completed: true }, @@ -20,10 +21,30 @@ const defaultTodos = [ function App() { const [todos, setTodos] = React.useState(defaultTodos); + const [searchValue, setSearchValue] = React.useState(""); const completedTodos = todos.filter((todo) => !!todo.completed).length; const totalTodos = todos.length; + const searchedTodos = todos.filter((todo) => { + const todoText = todo.text.toLowerCase(); + const searchText = searchValue.toLowerCase(); + return todoText.includes(searchText); + }); + + const completeTodo = (text) => { + const newTodos = [...todos]; + const todoIndex = newTodos.findIndex((todo) => todo.text == text); + newTodos[todoIndex].completed = true; + setTodos(newTodos); + }; + const deleteTodo = (text) => { + const newTodos = [...todos]; + const todoIndex = newTodos.findIndex((todo) => todo.text == text); + newTodos.splice(todoIndex, 1); + setTodos(newTodos); + }; + return ( // <> @@ -49,53 +70,23 @@ function App() { - + - - - - - - - - - - - - - - - - - - - - - - - - - - - + {searchedTodos.map((todo) => ( + completeTodo(todo.text)} + onDelete={() => deleteTodo(todo.text)} + /> + ))}
    - - {/* - {defaultTodos.map((todo) => ( - - ))} - */} // ); diff --git a/src/components/ImgItem.js b/src/components/ImgItem.js index d0a300157..fff0079bd 100644 --- a/src/components/ImgItem.js +++ b/src/components/ImgItem.js @@ -1,7 +1,7 @@ import "./../css/ImgItem.css"; -function ImgItem({ url, className }) { - return ; +function ImgItem({ url, className, onComplete, alt }) { + return {`${alt}`}; } export { ImgItem }; diff --git a/src/components/TodoInputSearch.js b/src/components/TodoInputSearch.js index 14a4301c0..eb015de5d 100644 --- a/src/components/TodoInputSearch.js +++ b/src/components/TodoInputSearch.js @@ -1,7 +1,16 @@ import "./../css/TodoInputSearch.css"; -function TodoInputSearch() { - return ; +function TodoInputSearch({ searchValue, setSearchValue }) { + return ( + { + setSearchValue(event.target.value); + }} + /> + ); } export { TodoInputSearch }; diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js index c1266f755..1ae60c0c8 100644 --- a/src/components/TodoItem.js +++ b/src/components/TodoItem.js @@ -4,13 +4,15 @@ import check from "./../img/check.svg"; import "./../css/TodoItem.css"; -function TodoItem({ text, completed }) { +function TodoItem({ text, completed, onComplete, onDelete }) { return (
    -
    +
    @@ -19,7 +21,7 @@ function TodoItem({ text, completed }) { text={`${text}`} />
    -
    +
    ); } diff --git a/src/css/ImgItem.css b/src/css/ImgItem.css index 5f592c39e..f39a6c811 100644 --- a/src/css/ImgItem.css +++ b/src/css/ImgItem.css @@ -10,6 +10,7 @@ position: absolute; top: -15px; width: 5rem; + cursor: default; } @media (max-width: 768px) { diff --git a/src/css/TodoInputSearch.css b/src/css/TodoInputSearch.css index da75017f8..c9eb0269d 100644 --- a/src/css/TodoInputSearch.css +++ b/src/css/TodoInputSearch.css @@ -5,6 +5,7 @@ height: 4rem; width: 85%; padding: 1rem; + text-align: center; } .TodoInputSearch:focus { From 43da77d0bbcf71d4225d44aab086b554aacffd8b Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sun, 27 Aug 2023 17:59:13 -0600 Subject: [PATCH 10/17] Message to say you have no left todos :D --- src/components/TodoCounter.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/TodoCounter.js b/src/components/TodoCounter.js index 0d2ee4b7f..fb71a9fbc 100644 --- a/src/components/TodoCounter.js +++ b/src/components/TodoCounter.js @@ -3,7 +3,9 @@ import "./../css/TodoCounter.css"; function TodoCounter({ completed, total }) { return (

    - You have completed {completed} of {total} total TODOs + {total == 0 + ? `Congratulations, you have no left TODOs :)` + : ` You have completed ${completed} of ${total} total TODOs`}

    ); } From 7e8738dee309a804c1ac4b24bf64801a4d3620d2 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Sun, 27 Aug 2023 17:59:29 -0600 Subject: [PATCH 11/17] Update TodoCounter.js --- src/components/TodoCounter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TodoCounter.js b/src/components/TodoCounter.js index fb71a9fbc..9a5c8252e 100644 --- a/src/components/TodoCounter.js +++ b/src/components/TodoCounter.js @@ -4,7 +4,7 @@ function TodoCounter({ completed, total }) { return (

    {total == 0 - ? `Congratulations, you have no left TODOs :)` + ? `Congratulations, you have no left TODOs :D` : ` You have completed ${completed} of ${total} total TODOs`}

    ); From fbba19d4dbe4317fcb17a63d03be0965684f1057 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Mon, 28 Aug 2023 23:35:11 -0600 Subject: [PATCH 12/17] Project reorganization --- src/App/App.js | 66 ++++++++++++++++++ src/{App.js => App/AppUI.js} | 61 +++++----------- src/{ => App}/css/body.css | 0 src/{ => App}/css/button-input.css | 0 src/App/customHooks/useLocalStorage.js | 24 +++++++ src/{ => App}/img/programmer.svg | 0 src/{ => App}/img/send.svg | 0 .../CreateTodoButton}/CreateTodoButton.css | 0 .../CreateTodoButton.js | 2 +- .../CreateTodoInput}/CreateTodoInput.css | 0 .../{ => CreateTodoInput}/CreateTodoInput.js | 2 +- src/{css => components/ImgItem}/ImgItem.css | 0 src/components/{ => ImgItem}/ImgItem.js | 2 +- .../SectionContainer}/SectionContainer.css | 0 .../SectionContainer.js | 2 +- .../SimpleText}/SimpleText.css | 0 src/components/{ => SimpleText}/SimpleText.js | 2 +- .../TodoCounter}/TodoCounter.css | 0 .../{ => TodoCounter}/TodoCounter.js | 2 +- .../TodoInputSearch}/TodoInputSearch.css | 0 .../{ => TodoInputSearch}/TodoInputSearch.js | 2 +- src/{css => components/TodoItem}/TodoItem.css | 6 +- src/components/{ => TodoItem}/TodoItem.js | 8 +-- .../TodoItem}/cancel-black.svg | 0 .../TodoItem}/cancel-red.svg | 0 src/{img => components/TodoItem}/check.svg | 0 src/img/platzi.webp | Bin 1008 -> 0 bytes src/index.js | 10 +-- 28 files changed, 129 insertions(+), 60 deletions(-) create mode 100644 src/App/App.js rename src/{App.js => App/AppUI.js} (52%) rename src/{ => App}/css/body.css (100%) rename src/{ => App}/css/button-input.css (100%) create mode 100644 src/App/customHooks/useLocalStorage.js rename src/{ => App}/img/programmer.svg (100%) rename src/{ => App}/img/send.svg (100%) rename src/{css => components/CreateTodoButton}/CreateTodoButton.css (100%) rename src/components/{ => CreateTodoButton}/CreateTodoButton.js (78%) rename src/{css => components/CreateTodoInput}/CreateTodoInput.css (100%) rename src/components/{ => CreateTodoInput}/CreateTodoInput.js (76%) rename src/{css => components/ImgItem}/ImgItem.css (100%) rename src/components/{ => ImgItem}/ImgItem.js (83%) rename src/{css => components/SectionContainer}/SectionContainer.css (100%) rename src/components/{ => SectionContainer}/SectionContainer.js (78%) rename src/{css => components/SimpleText}/SimpleText.css (100%) rename src/components/{ => SimpleText}/SimpleText.js (77%) rename src/{css => components/TodoCounter}/TodoCounter.css (100%) rename src/components/{ => TodoCounter}/TodoCounter.js (88%) rename src/{css => components/TodoInputSearch}/TodoInputSearch.css (100%) rename src/components/{ => TodoInputSearch}/TodoInputSearch.js (88%) rename src/{css => components/TodoItem}/TodoItem.css (86%) rename src/components/{ => TodoItem}/TodoItem.js (79%) rename src/{img => components/TodoItem}/cancel-black.svg (100%) rename src/{img => components/TodoItem}/cancel-red.svg (100%) rename src/{img => components/TodoItem}/check.svg (100%) delete mode 100644 src/img/platzi.webp diff --git a/src/App/App.js b/src/App/App.js new file mode 100644 index 000000000..ea66ce9e7 --- /dev/null +++ b/src/App/App.js @@ -0,0 +1,66 @@ +import { TodoCounter } from "../components/TodoCounter/TodoCounter"; +import { CreateTodoInput } from "../components/CreateTodoInput/CreateTodoInput"; +import { TodoItem } from "../components/TodoItem/TodoItem"; +import { CreateTodoButton } from "../components/CreateTodoButton/CreateTodoButton"; +import { SectionContainer } from "../components/SectionContainer/SectionContainer"; +import { SimpleText } from "../components/SimpleText/SimpleText"; +import { ImgItem } from "../components/ImgItem/ImgItem"; +import { useLocalStorage } from "./customHooks/useLocalStorage"; +import React from "react"; +import { AppUI } from "./AppUI"; +import programmer from "./img/programmer.svg"; +import sendImg from "./img/send.svg"; +import "./css/body.css"; +import "./css/button-input.css"; +import { TodoInputSearch } from "../components/TodoInputSearch/TodoInputSearch"; + +// const defaultTodos = [ +// { text: "Cortar Cebolla", completed: true }, +// { text: "Website en React", completed: true }, +// { text: "Website using node", completed: true }, +// { text: "SISII", completed: false }, +// ]; + +// localStorage.setItem("TODOS_V1", defaultTodos); +// localStorage.removeItem("TODOS_V1") + +function App() { + const [todos, saveTodos] = useLocalStorage("TODOS_V1", []); + const [searchValue, setSearchValue] = React.useState(""); + + const completedTodos = todos.filter((todo) => !!todo.completed).length; + const totalTodos = todos.length; + + const searchedTodos = todos.filter((todo) => { + const todoText = todo.text.toLowerCase(); + const searchText = searchValue.toLowerCase(); + return todoText.includes(searchText); + }); + + const completeTodo = (text) => { + const newTodos = [...todos]; + const todoIndex = newTodos.findIndex((todo) => todo.text == text); + newTodos[todoIndex].completed = true; + saveTodos(newTodos); + }; + const deleteTodo = (text) => { + const newTodos = [...todos]; + const todoIndex = newTodos.findIndex((todo) => todo.text == text); + newTodos.splice(todoIndex, 1); + saveTodos(newTodos); + }; + + return ( + + ); +} + +export default App; diff --git a/src/App.js b/src/App/AppUI.js similarity index 52% rename from src/App.js rename to src/App/AppUI.js index 2a3b7cf55..aac06e476 100644 --- a/src/App.js +++ b/src/App/AppUI.js @@ -1,50 +1,27 @@ -import { TodoCounter } from "./components/TodoCounter"; -import { CreateTodoInput } from "./components/CreateTodoInput"; -import { TodoItem } from "./components/TodoItem"; -import { CreateTodoButton } from "./components/CreateTodoButton"; -import { SectionContainer } from "./components/SectionContainer"; -import { SimpleText } from "./components/SimpleText"; -import { ImgItem } from "./components/ImgItem"; +import { TodoCounter } from "../components/TodoCounter/TodoCounter"; +import { CreateTodoInput } from "../components/CreateTodoInput/CreateTodoInput"; +import { TodoItem } from "../components/TodoItem/TodoItem"; +import { CreateTodoButton } from "../components/CreateTodoButton/CreateTodoButton"; +import { SectionContainer } from "../components/SectionContainer/SectionContainer"; +import { SimpleText } from "../components/SimpleText/SimpleText"; +import { ImgItem } from "../components/ImgItem/ImgItem"; +import { useLocalStorage } from "./customHooks/useLocalStorage"; import React from "react"; import programmer from "./img/programmer.svg"; import sendImg from "./img/send.svg"; import "./css/body.css"; import "./css/button-input.css"; -import { TodoInputSearch } from "./components/TodoInputSearch"; - -const defaultTodos = [ - { text: "Cortar Cebolla", completed: true }, - { text: "Website en React", completed: true }, - { text: "Website using node", completed: true }, - { text: "SISII", completed: false }, -]; - -function App() { - const [todos, setTodos] = React.useState(defaultTodos); - const [searchValue, setSearchValue] = React.useState(""); - - const completedTodos = todos.filter((todo) => !!todo.completed).length; - const totalTodos = todos.length; - - const searchedTodos = todos.filter((todo) => { - const todoText = todo.text.toLowerCase(); - const searchText = searchValue.toLowerCase(); - return todoText.includes(searchText); - }); - - const completeTodo = (text) => { - const newTodos = [...todos]; - const todoIndex = newTodos.findIndex((todo) => todo.text == text); - newTodos[todoIndex].completed = true; - setTodos(newTodos); - }; - const deleteTodo = (text) => { - const newTodos = [...todos]; - const todoIndex = newTodos.findIndex((todo) => todo.text == text); - newTodos.splice(todoIndex, 1); - setTodos(newTodos); - }; +import { TodoInputSearch } from "../components/TodoInputSearch/TodoInputSearch"; +function AppUI({ + completedTodos, + totalTodos, + searchValue, + setSearchValue, + searchedTodos, + completeTodo, + deleteTodo, +}) { return ( // <> @@ -92,4 +69,4 @@ function App() { ); } -export default App; +export { AppUI }; diff --git a/src/css/body.css b/src/App/css/body.css similarity index 100% rename from src/css/body.css rename to src/App/css/body.css diff --git a/src/css/button-input.css b/src/App/css/button-input.css similarity index 100% rename from src/css/button-input.css rename to src/App/css/button-input.css diff --git a/src/App/customHooks/useLocalStorage.js b/src/App/customHooks/useLocalStorage.js new file mode 100644 index 000000000..e218466d4 --- /dev/null +++ b/src/App/customHooks/useLocalStorage.js @@ -0,0 +1,24 @@ +import React from "react"; + +function useLocalStorage(itemName, initialValue) { + let localStorageItem = localStorage.getItem(itemName); + let parsedItem; + + if (!localStorageItem) { + localStorage.setItem(itemName, JSON.stringify(initialValue)); + parsedItem = []; + } else { + parsedItem = JSON.parse(localStorageItem); + } + + const [item, setItem] = React.useState(parsedItem); + + const saveItem = (newItem) => { + localStorage.setItem("TODOS_V1", JSON.stringify(newItem)); + setItem(newItem); + }; + + return [item, saveItem]; +} + +export { useLocalStorage }; diff --git a/src/img/programmer.svg b/src/App/img/programmer.svg similarity index 100% rename from src/img/programmer.svg rename to src/App/img/programmer.svg diff --git a/src/img/send.svg b/src/App/img/send.svg similarity index 100% rename from src/img/send.svg rename to src/App/img/send.svg diff --git a/src/css/CreateTodoButton.css b/src/components/CreateTodoButton/CreateTodoButton.css similarity index 100% rename from src/css/CreateTodoButton.css rename to src/components/CreateTodoButton/CreateTodoButton.css diff --git a/src/components/CreateTodoButton.js b/src/components/CreateTodoButton/CreateTodoButton.js similarity index 78% rename from src/components/CreateTodoButton.js rename to src/components/CreateTodoButton/CreateTodoButton.js index 7215b616e..21f44dfb1 100644 --- a/src/components/CreateTodoButton.js +++ b/src/components/CreateTodoButton/CreateTodoButton.js @@ -1,4 +1,4 @@ -import "./../css/CreateTodoButton.css"; +import "./CreateTodoButton.css"; function CreateTodoButton({ children }) { return ; diff --git a/src/css/CreateTodoInput.css b/src/components/CreateTodoInput/CreateTodoInput.css similarity index 100% rename from src/css/CreateTodoInput.css rename to src/components/CreateTodoInput/CreateTodoInput.css diff --git a/src/components/CreateTodoInput.js b/src/components/CreateTodoInput/CreateTodoInput.js similarity index 76% rename from src/components/CreateTodoInput.js rename to src/components/CreateTodoInput/CreateTodoInput.js index 10754fefb..0de91cafe 100644 --- a/src/components/CreateTodoInput.js +++ b/src/components/CreateTodoInput/CreateTodoInput.js @@ -1,4 +1,4 @@ -import "./../css/CreateTodoInput.css"; +import "./CreateTodoInput.css"; function CreateTodoInput() { return ; diff --git a/src/css/ImgItem.css b/src/components/ImgItem/ImgItem.css similarity index 100% rename from src/css/ImgItem.css rename to src/components/ImgItem/ImgItem.css diff --git a/src/components/ImgItem.js b/src/components/ImgItem/ImgItem.js similarity index 83% rename from src/components/ImgItem.js rename to src/components/ImgItem/ImgItem.js index fff0079bd..559d06961 100644 --- a/src/components/ImgItem.js +++ b/src/components/ImgItem/ImgItem.js @@ -1,4 +1,4 @@ -import "./../css/ImgItem.css"; +import "./ImgItem.css"; function ImgItem({ url, className, onComplete, alt }) { return {`${alt}`}; diff --git a/src/css/SectionContainer.css b/src/components/SectionContainer/SectionContainer.css similarity index 100% rename from src/css/SectionContainer.css rename to src/components/SectionContainer/SectionContainer.css diff --git a/src/components/SectionContainer.js b/src/components/SectionContainer/SectionContainer.js similarity index 78% rename from src/components/SectionContainer.js rename to src/components/SectionContainer/SectionContainer.js index 0d9f6fbcf..244f812bc 100644 --- a/src/components/SectionContainer.js +++ b/src/components/SectionContainer/SectionContainer.js @@ -1,4 +1,4 @@ -import "./../css/SectionContainer.css"; +import "./SectionContainer.css"; function SectionContainer({ children, className }) { return
    {children}
    ; diff --git a/src/css/SimpleText.css b/src/components/SimpleText/SimpleText.css similarity index 100% rename from src/css/SimpleText.css rename to src/components/SimpleText/SimpleText.css diff --git a/src/components/SimpleText.js b/src/components/SimpleText/SimpleText.js similarity index 77% rename from src/components/SimpleText.js rename to src/components/SimpleText/SimpleText.js index 549feb1f1..3bcd24642 100644 --- a/src/components/SimpleText.js +++ b/src/components/SimpleText/SimpleText.js @@ -1,4 +1,4 @@ -import "./../css/SimpleText.css"; +import "./SimpleText.css"; function SimpleText(props) { return

    {props.text}

    ; diff --git a/src/css/TodoCounter.css b/src/components/TodoCounter/TodoCounter.css similarity index 100% rename from src/css/TodoCounter.css rename to src/components/TodoCounter/TodoCounter.css diff --git a/src/components/TodoCounter.js b/src/components/TodoCounter/TodoCounter.js similarity index 88% rename from src/components/TodoCounter.js rename to src/components/TodoCounter/TodoCounter.js index 9a5c8252e..200a863f7 100644 --- a/src/components/TodoCounter.js +++ b/src/components/TodoCounter/TodoCounter.js @@ -1,4 +1,4 @@ -import "./../css/TodoCounter.css"; +import "./TodoCounter.css"; function TodoCounter({ completed, total }) { return ( diff --git a/src/css/TodoInputSearch.css b/src/components/TodoInputSearch/TodoInputSearch.css similarity index 100% rename from src/css/TodoInputSearch.css rename to src/components/TodoInputSearch/TodoInputSearch.css diff --git a/src/components/TodoInputSearch.js b/src/components/TodoInputSearch/TodoInputSearch.js similarity index 88% rename from src/components/TodoInputSearch.js rename to src/components/TodoInputSearch/TodoInputSearch.js index eb015de5d..21abd9da1 100644 --- a/src/components/TodoInputSearch.js +++ b/src/components/TodoInputSearch/TodoInputSearch.js @@ -1,4 +1,4 @@ -import "./../css/TodoInputSearch.css"; +import "./TodoInputSearch.css"; function TodoInputSearch({ searchValue, setSearchValue }) { return ( diff --git a/src/css/TodoItem.css b/src/components/TodoItem/TodoItem.css similarity index 86% rename from src/css/TodoItem.css rename to src/components/TodoItem/TodoItem.css index 9486b9dec..28b99cada 100644 --- a/src/css/TodoItem.css +++ b/src/components/TodoItem/TodoItem.css @@ -39,16 +39,18 @@ .TodoItem--delete { width: 2rem; height: 2rem; - background: url("../img/cancel-black.svg"); + background: url("./cancel-black.svg"); background-repeat: no-repeat; background-size: cover; + transition: all 0.1s ease; } .TodoItem--delete:hover { - background: url("../img/cancel-red.svg"); + background: url("./cancel-red.svg"); background-repeat: no-repeat; background-size: cover; cursor: pointer; + transform: scale(1.6); } .inactive { diff --git a/src/components/TodoItem.js b/src/components/TodoItem/TodoItem.js similarity index 79% rename from src/components/TodoItem.js rename to src/components/TodoItem/TodoItem.js index 1ae60c0c8..845e81159 100644 --- a/src/components/TodoItem.js +++ b/src/components/TodoItem/TodoItem.js @@ -1,8 +1,8 @@ -import { ImgItem } from "./ImgItem"; -import { SimpleText } from "./SimpleText"; -import check from "./../img/check.svg"; +import { ImgItem } from "./../ImgItem/ImgItem.js"; +import { SimpleText } from "./../SimpleText/SimpleText.js"; +import check from "./check.svg"; -import "./../css/TodoItem.css"; +import "./TodoItem.css"; function TodoItem({ text, completed, onComplete, onDelete }) { return ( diff --git a/src/img/cancel-black.svg b/src/components/TodoItem/cancel-black.svg similarity index 100% rename from src/img/cancel-black.svg rename to src/components/TodoItem/cancel-black.svg diff --git a/src/img/cancel-red.svg b/src/components/TodoItem/cancel-red.svg similarity index 100% rename from src/img/cancel-red.svg rename to src/components/TodoItem/cancel-red.svg diff --git a/src/img/check.svg b/src/components/TodoItem/check.svg similarity index 100% rename from src/img/check.svg rename to src/components/TodoItem/check.svg diff --git a/src/img/platzi.webp b/src/img/platzi.webp deleted file mode 100644 index a84536756882549cc895dade9ebe7295c17a9a2e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1008 zcmVaj*r`-jiplutb{28Zb zBa^nNf4$i~0zruWpTz}|Ix>k+^{+I?OGQ4y6sc8 zZPU<1srJ|mlTFKG8$``RJ7#k&ji`HLsUfuj@;2G%KSTj~9O%2xT@bK`Zl-?K3Wc{b zZJbtUyyFbh2O;v%6Mj}iA@i8Xu4;tP8>WjkK`1?J*jhOo31d1Gau9MKc)B^&YhH-~ zUm=IFDToOV6E6NAj0hEe6hl6uFeMDeWQD`!@hqi0?w38e5~gK$eV0%Ex@<+)6a8Jc zm-5x$XWE<25cbcq#2;H-=?xHhh2Z!u%lxf-k5$&P2EnP6!k|WLrUZgSgHCi1bs`I% zBL*JDtk4NVy_ouJFmP#8+ZG^@DdfsF2wEa(N)YtK5ilZPRIFKgLcpoM;u-+jf?v|o z@WQKGI-8^6CO5q1h0i<)f!bxyL{tj+)bYTfZc!8(6od*g(4ZpF3^}r(B*@^ESYT56 z8kqz|=?Bgvkm*b3kpni3U*^LU(5dvPxAnhPyBYN+0`S2rD)ykJh>oSoPDEg)PD#OD)Re1|jdj~)+?0dT z)U&S}ueo_iz4i6>rly<-Y|qV02<%8rIWX9TnyXM4GdE#18lGDgTOuZCyD&i;hzQGnqfqk`GEt>mk zqtL1j)qTkl*!@s;3_wtJT z%gb^vug$%@K>zY8-OEdLFR$0Tyy(`yymI&Q^4+Uz;9gw__v&i6SC_=Sx-Rb3#c{8$ zkb8BR+^cKlTwSm>dskP@y}ESn)%EkPE~0yNCB3W5>1SP2ri(hJy0G5W)%C6}v3GTy eovVxOU0reK>asgm*WR?}>fZ(M>~|G@3H}2yCHam3 diff --git a/src/index.js b/src/index.js index 793e2b837..705527a19 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App/App.js"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); From 18d989bee185b0a753cc87b9ec80c58ac02423e6 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Tue, 29 Aug 2023 12:36:25 -0600 Subject: [PATCH 13/17] localStorage logic wrapped on react's effect --- src/App/App.js | 10 ++++++-- src/App/AppUI.js | 7 ++++++ src/App/customHooks/useLocalStorage.js | 34 +++++++++++++++++--------- 3 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/App/App.js b/src/App/App.js index ea66ce9e7..383893e98 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -25,7 +25,12 @@ import { TodoInputSearch } from "../components/TodoInputSearch/TodoInputSearch"; // localStorage.removeItem("TODOS_V1") function App() { - const [todos, saveTodos] = useLocalStorage("TODOS_V1", []); + const { + item: todos, + saveItem: saveTodos, + loading, + error, + } = useLocalStorage("TODOS_V1", []); const [searchValue, setSearchValue] = React.useState(""); const completedTodos = todos.filter((todo) => !!todo.completed).length; @@ -36,7 +41,6 @@ function App() { const searchText = searchValue.toLowerCase(); return todoText.includes(searchText); }); - const completeTodo = (text) => { const newTodos = [...todos]; const todoIndex = newTodos.findIndex((todo) => todo.text == text); @@ -59,6 +63,8 @@ function App() { searchedTodos={searchedTodos} completeTodo={completeTodo} deleteTodo={deleteTodo} + loading={loading} + error={error} /> ); } diff --git a/src/App/AppUI.js b/src/App/AppUI.js index aac06e476..b881230d2 100644 --- a/src/App/AppUI.js +++ b/src/App/AppUI.js @@ -21,6 +21,8 @@ function AppUI({ searchedTodos, completeTodo, deleteTodo, + loading, + error, }) { return ( // @@ -51,6 +53,11 @@ function AppUI({ searchValue={searchValue} setSearchValue={setSearchValue} /> + {loading &&

    Loading...

    } + {error &&

    An error has ocurred

    } + {!loading && searchedTodos.lenght === 0 && ( +

    Create your first TODO!

    + )} {searchedTodos.map((todo) => ( { + setTimeout(() => { + try { + const localStorageItem = localStorage.getItem(itemName); + let parsedItem; + if (!localStorageItem) { + localStorage.setItem(itemName, JSON.stringify(initialValue)); + parsedItem = initialValue; + } else { + parsedItem = JSON.parse(localStorageItem); + setItem(parsedItem); + } + setLoading(false); + } catch { + setLoading(false); + setError(true); + } + }, 2000); + }, []); const saveItem = (newItem) => { localStorage.setItem("TODOS_V1", JSON.stringify(newItem)); setItem(newItem); }; - return [item, saveItem]; + return { item, saveItem, loading, error }; } export { useLocalStorage }; From 275f40d8ece55a83d80046a6ba981c5ae3c88903 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Tue, 29 Aug 2023 18:01:01 -0600 Subject: [PATCH 14/17] Loading skeleton, react context --- src/App/App.js | 66 ++----------------- src/App/AppUI.js | 41 ++++++------ src/components/EmptyTodos/EmptyTodos.js | 7 ++ src/components/TodoContext/TodoContext.js | 64 ++++++++++++++++++ .../TodoContext}/useLocalStorage.js | 0 src/components/TodoCounter/TodoCounter.js | 9 ++- .../TodoInputSearch/TodoInputSearch.js | 6 +- src/components/TodosError/TodosError.js | 7 ++ src/components/TodosLoading/TodosLoading.css | 64 ++++++++++++++++++ src/components/TodosLoading/TodosLoading.js | 13 ++++ src/components/TodosLoading/cancel-black.svg | 7 ++ 11 files changed, 197 insertions(+), 87 deletions(-) create mode 100644 src/components/EmptyTodos/EmptyTodos.js create mode 100644 src/components/TodoContext/TodoContext.js rename src/{App/customHooks => components/TodoContext}/useLocalStorage.js (100%) create mode 100644 src/components/TodosError/TodosError.js create mode 100644 src/components/TodosLoading/TodosLoading.css create mode 100644 src/components/TodosLoading/TodosLoading.js create mode 100644 src/components/TodosLoading/cancel-black.svg diff --git a/src/App/App.js b/src/App/App.js index 383893e98..473f28535 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -1,71 +1,15 @@ -import { TodoCounter } from "../components/TodoCounter/TodoCounter"; -import { CreateTodoInput } from "../components/CreateTodoInput/CreateTodoInput"; -import { TodoItem } from "../components/TodoItem/TodoItem"; -import { CreateTodoButton } from "../components/CreateTodoButton/CreateTodoButton"; -import { SectionContainer } from "../components/SectionContainer/SectionContainer"; -import { SimpleText } from "../components/SimpleText/SimpleText"; -import { ImgItem } from "../components/ImgItem/ImgItem"; -import { useLocalStorage } from "./customHooks/useLocalStorage"; +import { useLocalStorage } from "../components/TodoContext/useLocalStorage"; import React from "react"; import { AppUI } from "./AppUI"; -import programmer from "./img/programmer.svg"; -import sendImg from "./img/send.svg"; import "./css/body.css"; import "./css/button-input.css"; -import { TodoInputSearch } from "../components/TodoInputSearch/TodoInputSearch"; - -// const defaultTodos = [ -// { text: "Cortar Cebolla", completed: true }, -// { text: "Website en React", completed: true }, -// { text: "Website using node", completed: true }, -// { text: "SISII", completed: false }, -// ]; - -// localStorage.setItem("TODOS_V1", defaultTodos); -// localStorage.removeItem("TODOS_V1") +import { TodoProvider } from "../components/TodoContext/TodoContext"; function App() { - const { - item: todos, - saveItem: saveTodos, - loading, - error, - } = useLocalStorage("TODOS_V1", []); - const [searchValue, setSearchValue] = React.useState(""); - - const completedTodos = todos.filter((todo) => !!todo.completed).length; - const totalTodos = todos.length; - - const searchedTodos = todos.filter((todo) => { - const todoText = todo.text.toLowerCase(); - const searchText = searchValue.toLowerCase(); - return todoText.includes(searchText); - }); - const completeTodo = (text) => { - const newTodos = [...todos]; - const todoIndex = newTodos.findIndex((todo) => todo.text == text); - newTodos[todoIndex].completed = true; - saveTodos(newTodos); - }; - const deleteTodo = (text) => { - const newTodos = [...todos]; - const todoIndex = newTodos.findIndex((todo) => todo.text == text); - newTodos.splice(todoIndex, 1); - saveTodos(newTodos); - }; - return ( - + + + ); } diff --git a/src/App/AppUI.js b/src/App/AppUI.js index b881230d2..ee13dd7d4 100644 --- a/src/App/AppUI.js +++ b/src/App/AppUI.js @@ -5,29 +5,25 @@ import { CreateTodoButton } from "../components/CreateTodoButton/CreateTodoButto import { SectionContainer } from "../components/SectionContainer/SectionContainer"; import { SimpleText } from "../components/SimpleText/SimpleText"; import { ImgItem } from "../components/ImgItem/ImgItem"; -import { useLocalStorage } from "./customHooks/useLocalStorage"; import React from "react"; import programmer from "./img/programmer.svg"; import sendImg from "./img/send.svg"; import "./css/body.css"; import "./css/button-input.css"; import { TodoInputSearch } from "../components/TodoInputSearch/TodoInputSearch"; +import { TodosLoading } from "../components/TodosLoading/TodosLoading"; +import { TodosError } from "../components/TodosError/TodosError"; +import { EmptyTodos } from "../components/EmptyTodos/EmptyTodos"; +import { TodoContext } from "../components/TodoContext/TodoContext"; + +function AppUI() { + const { searchedTodos, completeTodo, deleteTodo, loading, error } = + React.useContext(TodoContext); -function AppUI({ - completedTodos, - totalTodos, - searchValue, - setSearchValue, - searchedTodos, - completeTodo, - deleteTodo, - loading, - error, -}) { return ( // <> - +
    @@ -49,16 +45,17 @@ function AppUI({ - - {loading &&

    Loading...

    } - {error &&

    An error has ocurred

    } - {!loading && searchedTodos.lenght === 0 && ( -

    Create your first TODO!

    - )} + + + {loading && ( + <> + + + + )} + {error && } + {!loading && searchedTodos.lenght === 0 && } {searchedTodos.map((todo) => ( Your TODO list is empty, create a new TODO!

    ; +} + +export { EmptyTodos }; diff --git a/src/components/TodoContext/TodoContext.js b/src/components/TodoContext/TodoContext.js new file mode 100644 index 000000000..1aae3fd72 --- /dev/null +++ b/src/components/TodoContext/TodoContext.js @@ -0,0 +1,64 @@ +import React from "react"; +import { useLocalStorage } from "./useLocalStorage"; + +const TodoContext = React.createContext(); + +function TodoProvider({ children }) { + const { + item: todos, + saveItem: saveTodos, + loading, + error, + } = useLocalStorage("TODOS_V1", []); + const [searchValue, setSearchValue] = React.useState(""); + + const completedTodos = todos.filter((todo) => !!todo.completed).length; + const totalTodos = todos.length; + + const searchedTodos = todos.filter((todo) => { + const todoText = todo.text.toLowerCase(); + const searchText = searchValue.toLowerCase(); + return todoText.includes(searchText); + }); + const completeTodo = (text) => { + const newTodos = [...todos]; + const todoIndex = newTodos.findIndex((todo) => todo.text == text); + newTodos[todoIndex].completed = true; + saveTodos(newTodos); + }; + const deleteTodo = (text) => { + const newTodos = [...todos]; + const todoIndex = newTodos.findIndex((todo) => todo.text == text); + newTodos.splice(todoIndex, 1); + saveTodos(newTodos); + }; + + return ( + + {children} + + ); +} + +export { TodoContext, TodoProvider }; +// const defaultTodos = [ +// { text: "Cortar Cebolla", completed: true }, +// { text: "Website en React", completed: true }, +// { text: "Website using node", completed: true }, +// { text: "SISII", completed: false }, +// ]; + +// localStorage.setItem("TODOS_V1", defaultTodos); +// localStorage.removeItem("TODOS_V1") diff --git a/src/App/customHooks/useLocalStorage.js b/src/components/TodoContext/useLocalStorage.js similarity index 100% rename from src/App/customHooks/useLocalStorage.js rename to src/components/TodoContext/useLocalStorage.js diff --git a/src/components/TodoCounter/TodoCounter.js b/src/components/TodoCounter/TodoCounter.js index 200a863f7..81dd59e77 100644 --- a/src/components/TodoCounter/TodoCounter.js +++ b/src/components/TodoCounter/TodoCounter.js @@ -1,11 +1,14 @@ +import React from "react"; import "./TodoCounter.css"; +import { TodoContext } from "../TodoContext/TodoContext"; -function TodoCounter({ completed, total }) { +function TodoCounter() { + const { completedTodos, totalTodos } = React.useContext(TodoContext); return (

    - {total == 0 + {totalTodos == 0 ? `Congratulations, you have no left TODOs :D` - : ` You have completed ${completed} of ${total} total TODOs`} + : ` You have completed ${completedTodos} of ${totalTodos} total TODOs`}

    ); } diff --git a/src/components/TodoInputSearch/TodoInputSearch.js b/src/components/TodoInputSearch/TodoInputSearch.js index 21abd9da1..7163e4cba 100644 --- a/src/components/TodoInputSearch/TodoInputSearch.js +++ b/src/components/TodoInputSearch/TodoInputSearch.js @@ -1,6 +1,10 @@ +import React from "react"; import "./TodoInputSearch.css"; +import { TodoContext } from "../TodoContext/TodoContext"; + +function TodoInputSearch() { + const { searchValue, setSearchValue } = React.useContext(TodoContext); -function TodoInputSearch({ searchValue, setSearchValue }) { return ( An error has ocurred!

    ; +} + +export { TodosError }; diff --git a/src/components/TodosLoading/TodosLoading.css b/src/components/TodosLoading/TodosLoading.css new file mode 100644 index 000000000..ddd60b7c2 --- /dev/null +++ b/src/components/TodosLoading/TodosLoading.css @@ -0,0 +1,64 @@ +.TodoItem--Loading { + display: flex; + justify-content: space-between; + padding: 0 2rem; + align-items: center; + box-shadow: 0 5px 50px rgba(32, 35, 41, 0.15); + border-radius: 12px; + width: 100%; + min-height: 5rem; + height: 5rem; + width: 100%; + max-height: 30rem; + overflow: auto; +} + +.TodoItem--checkbox--loading { + width: 3rem; + height: 3rem; + position: relative; + cursor: pointer; +} + +.TodoItem--textbox--loading { + width: 80%; + overflow: hidden; +} + +.TodoItem--delete--loading { + width: 2rem; + height: 2rem; + background: url("./cancel-black.svg"); + background-repeat: no-repeat; + background-size: cover; + transition: all 0.1s ease; +} + +.TodoItem--Loading, +.TodoItem--checkbox--loading, +.TodoItem--delete--loading, +.TodoItem--textbox--loading { + background: rgb(246, 240, 240); + background: linear-gradient( + 90deg, + rgba(246, 240, 240, 1) 0%, + rgba(215, 215, 226, 1) 53%, + rgba(199, 190, 190, 1) 100% + ); + background-size: 400% 400%; + animation: loadingAnimation 3s ease-in-out infinite; +} + +@keyframes loadingAnimation { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 50% 100%; + } + + 100% { + background-position: 0% 50%; + } +} diff --git a/src/components/TodosLoading/TodosLoading.js b/src/components/TodosLoading/TodosLoading.js new file mode 100644 index 000000000..1be1afabc --- /dev/null +++ b/src/components/TodosLoading/TodosLoading.js @@ -0,0 +1,13 @@ +import "./TodosLoading.css"; + +function TodosLoading() { + return ( +
    +
    +
    +
    +
    + ); +} + +export { TodosLoading }; diff --git a/src/components/TodosLoading/cancel-black.svg b/src/components/TodosLoading/cancel-black.svg new file mode 100644 index 000000000..0a49238d1 --- /dev/null +++ b/src/components/TodosLoading/cancel-black.svg @@ -0,0 +1,7 @@ + + + + + + cancel Created with Sketch. + \ No newline at end of file From b34eb63c4e6606dd524c1e7a69ab4501200d4513 Mon Sep 17 00:00:00 2001 From: Ed Centeno Date: Wed, 30 Aug 2023 19:03:33 -0600 Subject: [PATCH 15/17] Save todos finished, thats all --- public/index.html | 1 + src/App/AppUI.js | 18 ++++++- .../CreateTodoButton/CreateTodoButton.js | 14 ++++- .../CreateTodoInput/CreateTodoInput.js | 15 +++++- src/components/ImgItem/ImgItem.css | 32 ++++++++++++ src/components/Modal/Modal.css | 12 +++++ src/components/Modal/Modal.js | 12 +++++ .../TodoConfirmation/TodoConfirmation.css | 51 +++++++++++++++++++ .../TodoConfirmation/TodoConfirmation.js | 49 ++++++++++++++++++ src/components/TodoContext/TodoContext.js | 18 +++++++ 10 files changed, 218 insertions(+), 4 deletions(-) create mode 100644 src/components/Modal/Modal.css create mode 100644 src/components/Modal/Modal.js create mode 100644 src/components/TodoConfirmation/TodoConfirmation.css create mode 100644 src/components/TodoConfirmation/TodoConfirmation.js diff --git a/public/index.html b/public/index.html index 83d664de7..1d26d1b37 100644 --- a/public/index.html +++ b/public/index.html @@ -35,6 +35,7 @@
    +