From 3db89388b42beb5cf561f577521b0005c945cd96 Mon Sep 17 00:00:00 2001 From: Anna Date: Wed, 20 Nov 2024 13:44:23 +0100 Subject: [PATCH 01/25] installed zustand, created task component and useTaskstore --- package-lock.json | 40 ++++++++++++++++++++++++++++++++----- package.json | 3 ++- src/components/Task.jsx | 1 + src/stores/useTaskStore.jsx | 0 4 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 src/components/Task.jsx create mode 100644 src/stores/useTaskStore.jsx diff --git a/package-lock.json b/package-lock.json index 5c1b936d..0f2762ef 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": { @@ -936,7 +937,7 @@ }, "node_modules/csstype": { "version": "3.1.2", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/debug": { @@ -3253,6 +3254,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/components/Task.jsx b/src/components/Task.jsx new file mode 100644 index 00000000..def9af97 --- /dev/null +++ b/src/components/Task.jsx @@ -0,0 +1 @@ +import { useTaskStore } from "../stores/useTaskStore"; \ No newline at end of file diff --git a/src/stores/useTaskStore.jsx b/src/stores/useTaskStore.jsx new file mode 100644 index 00000000..e69de29b From 800e4ff779cf73c535210cd12cf71e53fe0d1875 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 21 Nov 2024 15:52:59 +0100 Subject: [PATCH 02/25] created tasklist and addtask component for the mapping of tasks and the submission of tasks, added a submit button and a trash bin from font-awesome, added a lot of styling to all components --- index.html | 5 ++ package-lock.json | 140 +++++++++++++++++++++++++++++++++--- package.json | 2 + src/App.jsx | 15 +++- src/assets/todolist.jpg | Bin 0 -> 13601 bytes src/components/AddTask.jsx | 109 ++++++++++++++++++++++++++++ src/components/Header.jsx | 62 ++++++++++++++++ src/components/Task.jsx | 80 ++++++++++++++++++++- src/components/Tasklist.jsx | 66 +++++++++++++++++ src/index.css | 8 ++- src/stores/useTaskStore.jsx | 39 ++++++++++ 11 files changed, 511 insertions(+), 15 deletions(-) create mode 100644 src/assets/todolist.jpg create mode 100644 src/components/AddTask.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Tasklist.jsx diff --git a/index.html b/index.html index 09bcfb14..338f3403 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,11 @@ + + + + Todos App Context API diff --git a/package-lock.json b/package-lock.json index 0f2762ef..86a5dc46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,11 @@ "name": "project-todos-context", "version": "0.0.0", "dependencies": { + "font-awesome": "^4.7.0", "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 +349,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 +628,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 +896,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, @@ -935,9 +973,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": { @@ -1517,6 +1576,15 @@ "dev": true, "license": "ISC" }, + "node_modules/font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==", + "license": "(OFL-1.1 AND MIT)", + "engines": { + "node": ">=0.10.3" + } + }, "node_modules/for-each": { "version": "0.3.3", "dev": true, @@ -2256,7 +2324,6 @@ }, "node_modules/nanoid": { "version": "3.3.7", - "dev": true, "funding": [ { "type": "github", @@ -2473,12 +2540,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", @@ -2495,14 +2562,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, @@ -2801,6 +2874,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, @@ -2834,8 +2913,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" @@ -2924,6 +3004,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, @@ -2959,6 +3073,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..5c4f6353 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ "preview": "vite preview" }, "dependencies": { + "font-awesome": "^4.7.0", "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 496ab1b1..010261c2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,14 @@ +import { Header } from "./components/Header" +import { AddTask } from "./components/AddTask" +import { Tasklist } from "./components/Tasklist" + + export const App = () => { - return
Find me in App.jsx!
; -}; + return ( +
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/assets/todolist.jpg b/src/assets/todolist.jpg new file mode 100644 index 0000000000000000000000000000000000000000..88d86551e0120236ad8b1ab309286bee702e0a02 GIT binary patch literal 13601 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 literal 0 HcmV?d00001 diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx new file mode 100644 index 00000000..24c7bc6f --- /dev/null +++ b/src/components/AddTask.jsx @@ -0,0 +1,109 @@ +//The AddTask component uses the addTask function from the store to add a new task and the form. + +import { useState } from "react"; +import { useTaskStore } from "../stores/useTaskStore"; +import { styled } from "styled-components" + +const Form = styled.form` + max-width: 500px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 30px; + border: solid grey; + background-color: #F2F0F0; + border-width: thin; + box-shadow: 10px 5px 0px black; + + @media (max-width: 500px ) { + max-width: 300px; + + } + + ` +const Textarea = styled.textarea` + resize: none; + padding: 15px; + margin: 0px 0px 10px; + max-width: 450px; + width: 100%; + box-sizing: border-box; + font-size: 16px; + /* Ensures mobile browsers don’t zoom in */ + +` + +const VisuallyHidden = styled.span` + display: none; + +` +const Button = styled.button` + display: flex; + justify-content: center; + align-items: center; + width: 10rem; + height: 3rem; + padding: 0.8rem; + background: #970a68; + box-shadow: 5px 5px 7px rgba(33,33,33,.7); + color: white; + margin: 0; + margin-top: 10px; + font-size: 16px; + font-family: "Poppins" +` + +export const AddTask = () => { + const [title, setTitle] = useState(''); // Local state for input + const { addTask } = useTaskStore(); // Access the store's addTask function + const [errorMessage, setErrorMessage] = useState(''); // Error message state + + const handleSubmit = (event) => { + event.preventDefault(); // Prevent the page from refreshing on form submission. + + const trimmedTitle = title.trim(); + + // Check for maximum character count + if (trimmedTitle.length > 100) { + setErrorMessage("Your task cannot be more than 100 characters long."); + return; // Exit the function early if input is too long. + } + + // Clear any previous error messages and add the task + setErrorMessage(''); + addTask(trimmedTitle); // Add the task to the global state + setTitle(''); // Clear the input field + }; + + return ( +
+
+ {/* Label for accessibility (hidden visually but helps screen readers) */} + + Write a task: + + + {/* Text area where users type their thought */} +