From 753f86624ead2b0bf7ab9026b728864e3985dc58 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 19 Nov 2024 21:33:56 +0100 Subject: [PATCH 01/50] - added first components and used zustand --- package-lock.json | 55 +++++++++++++++++++++++++++++------- package.json | 3 +- src/App.jsx | 10 ++++++- src/components/Header.jsx | 8 ++++++ src/components/ToDoCard.jsx | 34 ++++++++++++++++++++++ src/components/ToDoInput.jsx | 25 ++++++++++++++++ src/sites/Home.jsx | 7 +++++ src/stores/useToDoItem.jsx | 20 +++++++++++++ 8 files changed, 150 insertions(+), 12 deletions(-) create mode 100644 src/components/Header.jsx create mode 100644 src/components/ToDoCard.jsx create mode 100644 src/components/ToDoInput.jsx create mode 100644 src/sites/Home.jsx create mode 100644 src/stores/useToDoItem.jsx diff --git a/package-lock.json b/package-lock.json index 5c1b936d..7670293c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0" + "react-router-dom": "^6.18.0", + "zustand": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.15", @@ -578,12 +579,12 @@ }, "node_modules/@types/prop-types": { "version": "15.7.10", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.2.37", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -601,7 +602,7 @@ }, "node_modules/@types/scheduler": { "version": "0.16.6", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@ungap/structured-clone": { @@ -922,7 +923,9 @@ "license": "MIT" }, "node_modules/cross-spawn": { - "version": "7.0.3", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "license": "MIT", "dependencies": { @@ -936,7 +939,7 @@ }, "node_modules/csstype": { "version": "3.1.2", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/debug": { @@ -2692,7 +2695,9 @@ } }, "node_modules/rollup": { - "version": "3.29.4", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, "license": "MIT", "bin": { @@ -3093,10 +3098,11 @@ } }, "node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, + "license": "MIT", "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", @@ -3253,6 +3259,35 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz", + "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=18.0.0", + "immer": ">=9.0.6", + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + }, + "use-sync-external-store": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index a23290e8..075e0b6d 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0" + "react-router-dom": "^6.18.0", + "zustand": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/src/App.jsx b/src/App.jsx index 496ab1b1..c89b8062 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,11 @@ +import { ToDoCard } from "./components/ToDoCard"; +import { Home } from "./sites/Home"; + export const App = () => { - return
Find me in App.jsx!
; + return ( + <> + + + + ) }; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..6b9784c9 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,8 @@ +export const Header = () => { + return ( +
+

My-To-Do-List

+
+ ) +} + diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx new file mode 100644 index 00000000..dd164288 --- /dev/null +++ b/src/components/ToDoCard.jsx @@ -0,0 +1,34 @@ +import { useToDoItem } from "../stores/useToDoItem"; +import { ToDoInput } from "./ToDoInput"; + +export const ToDoCard = () => { + const { todos, addTodo, removeTodo, toggleTodo } = useToDoItem() + + const handleAdd = () => { + const todoText = prompt("Enter a new to-do:"); + if (todoText) { + addTodo(todoText); + } + }; + + return ( +
+

To-Do List

+ + +
    + {todos.map((todo) => ( +
  • + toggleTodo(todo.id)} + > + {todo.text} + + +
    • + ))} +
+
+ ); +}; \ No newline at end of file diff --git a/src/components/ToDoInput.jsx b/src/components/ToDoInput.jsx new file mode 100644 index 00000000..4463df72 --- /dev/null +++ b/src/components/ToDoInput.jsx @@ -0,0 +1,25 @@ +import { useState } from "react"; + +export const ToDoInput = ({ onAdd }) => { + const [inputText, setInputText] = useState(""); + + const handleSubmit = (e) => { + e.preventDefault(); + if (inputText.trim()) { + onAdd(inputText); + setInputText(""); + } + }; + + return ( +
+ setInputText(e.target.value)} + placeholder="New task" + /> + +
+ ); +}; \ No newline at end of file diff --git a/src/sites/Home.jsx b/src/sites/Home.jsx new file mode 100644 index 00000000..b3e22593 --- /dev/null +++ b/src/sites/Home.jsx @@ -0,0 +1,7 @@ +import { Header } from "../components/Header"; + +export const Home = () => { + return ( +
+ ) +} \ No newline at end of file diff --git a/src/stores/useToDoItem.jsx b/src/stores/useToDoItem.jsx new file mode 100644 index 00000000..4f478c98 --- /dev/null +++ b/src/stores/useToDoItem.jsx @@ -0,0 +1,20 @@ +import { create } from "zustand"; + +export const useToDoItem = create((set) => ({ + todos: [], + + addTodo: (text) => set((state) => ({ + todos: [...state.todos, { + id: state.todos.length > 0 ? state.todos[state.todos.length - 1].id + 1 : 1, + text, completed: false + }] + })), + removeTodo: (id) => set((state) => ({ + todos: state.todos.filter((todo) => todo.id !== id) + })), + toggleTodo: (id) => set((state) => ({ + todos: state.todos.map((todo) => + todo.id === id ? { ...todo, completed: !todo.completed } : todo + ) + })) +})) \ No newline at end of file From b87697947a8faff9aef16d25815f1ca1ad523930 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 19 Nov 2024 21:59:01 +0100 Subject: [PATCH 02/50] - styled component --- src/components/ToDoCard.css | 12 ++++++++++++ src/components/ToDoCard.jsx | 9 +++++---- 2 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 src/components/ToDoCard.css diff --git a/src/components/ToDoCard.css b/src/components/ToDoCard.css new file mode 100644 index 00000000..640602e2 --- /dev/null +++ b/src/components/ToDoCard.css @@ -0,0 +1,12 @@ +.todo-card-container { + width: 300px; +} + +.todo-item { + margin: 1rem 0rem 1rem 0rem; + background-color: yellow; + width: 100%; + padding: 20px; + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index dd164288..a6fd4883 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -1,5 +1,6 @@ import { useToDoItem } from "../stores/useToDoItem"; import { ToDoInput } from "./ToDoInput"; +import "./ToDoCard.css"; export const ToDoCard = () => { const { todos, addTodo, removeTodo, toggleTodo } = useToDoItem() @@ -12,13 +13,13 @@ export const ToDoCard = () => { }; return ( -
+

To-Do List

-
    +
      {todos.map((todo) => ( -
    • +
      toggleTodo(todo.id)} @@ -26,7 +27,7 @@ export const ToDoCard = () => { {todo.text} -
      • +
))}
From ec468c0c96cfa769dece59e19e1ac7510f01410a Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 18:40:33 +0100 Subject: [PATCH 03/50] - reworked on the Card and Submit Logic --- src/App.jsx | 3 +- src/components/ToDoCard.jsx | 30 +++++++++++-------- src/components/ToDoInput.jsx | 25 ---------------- src/components/ToDoSubmit.jsx | 27 +++++++++++++++++ src/sites/Home.jsx | 6 +++- .../{useToDoItem.jsx => useToDoStore.jsx} | 5 ++-- 6 files changed, 53 insertions(+), 43 deletions(-) delete mode 100644 src/components/ToDoInput.jsx create mode 100644 src/components/ToDoSubmit.jsx rename src/stores/{useToDoItem.jsx => useToDoStore.jsx} (82%) diff --git a/src/App.jsx b/src/App.jsx index c89b8062..38e613ed 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,10 @@ -import { ToDoCard } from "./components/ToDoCard"; + import { Home } from "./sites/Home"; export const App = () => { return ( <> - ) }; diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index a6fd4883..29b941c9 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -1,25 +1,29 @@ -import { useToDoItem } from "../stores/useToDoItem"; -import { ToDoInput } from "./ToDoInput"; +import { useState } from "react"; +import { useToDoStore } from "../stores/useToDoStore"; +import { ToDoSubmit } from "./ToDoSubmit"; import "./ToDoCard.css"; export const ToDoCard = () => { - const { todos, addTodo, removeTodo, toggleTodo } = useToDoItem() + const { todos, removeTodo, toggleTodo } = useToDoStore(); + const [showForm, setShowForm] = useState(false); - const handleAdd = () => { - const todoText = prompt("Enter a new to-do:"); - if (todoText) { - addTodo(todoText); - } + const toggleForm = () => { + setShowForm((prev) => !prev); }; return (
-

To-Do List

- + + {showForm && } -
    +
    {todos.map((todo) => (
    + toggleTodo(todo.id)} @@ -29,7 +33,7 @@ export const ToDoCard = () => {
    ))} -
+
); -}; \ No newline at end of file +}; diff --git a/src/components/ToDoInput.jsx b/src/components/ToDoInput.jsx deleted file mode 100644 index 4463df72..00000000 --- a/src/components/ToDoInput.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useState } from "react"; - -export const ToDoInput = ({ onAdd }) => { - const [inputText, setInputText] = useState(""); - - const handleSubmit = (e) => { - e.preventDefault(); - if (inputText.trim()) { - onAdd(inputText); - setInputText(""); - } - }; - - return ( -
- setInputText(e.target.value)} - placeholder="New task" - /> - -
- ); -}; \ No newline at end of file diff --git a/src/components/ToDoSubmit.jsx b/src/components/ToDoSubmit.jsx new file mode 100644 index 00000000..efdef7ac --- /dev/null +++ b/src/components/ToDoSubmit.jsx @@ -0,0 +1,27 @@ +import { useState } from "react"; +import { useToDoStore } from "../stores/useToDoStore"; + +export const ToDoSubmit = () => { + const { addTodo } = useToDoStore() + const [todoText, setTodoText] = useState("") + + const handleSubmit = (e) => { + e.preventDefault(); + if (todoText.trim()) { + addTodo(todoText); + setTodoText(""); + } + } + return ( +
+

Enter a new task

+ setTodoText(e.target.value)} + placeholder="Task description" + /> + +
+ ); +}; \ No newline at end of file diff --git a/src/sites/Home.jsx b/src/sites/Home.jsx index b3e22593..7a5f9e07 100644 --- a/src/sites/Home.jsx +++ b/src/sites/Home.jsx @@ -1,7 +1,11 @@ import { Header } from "../components/Header"; +import { ToDoCard } from "../components/ToDoCard"; export const Home = () => { return ( -
+ <> +
+ + ) } \ No newline at end of file diff --git a/src/stores/useToDoItem.jsx b/src/stores/useToDoStore.jsx similarity index 82% rename from src/stores/useToDoItem.jsx rename to src/stores/useToDoStore.jsx index 4f478c98..98df9b02 100644 --- a/src/stores/useToDoItem.jsx +++ b/src/stores/useToDoStore.jsx @@ -1,6 +1,6 @@ import { create } from "zustand"; -export const useToDoItem = create((set) => ({ +export const useToDoStore = create((set, get) => ({ todos: [], addTodo: (text) => set((state) => ({ @@ -16,5 +16,6 @@ export const useToDoItem = create((set) => ({ todos: state.todos.map((todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) - })) + })), + getNumber: () => get((state) => state.todos.length) })) \ No newline at end of file From b833f57e31f576d6f3fc4cd4e0069eaa9f173771 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 18:51:21 +0100 Subject: [PATCH 04/50] - added toggleForm and showForm to the Global State Zustand --- src/components/ToDoCard.jsx | 8 +------- src/stores/useToDoStore.jsx | 2 ++ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index 29b941c9..eb548513 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -1,15 +1,9 @@ -import { useState } from "react"; import { useToDoStore } from "../stores/useToDoStore"; import { ToDoSubmit } from "./ToDoSubmit"; import "./ToDoCard.css"; export const ToDoCard = () => { - const { todos, removeTodo, toggleTodo } = useToDoStore(); - const [showForm, setShowForm] = useState(false); - - const toggleForm = () => { - setShowForm((prev) => !prev); - }; + const { todos, removeTodo, toggleTodo, showForm, toggleForm } = useToDoStore(); return (
diff --git a/src/stores/useToDoStore.jsx b/src/stores/useToDoStore.jsx index 98df9b02..35bc8feb 100644 --- a/src/stores/useToDoStore.jsx +++ b/src/stores/useToDoStore.jsx @@ -2,6 +2,7 @@ import { create } from "zustand"; export const useToDoStore = create((set, get) => ({ todos: [], + showForm: false, addTodo: (text) => set((state) => ({ todos: [...state.todos, { @@ -17,5 +18,6 @@ export const useToDoStore = create((set, get) => ({ todo.id === id ? { ...todo, completed: !todo.completed } : todo ) })), + toggleForm: () => set((state) => ({ showForm: !state.showForm })), getNumber: () => get((state) => state.todos.length) })) \ No newline at end of file From 2a82bcfb660efc2e9b839094af13f4072581cffa Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 19:02:31 +0100 Subject: [PATCH 05/50] - --- src/components/ToDoCard.jsx | 2 +- src/stores/useToDoStore.jsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index eb548513..c4bc47b0 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -10,7 +10,7 @@ export const ToDoCard = () => { - {showForm && } + {showForm && }
{todos.map((todo) => ( diff --git a/src/stores/useToDoStore.jsx b/src/stores/useToDoStore.jsx index 35bc8feb..06e65d1b 100644 --- a/src/stores/useToDoStore.jsx +++ b/src/stores/useToDoStore.jsx @@ -19,5 +19,6 @@ export const useToDoStore = create((set, get) => ({ ) })), toggleForm: () => set((state) => ({ showForm: !state.showForm })), + closeForm: () => set({ showForm: false }), getNumber: () => get((state) => state.todos.length) })) \ No newline at end of file From 85f43e3b257f737be967a07a5a0c4c450108b7cd Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 19:49:56 +0100 Subject: [PATCH 06/50] - added task counter --- src/components/Header.jsx | 5 +++ src/components/ToDoCard.jsx | 7 ++-- src/stores/useToDoStore.jsx | 66 ++++++++++++++++++++++++++----------- 3 files changed, 55 insertions(+), 23 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 6b9784c9..5df2abe8 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,7 +1,12 @@ +import { useToDoStore } from "../stores/useToDoStore" + export const Header = () => { + const { getNumber } = useToDoStore() + return (

My-To-Do-List

+

Total tasks: {getNumber()}

) } diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index c4bc47b0..9de5cfb9 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -15,15 +15,16 @@ export const ToDoCard = () => {
{todos.map((todo) => (
- + toggleTodo(todo.id)} > {todo.text} +
))} diff --git a/src/stores/useToDoStore.jsx b/src/stores/useToDoStore.jsx index 06e65d1b..f1f10ef1 100644 --- a/src/stores/useToDoStore.jsx +++ b/src/stores/useToDoStore.jsx @@ -1,24 +1,50 @@ import { create } from "zustand"; +import { persist } from "zustand/middleware"; -export const useToDoStore = create((set, get) => ({ - todos: [], - showForm: false, +export const useToDoStore = create( + persist( + (set, get) => ({ + todos: [], + showForm: false, - addTodo: (text) => set((state) => ({ - todos: [...state.todos, { - id: state.todos.length > 0 ? state.todos[state.todos.length - 1].id + 1 : 1, - text, completed: false - }] - })), - removeTodo: (id) => set((state) => ({ - todos: state.todos.filter((todo) => todo.id !== id) - })), - toggleTodo: (id) => set((state) => ({ - todos: state.todos.map((todo) => + addTodo: (text) => { + const newTodo = { + id: get().todos.length > 0 ? get().todos[get().todos.length - 1].id + 1 : 1, + text, + completed: false, + }; + set((state) => ({ + todos: [...state.todos, newTodo] + })); + }, + + removeTodo: (id) => { + set((state) => ({ + todos: state.todos.filter((todo) => todo.id !== id) + })); + }, + + toggleTodo: (id) => { + set((state) => ({ + todos: state.todos.map((todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo - ) - })), - toggleForm: () => set((state) => ({ showForm: !state.showForm })), - closeForm: () => set({ showForm: false }), - getNumber: () => get((state) => state.todos.length) -})) \ No newline at end of file + ) + })); + }, + + toggleForm: () => { + set((state) => ({ showForm: !state.showForm })); + }, + + closeForm: () => { + set({ showForm: false }); + }, + + getNumber: () => get().todos.length, + }), + { + name: "todo-storage", + getStorage: () => localStorage, + } + ) +); From d878cb0537cc07d1af0db0d1c6e1b49069f861e5 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 20:05:51 +0100 Subject: [PATCH 07/50] - replaced former buttons with checkbox --- src/components/CheckBox.css | 51 +++++++++++++++++++++++++++++++++++++ src/components/CheckBox.jsx | 23 +++++++++++++++++ src/components/ToDoCard.jsx | 7 ++--- 3 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 src/components/CheckBox.css create mode 100644 src/components/CheckBox.jsx diff --git a/src/components/CheckBox.css b/src/components/CheckBox.css new file mode 100644 index 00000000..d8c96bde --- /dev/null +++ b/src/components/CheckBox.css @@ -0,0 +1,51 @@ +.checkbox-wrapper-59 input[type="checkbox"] { + visibility: hidden; + display: none; +} + +.checkbox-wrapper-59 *, +.checkbox-wrapper-59 ::after, +.checkbox-wrapper-59 ::before { + box-sizing: border-box; +} + +.checkbox-wrapper-59 .switch { + width: 60px; + height: 30px; + position: relative; + display: inline-block; +} + +.checkbox-wrapper-59 .slider { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: 30px; + box-shadow: 0 0 0 2px #777, 0 0 4px #777; + cursor: pointer; + border: 4px solid transparent; + overflow: hidden; + transition: 0.2s; +} + +.checkbox-wrapper-59 .slider:before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background-color: #777; + border-radius: 30px; + transform: translateX(-56px); + transition: 0.2s; +} + +.checkbox-wrapper-59 input:checked+.slider:before { + transform: translateX(4px); + background-color: limeGreen; +} + +.checkbox-wrapper-59 input:checked+.slider { + box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen; +} \ No newline at end of file diff --git a/src/components/CheckBox.jsx b/src/components/CheckBox.jsx new file mode 100644 index 00000000..60949237 --- /dev/null +++ b/src/components/CheckBox.jsx @@ -0,0 +1,23 @@ +import { useToDoStore } from "../stores/useToDoStore"; +import "./CheckBox.css"; + +export const Checkbox = ({ todo }) => { + const { toggleTodo } = useToDoStore(); + + const handleChange = () => { + toggleTodo(todo.id); + }; + + return ( +
+ +
+ ); +}; diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index 9de5cfb9..3589c57a 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -1,5 +1,6 @@ import { useToDoStore } from "../stores/useToDoStore"; import { ToDoSubmit } from "./ToDoSubmit"; +import { Checkbox } from "./CheckBox"; import "./ToDoCard.css"; export const ToDoCard = () => { @@ -22,9 +23,7 @@ export const ToDoCard = () => { > {todo.text} - +
))} @@ -32,3 +31,5 @@ export const ToDoCard = () => {
); }; + + From 88836fefc852cf7af82ad88b2b1e321f8c250ab7 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 20:33:51 +0100 Subject: [PATCH 08/50] - styled checkBox and Card --- src/components/CheckBox.css | 4 ++-- src/components/ToDoCard.css | 8 +++++++- src/components/ToDoCard.jsx | 6 ++++-- src/index.css | 4 ++++ 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/CheckBox.css b/src/components/CheckBox.css index d8c96bde..819c89d9 100644 --- a/src/components/CheckBox.css +++ b/src/components/CheckBox.css @@ -10,8 +10,8 @@ } .checkbox-wrapper-59 .switch { - width: 60px; - height: 30px; + width: 40px; + height: 20px; position: relative; display: inline-block; } diff --git a/src/components/ToDoCard.css b/src/components/ToDoCard.css index 640602e2..3505f7ed 100644 --- a/src/components/ToDoCard.css +++ b/src/components/ToDoCard.css @@ -4,9 +4,15 @@ .todo-item { margin: 1rem 0rem 1rem 0rem; - background-color: yellow; + background-color: pink; width: 100%; padding: 20px; display: flex; justify-content: space-between; + border-radius: 10px; +} + +.card-button-container { + display: flex; + } \ No newline at end of file diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index 3589c57a..567e2261 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -23,8 +23,10 @@ export const ToDoCard = () => { > {todo.text} - - +
+ + +
))} diff --git a/src/index.css b/src/index.css index 4669a352..e7628a54 100644 --- a/src/index.css +++ b/src/index.css @@ -11,4 +11,8 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: aqua; + display: flex; + flex-direction: column; + align-items: center; } \ No newline at end of file From b6534b298fe43ab7d0ba0e29c9a691049d5b339b Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 20:40:53 +0100 Subject: [PATCH 09/50] - added netlify link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 36daf341..6b7968a4 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Describe how you approached to problem, and what tools and techniques you used t ### View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://gittes-to-do-list-application.netlify.app/ ## Instructions From 55e3c9824506d89ff4748c6d5d5b79848c9aad7c Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 22:15:26 +0100 Subject: [PATCH 10/50] - added project Card, styled todoCard, added button --- src/components/ProjectCard.css | 16 ++++++++++++++++ src/components/ProjectCard.jsx | 10 ++++++++++ src/components/ToDoCard.css | 5 +++-- src/components/ToDoCard.jsx | 5 ++--- src/index.css | 2 +- src/sites/Home.jsx | 2 ++ src/ui/AddTaskButton.css | 9 +++++++++ src/ui/AddTaskButton.jsx | 11 +++++++++++ src/ui/Typography.jsx | 0 9 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 src/components/ProjectCard.css create mode 100644 src/components/ProjectCard.jsx create mode 100644 src/ui/AddTaskButton.css create mode 100644 src/ui/AddTaskButton.jsx create mode 100644 src/ui/Typography.jsx diff --git a/src/components/ProjectCard.css b/src/components/ProjectCard.css new file mode 100644 index 00000000..25a900ba --- /dev/null +++ b/src/components/ProjectCard.css @@ -0,0 +1,16 @@ +.project-card { + height: 100px; + width: 200px; + background-color: #e8f3ff; + border-radius: 20px; + display: flex; + flex-direction: column; + margin: 1rem; + padding: 1rem; +} + +p, +h3 { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx new file mode 100644 index 00000000..130fd245 --- /dev/null +++ b/src/components/ProjectCard.jsx @@ -0,0 +1,10 @@ +import "./ProjectCard.css"; + +export const ProjectCard = () => { + return ( +
+

Office Project

+

Next Project

+
+ ) +} \ No newline at end of file diff --git a/src/components/ToDoCard.css b/src/components/ToDoCard.css index 3505f7ed..8d6657d2 100644 --- a/src/components/ToDoCard.css +++ b/src/components/ToDoCard.css @@ -4,12 +4,13 @@ .todo-item { margin: 1rem 0rem 1rem 0rem; - background-color: pink; + background-color: white; width: 100%; padding: 20px; display: flex; justify-content: space-between; - border-radius: 10px; + border-radius: 20px; + margin: 1rem; } .card-button-container { diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index 567e2261..bf2f96bb 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -2,15 +2,14 @@ import { useToDoStore } from "../stores/useToDoStore"; import { ToDoSubmit } from "./ToDoSubmit"; import { Checkbox } from "./CheckBox"; import "./ToDoCard.css"; +import { AddTaskButton } from "../ui/AddTaskButton"; export const ToDoCard = () => { const { todos, removeTodo, toggleTodo, showForm, toggleForm } = useToDoStore(); return (
- + {showForm && }
diff --git a/src/index.css b/src/index.css index e7628a54..6bd4d563 100644 --- a/src/index.css +++ b/src/index.css @@ -11,7 +11,7 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: aqua; + background-color: whitesmoke; display: flex; flex-direction: column; align-items: center; diff --git a/src/sites/Home.jsx b/src/sites/Home.jsx index 7a5f9e07..cbecf8c9 100644 --- a/src/sites/Home.jsx +++ b/src/sites/Home.jsx @@ -1,10 +1,12 @@ import { Header } from "../components/Header"; +import { ProjectCard } from "../components/ProjectCard"; import { ToDoCard } from "../components/ToDoCard"; export const Home = () => { return ( <>
+ ) diff --git a/src/ui/AddTaskButton.css b/src/ui/AddTaskButton.css new file mode 100644 index 00000000..a34fc47b --- /dev/null +++ b/src/ui/AddTaskButton.css @@ -0,0 +1,9 @@ +.add-task-button { + height: 50px; + width: 300px; + background-color: #5f33e2; + border: 0; + border-radius: 20px; + margin: 1rem; + color: whitesmoke; +} \ No newline at end of file diff --git a/src/ui/AddTaskButton.jsx b/src/ui/AddTaskButton.jsx new file mode 100644 index 00000000..875cc178 --- /dev/null +++ b/src/ui/AddTaskButton.jsx @@ -0,0 +1,11 @@ +import "./AddTaskButton.css"; +import { useToDoStore } from "../stores/useToDoStore"; + +export const AddTaskButton = () => { + const { showForm, toggleForm } = useToDoStore(); + return ( + + ) +} \ No newline at end of file diff --git a/src/ui/Typography.jsx b/src/ui/Typography.jsx new file mode 100644 index 00000000..e69de29b From afe0c05b6cf1538a3352609568607340f3179498 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 20 Nov 2024 22:45:28 +0100 Subject: [PATCH 11/50] - worked on styles --- src/assets/bin.png | Bin 0 -> 12570 bytes src/components/CheckBox.css | 5 ++--- src/components/Header.css | 9 +++++++++ src/components/Header.jsx | 5 +++-- src/components/ToDoCard.css | 5 ++--- src/components/ToDoCard.jsx | 7 ++++++- 6 files changed, 22 insertions(+), 9 deletions(-) create mode 100644 src/assets/bin.png create mode 100644 src/components/Header.css diff --git a/src/assets/bin.png b/src/assets/bin.png new file mode 100644 index 0000000000000000000000000000000000000000..81e7c491dffc3c5c406ff8b63671e4b9a512eece GIT binary patch literal 12570 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 literal 0 HcmV?d00001 diff --git a/src/components/CheckBox.css b/src/components/CheckBox.css index 819c89d9..5ee51afe 100644 --- a/src/components/CheckBox.css +++ b/src/components/CheckBox.css @@ -25,9 +25,9 @@ border-radius: 30px; box-shadow: 0 0 0 2px #777, 0 0 4px #777; cursor: pointer; - border: 4px solid transparent; overflow: hidden; transition: 0.2s; + background-color: #ebe7fd; } .checkbox-wrapper-59 .slider:before { @@ -35,7 +35,6 @@ content: ""; width: 100%; height: 100%; - background-color: #777; border-radius: 30px; transform: translateX(-56px); transition: 0.2s; @@ -43,7 +42,7 @@ .checkbox-wrapper-59 input:checked+.slider:before { transform: translateX(4px); - background-color: limeGreen; + background-color: #5f33e2; } .checkbox-wrapper-59 input:checked+.slider { diff --git a/src/components/Header.css b/src/components/Header.css new file mode 100644 index 00000000..0db7301f --- /dev/null +++ b/src/components/Header.css @@ -0,0 +1,9 @@ +header { + background-color: #ebe7fd; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 5df2abe8..4773b875 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,13 +1,14 @@ import { useToDoStore } from "../stores/useToDoStore" +import "./Header.css"; export const Header = () => { const { getNumber } = useToDoStore() return ( -
+

My-To-Do-List

Total tasks: {getNumber()}

-
+
) } diff --git a/src/components/ToDoCard.css b/src/components/ToDoCard.css index 8d6657d2..a82ab9c9 100644 --- a/src/components/ToDoCard.css +++ b/src/components/ToDoCard.css @@ -1,11 +1,11 @@ .todo-card-container { - width: 300px; + min-width: 300px; } .todo-item { margin: 1rem 0rem 1rem 0rem; background-color: white; - width: 100%; + min-width: 280px; padding: 20px; display: flex; justify-content: space-between; @@ -15,5 +15,4 @@ .card-button-container { display: flex; - } \ No newline at end of file diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index bf2f96bb..3f0bcaaf 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -24,7 +24,12 @@ export const ToDoCard = () => {
- + Delete removeTodo(todo.id)} + />
))} From 4530c8792bf3f674db0b537eae95c0d28b60f5d1 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Thu, 21 Nov 2024 15:27:15 +0100 Subject: [PATCH 12/50] - added bin image button --- src/components/CheckBox.css | 4 +- src/components/ToDoCard.jsx | 8 +--- src/index.css | 3 +- src/stores/useCategoryStore.jsx | 17 +++++++++ src/stores/useThemeStore.jsx | 0 src/stores/useToDoStore.jsx | 68 ++++++++++++++++----------------- src/ui/BinButton.css | 8 ++++ src/ui/BinButton.jsx | 17 +++++++++ 8 files changed, 82 insertions(+), 43 deletions(-) create mode 100644 src/stores/useCategoryStore.jsx create mode 100644 src/stores/useThemeStore.jsx create mode 100644 src/ui/BinButton.css create mode 100644 src/ui/BinButton.jsx diff --git a/src/components/CheckBox.css b/src/components/CheckBox.css index 5ee51afe..b5a2a8dd 100644 --- a/src/components/CheckBox.css +++ b/src/components/CheckBox.css @@ -27,7 +27,7 @@ cursor: pointer; overflow: hidden; transition: 0.2s; - background-color: #ebe7fd; + background-color: #5f33e2; } .checkbox-wrapper-59 .slider:before { @@ -42,7 +42,7 @@ .checkbox-wrapper-59 input:checked+.slider:before { transform: translateX(4px); - background-color: #5f33e2; + background-color: #ebe7fd; } .checkbox-wrapper-59 input:checked+.slider { diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index 3f0bcaaf..9ae6ec74 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -3,6 +3,7 @@ import { ToDoSubmit } from "./ToDoSubmit"; import { Checkbox } from "./CheckBox"; import "./ToDoCard.css"; import { AddTaskButton } from "../ui/AddTaskButton"; +import { BinButton } from "../ui/BinButton"; export const ToDoCard = () => { const { todos, removeTodo, toggleTodo, showForm, toggleForm } = useToDoStore(); @@ -24,12 +25,7 @@ export const ToDoCard = () => {
- Delete removeTodo(todo.id)} - /> +
))} diff --git a/src/index.css b/src/index.css index 6bd4d563..df6f0eea 100644 --- a/src/index.css +++ b/src/index.css @@ -11,7 +11,8 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: whitesmoke; + background: whitesmoke; + display: flex; flex-direction: column; align-items: center; diff --git a/src/stores/useCategoryStore.jsx b/src/stores/useCategoryStore.jsx new file mode 100644 index 00000000..ef48d1e5 --- /dev/null +++ b/src/stores/useCategoryStore.jsx @@ -0,0 +1,17 @@ +import { create } from "zustand"; + +export const useCategoryStore = create((set) => ({ + categories: ["Shopping", "Work", "Personal"], // Initiale Kategorien + + addCategory: (category) => { + set((state) => ({ + categories: [...state.categories, category] + })); + }, + + removeCategory: (category) => { + set((state) => ({ + categories: state.categories.filter((cat) => cat !== category) + })); + }, +})); diff --git a/src/stores/useThemeStore.jsx b/src/stores/useThemeStore.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/stores/useToDoStore.jsx b/src/stores/useToDoStore.jsx index f1f10ef1..56f6f756 100644 --- a/src/stores/useToDoStore.jsx +++ b/src/stores/useToDoStore.jsx @@ -1,47 +1,47 @@ import { create } from "zustand"; import { persist } from "zustand/middleware"; +// persist is a wrapper function that ensures the state is saved to a persistent storage export const useToDoStore = create( - persist( - (set, get) => ({ - todos: [], - showForm: false, + persist((set, get) => ({ + todos: [], + showForm: false, - addTodo: (text) => { - const newTodo = { - id: get().todos.length > 0 ? get().todos[get().todos.length - 1].id + 1 : 1, - text, - completed: false, - }; - set((state) => ({ - todos: [...state.todos, newTodo] - })); - }, + addTodo: (text) => { + const newTodo = { + id: get().todos.length > 0 ? get().todos[get().todos.length - 1].id + 1 : 1, + text, + completed: false, + }; + set((state) => ({ + todos: [...state.todos, newTodo] + })); + }, - removeTodo: (id) => { - set((state) => ({ - todos: state.todos.filter((todo) => todo.id !== id) - })); - }, + removeTodo: (id) => { + set((state) => ({ + todos: state.todos.filter((todo) => todo.id !== id) + })); + }, - toggleTodo: (id) => { - set((state) => ({ - todos: state.todos.map((todo) => - todo.id === id ? { ...todo, completed: !todo.completed } : todo - ) - })); - }, + toggleTodo: (id) => { + set((state) => ({ + todos: state.todos.map((todo) => + todo.id === id ? { ...todo, completed: !todo.completed } : todo + ) + })); + }, - toggleForm: () => { - set((state) => ({ showForm: !state.showForm })); - }, + toggleForm: () => { + set((state) => ({ showForm: !state.showForm })); + }, - closeForm: () => { - set({ showForm: false }); - }, + closeForm: () => { + set({ showForm: false }); + }, - getNumber: () => get().todos.length, - }), + getNumber: () => get().todos.length, + }), { name: "todo-storage", getStorage: () => localStorage, diff --git a/src/ui/BinButton.css b/src/ui/BinButton.css new file mode 100644 index 00000000..1ae8b813 --- /dev/null +++ b/src/ui/BinButton.css @@ -0,0 +1,8 @@ +.bin-button { + width: 40px; + height: 40px; +} + +.image-bin { + width: 100%; +} \ No newline at end of file diff --git a/src/ui/BinButton.jsx b/src/ui/BinButton.jsx new file mode 100644 index 00000000..d7a8eb81 --- /dev/null +++ b/src/ui/BinButton.jsx @@ -0,0 +1,17 @@ +import binImage from "../assets/bin.png" +import "./BinButton.css"; +import { useToDoStore } from "../stores/useToDoStore"; + +export const BinButton = ({ todoId }) => { + const removeTodo = useToDoStore(state => state.removeTodo) + + return ( + + ) +} \ No newline at end of file From 66263acf818de8f9e19b59f517dc8b5b6b81bb7d Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Thu, 21 Nov 2024 16:02:31 +0100 Subject: [PATCH 13/50] - styled the todocard --- src/components/ToDoCard.css | 19 ++++++++++++++++++- src/components/ToDoCard.jsx | 6 ++---- src/ui/BinButton.css | 12 ++++++++++-- 3 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/components/ToDoCard.css b/src/components/ToDoCard.css index a82ab9c9..b2003abf 100644 --- a/src/components/ToDoCard.css +++ b/src/components/ToDoCard.css @@ -1,5 +1,5 @@ .todo-card-container { - min-width: 300px; + min-width: 280px; } .todo-item { @@ -15,4 +15,21 @@ .card-button-container { display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.todo-text { + font-size: 16px; + font-weight: bold; + cursor: pointer; + transition: color 0.3s ease; + overflow-wrap: break-word; + max-width: 200px; +} + +.todo-text.completed { + text-decoration: line-through; + color: gray; } \ No newline at end of file diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index 9ae6ec74..b886a2c0 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -18,7 +18,7 @@ export const ToDoCard = () => {
toggleTodo(todo.id)} > {todo.text} @@ -32,6 +32,4 @@ export const ToDoCard = () => {
); -}; - - +}; \ No newline at end of file diff --git a/src/ui/BinButton.css b/src/ui/BinButton.css index 1ae8b813..8c08ee49 100644 --- a/src/ui/BinButton.css +++ b/src/ui/BinButton.css @@ -1,6 +1,14 @@ .bin-button { - width: 40px; - height: 40px; + width: 30px; + height: 30px; + background-color: #e8f3ff; + border-radius: 30px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.bin-button:hover { + background-color: #8895a6; } .image-bin { From cade1ee98a8cb058c2646cb34e2e5a7789573586 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Thu, 21 Nov 2024 18:34:32 +0100 Subject: [PATCH 14/50] - worked on CSS --- package-lock.json | 130 +++++++++++++++++++++++++++++++--- package.json | 1 + src/App.jsx | 12 +++- src/components/Header.jsx | 3 +- src/components/ToDoCard.css | 16 +++-- src/components/ToDoCard.jsx | 2 +- src/components/ToDoSubmit.css | 17 +++++ src/components/ToDoSubmit.jsx | 48 +++++++------ src/index.css | 4 -- src/sites/Home.jsx | 25 +++++-- src/ui/AddTaskButton.css | 6 +- src/ui/Typography.jsx | 19 +++++ 12 files changed, 233 insertions(+), 50 deletions(-) create mode 100644 src/components/ToDoSubmit.css diff --git a/package-lock.json b/package-lock.json index 7670293c..4b9336ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0", + "styled-components": "^6.1.13", "zustand": "^5.0.1" }, "devDependencies": { @@ -347,6 +348,27 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@esbuild/darwin-arm64": { "version": "0.18.20", "cpu": [ @@ -605,6 +627,12 @@ "devOptional": true, "license": "MIT" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "dev": true, @@ -867,6 +895,15 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001561", "dev": true, @@ -937,9 +974,30 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { - "version": "3.1.2", - "devOptional": true, + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, "node_modules/debug": { @@ -2258,7 +2316,6 @@ }, "node_modules/nanoid": { "version": "3.3.7", - "dev": true, "funding": [ { "type": "github", @@ -2475,12 +2532,12 @@ }, "node_modules/picocolors": { "version": "1.0.0", - "dev": true, "license": "ISC" }, "node_modules/postcss": { - "version": "8.4.31", - "dev": true, + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "funding": [ { "type": "opencollective", @@ -2497,14 +2554,20 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.6", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "dev": true, @@ -2805,6 +2868,12 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "dev": true, @@ -2838,8 +2907,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "dev": true, + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -2928,6 +2998,40 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/supports-color": { "version": "5.5.0", "dev": true, @@ -2963,6 +3067,12 @@ "node": ">=4" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/type-check": { "version": "0.4.0", "dev": true, diff --git a/package.json b/package.json index 075e0b6d..048d1150 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0", + "styled-components": "^6.1.13", "zustand": "^5.0.1" }, "devDependencies": { diff --git a/src/App.jsx b/src/App.jsx index 38e613ed..b8392466 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,20 @@ import { Home } from "./sites/Home"; +import styled from "styled-components"; + +const AppStyle = styled.div` +display: flex; +flex-direction: column; +align-items: center; +width: 100%; +` export const App = () => { return ( <> - + + + ) }; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 4773b875..0614d19c 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,4 +1,5 @@ import { useToDoStore } from "../stores/useToDoStore" +import { BodyText } from "../ui/Typography"; import "./Header.css"; export const Header = () => { @@ -7,7 +8,7 @@ export const Header = () => { return (

My-To-Do-List

-

Total tasks: {getNumber()}

+ Total tasks: {getNumber()}
) } diff --git a/src/components/ToDoCard.css b/src/components/ToDoCard.css index b2003abf..876f6cd1 100644 --- a/src/components/ToDoCard.css +++ b/src/components/ToDoCard.css @@ -1,16 +1,24 @@ +.to-do-box { + display: flex; + flex-direction: column; + align-items: center; +} + .todo-card-container { - min-width: 280px; + width: 100%; + border: solid green 2px; + padding: 1rem; } .todo-item { margin: 1rem 0rem 1rem 0rem; background-color: white; - min-width: 280px; - padding: 20px; + padding: 10px; display: flex; justify-content: space-between; border-radius: 20px; - margin: 1rem; + border: red solid 2px; + width: 100%; } .card-button-container { diff --git a/src/components/ToDoCard.jsx b/src/components/ToDoCard.jsx index b886a2c0..e337161c 100644 --- a/src/components/ToDoCard.jsx +++ b/src/components/ToDoCard.jsx @@ -9,7 +9,7 @@ export const ToDoCard = () => { const { todos, removeTodo, toggleTodo, showForm, toggleForm } = useToDoStore(); return ( -
+
{showForm && } diff --git a/src/components/ToDoSubmit.css b/src/components/ToDoSubmit.css new file mode 100644 index 00000000..214fd930 --- /dev/null +++ b/src/components/ToDoSubmit.css @@ -0,0 +1,17 @@ +.form-container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.input-container { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 1rem 0rem 1rem 0rem; +} + +.textarea { + width: 200px; +} \ No newline at end of file diff --git a/src/components/ToDoSubmit.jsx b/src/components/ToDoSubmit.jsx index efdef7ac..aa651906 100644 --- a/src/components/ToDoSubmit.jsx +++ b/src/components/ToDoSubmit.jsx @@ -1,27 +1,35 @@ import { useState } from "react"; import { useToDoStore } from "../stores/useToDoStore"; +import { BodyText } from "../ui/Typography"; +import "./ToDoSubmit.css"; export const ToDoSubmit = () => { - const { addTodo } = useToDoStore() - const [todoText, setTodoText] = useState("") + const { addTodo } = useToDoStore() + const [todoText, setTodoText] = useState("") - const handleSubmit = (e) => { - e.preventDefault(); - if (todoText.trim()) { - addTodo(todoText); - setTodoText(""); - } + const handleSubmit = (e) => { + e.preventDefault(); + if (todoText.trim()) { + addTodo(todoText); + setTodoText(""); } - return ( -
-

Enter a new task

- setTodoText(e.target.value)} - placeholder="Task description" - /> - -
- ); + } + return ( +
+
+ Enter a new task +
+