From 0e51bc305e16f34a2b282277babf7b4043674714 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Wed, 19 Apr 2023 15:21:13 +0200 Subject: [PATCH 01/11] added counter, tasklist, delete btn, clear btn, date --- code/package-lock.json | 277 ++++++++++++++++++++++++++++++- code/package.json | 5 +- code/src/App.js | 22 ++- code/src/components/AddTask.js | 36 ++++ code/src/components/Counter.js | 26 +++ code/src/components/Header.js | 0 code/src/components/TaskList.css | 0 code/src/components/TaskList.js | 40 +++++ code/src/reducers/tasks.js | 35 ++++ 9 files changed, 427 insertions(+), 14 deletions(-) create mode 100644 code/src/components/AddTask.js create mode 100644 code/src/components/Counter.js create mode 100644 code/src/components/Header.js create mode 100644 code/src/components/TaskList.css create mode 100644 code/src/components/TaskList.js create mode 100644 code/src/reducers/tasks.js diff --git a/code/package-lock.json b/code/package-lock.json index bb51e893e..49622dd81 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,14 +9,17 @@ "version": "1.0.0", "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@reduxjs/toolkit": "^1.9.5", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "moment": "^2.29.4", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-redux": "^8.0.5" }, "devDependencies": { "react-scripts": "5.0.1" @@ -3124,6 +3127,29 @@ } } }, + "node_modules/@reduxjs/toolkit": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz", + "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==", + "dependencies": { + "immer": "^9.0.21", + "redux": "^4.2.1", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.8" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3621,6 +3647,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -3695,6 +3730,11 @@ "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -3713,6 +3753,16 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, + "node_modules/@types/react": { + "version": "18.0.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.37.tgz", + "integrity": "sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3728,6 +3778,11 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -3768,6 +3823,11 @@ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", "dev": true }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -6095,6 +6155,11 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "dev": true }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -8515,6 +8580,14 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -8800,10 +8873,9 @@ } }, "node_modules/immer": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz", - "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==", - "dev": true, + "version": "9.0.21", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", + "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/immer" @@ -12008,6 +12080,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -14375,6 +14455,49 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-redux": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", + "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^16.8 || ^17.0 || ^18.0", + "@types/react-dom": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "react-native": ">=0.59", + "redux": "^4" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, + "node_modules/react-redux/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14531,6 +14654,22 @@ "node": "*" } }, + "node_modules/redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, + "node_modules/redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", + "peerDependencies": { + "redux": "^4" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -14686,6 +14825,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/reselect": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", + "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -16340,6 +16484,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -19509,6 +19661,17 @@ "source-map": "^0.7.3" } }, + "@reduxjs/toolkit": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz", + "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==", + "requires": { + "immer": "^9.0.21", + "redux": "^4.2.1", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.8" + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -19876,6 +20039,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -19950,6 +20122,11 @@ "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -19968,6 +20145,16 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, + "@types/react": { + "version": "18.0.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.37.tgz", + "integrity": "sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -19983,6 +20170,11 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -20023,6 +20215,11 @@ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", "dev": true }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -21748,6 +21945,11 @@ } } }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -23521,6 +23723,14 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -23739,10 +23949,9 @@ "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==" }, "immer": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz", - "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==", - "dev": true + "version": "9.0.21", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", + "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==" }, "import-fresh": { "version": "3.3.0", @@ -26117,6 +26326,11 @@ "minimist": "^1.2.6" } }, + "moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -27678,6 +27892,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-redux": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", + "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -27800,6 +28034,20 @@ } } }, + "redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -27924,6 +28172,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "reselect": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", + "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -29163,6 +29416,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/code/package.json b/code/package.json index 7aad26ebc..f9b6d02e8 100644 --- a/code/package.json +++ b/code/package.json @@ -4,14 +4,17 @@ "private": true, "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@reduxjs/toolkit": "^1.9.5", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "moment": "^2.29.4", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-redux": "^8.0.5" }, "scripts": { "start": "react-scripts start", diff --git a/code/src/App.js b/code/src/App.js index f2007d229..0286cb447 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,23 @@ import React from 'react'; +import { Provider } from 'react-redux'; +import { configureStore, combineReducers } from '@reduxjs/toolkit'; +import AddTask from 'components/AddTask'; +import TaskList from 'components/TaskList'; +import Counter from 'components/Counter'; +import tasks from 'reducers/tasks'; export const App = () => { + const reducer = combineReducers({ + tasks: tasks.reducer + }); + const store = configureStore({ reducer }); return ( -
- Find me in src/app.js! -
- ); + + + + + + ) } + +// ctrl + c inside the terminal to stop the liveServer \ No newline at end of file diff --git a/code/src/components/AddTask.js b/code/src/components/AddTask.js new file mode 100644 index 000000000..a4fdc8516 --- /dev/null +++ b/code/src/components/AddTask.js @@ -0,0 +1,36 @@ +/* eslint-disable indent */ +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import moment from 'moment'; +import tasks from 'reducers/tasks'; + +const AddTask = () => { + const [inputValue, setInputValue] = useState(''); + const dispatch = useDispatch(); + const onFormSubmit = (event) => { + event.preventDefault(); + + const newTask = { + id: Date.now().toString(), + isChecked: false, + name: inputValue.toUpperCase(), + time: moment().format('D MMM HH:mm') + }; + dispatch(tasks.actions.addTask(newTask)); + setInputValue(''); + // https://www.random.org/ + } + return ( +
+
+ + +
+
+ ) +} + +export default AddTask; \ No newline at end of file diff --git a/code/src/components/Counter.js b/code/src/components/Counter.js new file mode 100644 index 000000000..908f51564 --- /dev/null +++ b/code/src/components/Counter.js @@ -0,0 +1,26 @@ +/* eslint-disable indent */ +import React from 'react'; +import { useSelector } from 'react-redux'; + +const Counter = () => { + const items = useSelector((store) => store.tasks.items) + const completedTasks = items.filter((task) => task.isChecked); + + const Alldone = () => { + if (items.length === 0) { + return 'Add tasks' + } else if (items.length === completedTasks.length) { + return `All done ! ${completedTasks.length} / ${items.length}` + } else { + return `${completedTasks.length} / ${items.length} done` + } + } + + return ( +

+ {Alldone()} +

+ ) +} + +export default Counter; \ No newline at end of file diff --git a/code/src/components/Header.js b/code/src/components/Header.js new file mode 100644 index 000000000..e69de29bb diff --git a/code/src/components/TaskList.css b/code/src/components/TaskList.css new file mode 100644 index 000000000..e69de29bb diff --git a/code/src/components/TaskList.js b/code/src/components/TaskList.js new file mode 100644 index 000000000..c7a437aaf --- /dev/null +++ b/code/src/components/TaskList.js @@ -0,0 +1,40 @@ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable indent */ +import React from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import tasks from 'reducers/tasks'; +import './TaskList.css'; + +const TaskList = () => { + const taskList = useSelector((store) => store.tasks.items) + const dispatch = useDispatch(); + const onTaskToggle = (taskId) => { + dispatch(tasks.actions.toggleTask({ id: taskId })); + } + const onRemoveTask = (taskId) => { + dispatch(tasks.actions.deleteTask({ id: taskId })); + } + const clearTasks = () => { + dispatch(tasks.actions.clearTasks()); + } + return ( +
+ +
+ ) +} + +export default TaskList; \ No newline at end of file diff --git a/code/src/reducers/tasks.js b/code/src/reducers/tasks.js new file mode 100644 index 000000000..368dcf1e9 --- /dev/null +++ b/code/src/reducers/tasks.js @@ -0,0 +1,35 @@ +/* eslint-disable max-len */ +/* eslint-disable indent */ +import { createSlice } from '@reduxjs/toolkit'; + +const initialState = { + items: [] +} + +const tasks = createSlice({ + name: 'tasks', + initialState, + reducers: { + addTask: (store, action) => { + store.items = [...store.items, action.payload]; + }, + + toggleTask: (store, action) => { + store.items.forEach((item) => { + if (item.id === action.payload.id) { + item.isChecked = !item.isChecked; + } + }) + }, + + deleteTask: (store, action) => { + const updatedItems = store.items.filter((item) => item.id !== action.payload.id); + return { ...store, items: updatedItems }; + }, + clearTasks: () => { + return initialState; + } + } +}); + +export default tasks; \ No newline at end of file From 2f94dda720082ded1d2ba9d0d952ccf3dff3b5fe Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Fri, 21 Apr 2023 00:21:09 +0200 Subject: [PATCH 02/11] added icons and btn component --- code/public/images/trash.svg | 1 + code/src/App.js | 2 ++ code/src/components/ClearBtn.js | 19 +++++++++++++++++++ code/src/components/TaskList.js | 8 +++----- code/src/index.css | 8 ++++++++ 5 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 code/public/images/trash.svg create mode 100644 code/src/components/ClearBtn.js diff --git a/code/public/images/trash.svg b/code/public/images/trash.svg new file mode 100644 index 000000000..1c5dceab7 --- /dev/null +++ b/code/public/images/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/src/App.js b/code/src/App.js index 0286cb447..8340203e3 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -4,6 +4,7 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit'; import AddTask from 'components/AddTask'; import TaskList from 'components/TaskList'; import Counter from 'components/Counter'; +import ClearBtn from 'components/ClearBtn'; import tasks from 'reducers/tasks'; export const App = () => { @@ -13,6 +14,7 @@ export const App = () => { const store = configureStore({ reducer }); return ( + diff --git a/code/src/components/ClearBtn.js b/code/src/components/ClearBtn.js new file mode 100644 index 000000000..6aff66581 --- /dev/null +++ b/code/src/components/ClearBtn.js @@ -0,0 +1,19 @@ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable indent */ +import React from 'react'; +import { useDispatch } from 'react-redux'; +import tasks from 'reducers/tasks'; + +const ClearBtn = () => { + const dispatch = useDispatch(); + const clearTasks = () => { + dispatch(tasks.actions.clearTasks()); + } + return ( +
+ +
+ ) +} + +export default ClearBtn; \ No newline at end of file diff --git a/code/src/components/TaskList.js b/code/src/components/TaskList.js index c7a437aaf..bd1647c34 100644 --- a/code/src/components/TaskList.js +++ b/code/src/components/TaskList.js @@ -14,9 +14,6 @@ const TaskList = () => { const onRemoveTask = (taskId) => { dispatch(tasks.actions.deleteTask({ id: taskId })); } - const clearTasks = () => { - dispatch(tasks.actions.clearTasks()); - } return (
    @@ -28,8 +25,9 @@ const TaskList = () => { onChange={() => onTaskToggle(singleTask.id)} /> {singleTask.name} {singleTask.time} - - + ))}
diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..d7fe4885e 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -11,3 +11,11 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } +.removeBtn{ + background-color: transparent; + border: none; +} +.trashBtn { +height: 20px; +width: 20px; +} \ No newline at end of file From 9fd7512b9140c58388b36b74a944aa770cbf87ec Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Fri, 21 Apr 2023 02:09:10 +0200 Subject: [PATCH 03/11] added styling --- code/src/App.js | 10 +++++----- code/src/components/AddTask.js | 5 ++--- code/src/components/Counter.js | 2 +- code/src/components/TaskList.js | 2 ++ code/src/index.css | 29 ++++++++++++++++++++++++++--- 5 files changed, 36 insertions(+), 12 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 8340203e3..1ff38066c 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -4,7 +4,6 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit'; import AddTask from 'components/AddTask'; import TaskList from 'components/TaskList'; import Counter from 'components/Counter'; -import ClearBtn from 'components/ClearBtn'; import tasks from 'reducers/tasks'; export const App = () => { @@ -14,10 +13,11 @@ export const App = () => { const store = configureStore({ reducer }); return ( - - - - +
+ + + +
) } diff --git a/code/src/components/AddTask.js b/code/src/components/AddTask.js index a4fdc8516..1a7485a46 100644 --- a/code/src/components/AddTask.js +++ b/code/src/components/AddTask.js @@ -21,11 +21,10 @@ const AddTask = () => { // https://www.random.org/ } return ( -
+
diff --git a/code/src/components/Counter.js b/code/src/components/Counter.js index 908f51564..2c2997f3b 100644 --- a/code/src/components/Counter.js +++ b/code/src/components/Counter.js @@ -8,7 +8,7 @@ const Counter = () => { const Alldone = () => { if (items.length === 0) { - return 'Add tasks' + return '' } else if (items.length === completedTasks.length) { return `All done ! ${completedTasks.length} / ${items.length}` } else { diff --git a/code/src/components/TaskList.js b/code/src/components/TaskList.js index bd1647c34..78c567c5d 100644 --- a/code/src/components/TaskList.js +++ b/code/src/components/TaskList.js @@ -3,6 +3,7 @@ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import tasks from 'reducers/tasks'; +import ClearBtn from './ClearBtn'; import './TaskList.css'; const TaskList = () => { @@ -30,6 +31,7 @@ const TaskList = () => { ))} +
) diff --git a/code/src/index.css b/code/src/index.css index d7fe4885e..e39d31f78 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -5,17 +5,40 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } -.removeBtn{ + +.removeBtn { background-color: transparent; border: none; } + .trashBtn { -height: 20px; -width: 20px; + height: 20px; + width: 20px; +} + +.tasklist-container { + + display: flex; + justify-content: center; + +} + +.ClearBtn-container { + display: flex; + justify-content: center; +} + +.App { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; } \ No newline at end of file From c8a1408fcb2e1a478719df87838f74611fd841ad Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Mon, 24 Apr 2023 00:47:10 +0200 Subject: [PATCH 04/11] added styling --- code/public/images/addBtn.svg | 1 + code/src/App.js | 19 +++++----- code/src/components/AddTask.css | 29 +++++++++++++++ code/src/components/AddTask.js | 8 +++-- code/src/components/ClearBtn.css | 41 +++++++++++++++++++++ code/src/components/ClearBtn.js | 3 +- code/src/components/Counter.js | 2 +- code/src/components/TaskList.css | 61 ++++++++++++++++++++++++++++++++ code/src/components/TaskList.js | 28 +++++++++------ code/src/index.css | 29 +++++++++------ 10 files changed, 187 insertions(+), 34 deletions(-) create mode 100644 code/public/images/addBtn.svg create mode 100644 code/src/components/AddTask.css create mode 100644 code/src/components/ClearBtn.css diff --git a/code/public/images/addBtn.svg b/code/public/images/addBtn.svg new file mode 100644 index 000000000..bbeda52e7 --- /dev/null +++ b/code/public/images/addBtn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/src/App.js b/code/src/App.js index 1ff38066c..724f69c03 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -12,14 +12,17 @@ export const App = () => { }); const store = configureStore({ reducer }); return ( - -
- - - +
+
+
+ +

To-Do List

+ + + + +
- +
) } - -// ctrl + c inside the terminal to stop the liveServer \ No newline at end of file diff --git a/code/src/components/AddTask.css b/code/src/components/AddTask.css new file mode 100644 index 000000000..ba7adb5de --- /dev/null +++ b/code/src/components/AddTask.css @@ -0,0 +1,29 @@ +.input{ + height: 50px; + width: 255px; + border-radius: 12px; + background-color: #FEFEE3; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; + font-family: "Roboto"; +} + +input{ + background: none; + border: none; + margin-left: 12px; + outline:none; + flex: 1; +} + +.addIcon{ + height: 30px; + width: 30px; +} + +.addBtn { + background: transparent; + border: none; +} \ No newline at end of file diff --git a/code/src/components/AddTask.js b/code/src/components/AddTask.js index 1a7485a46..470c83aba 100644 --- a/code/src/components/AddTask.js +++ b/code/src/components/AddTask.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import moment from 'moment'; +import './AddTask.css'; import tasks from 'reducers/tasks'; const AddTask = () => { @@ -18,15 +19,16 @@ const AddTask = () => { }; dispatch(tasks.actions.addTask(newTask)); setInputValue(''); - // https://www.random.org/ } return (
-
) diff --git a/code/src/components/ClearBtn.css b/code/src/components/ClearBtn.css new file mode 100644 index 000000000..41a96488e --- /dev/null +++ b/code/src/components/ClearBtn.css @@ -0,0 +1,41 @@ + +.clearBtn { + background: #FF4742; + border: 1px solid #FF4742; + border-radius: 6px; + box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px; + box-sizing: border-box; + color: #FFFFFF; + cursor: pointer; + display: inline-block; + font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif; + font-size: 16px; + font-weight: 800; + line-height: 16px; + min-height: 40px; + outline: 0; + padding: 12px 14px; + text-align: center; + text-rendering: geometricprecision; + text-transform: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; +} + +.clearBtn:hover, +.clearBtn:active { + background-color: initial; + background-position: 0 0; + color: #FF4742; +} + +.clearBtn:active { + opacity: .5; +} + +.ClearBtn-container { + display: flex; + justify-content: center; + } \ No newline at end of file diff --git a/code/src/components/ClearBtn.js b/code/src/components/ClearBtn.js index 6aff66581..c2cbfb986 100644 --- a/code/src/components/ClearBtn.js +++ b/code/src/components/ClearBtn.js @@ -2,6 +2,7 @@ /* eslint-disable indent */ import React from 'react'; import { useDispatch } from 'react-redux'; +import './ClearBtn.css'; import tasks from 'reducers/tasks'; const ClearBtn = () => { @@ -11,7 +12,7 @@ const ClearBtn = () => { } return (
- +
) } diff --git a/code/src/components/Counter.js b/code/src/components/Counter.js index 2c2997f3b..5de88c182 100644 --- a/code/src/components/Counter.js +++ b/code/src/components/Counter.js @@ -10,7 +10,7 @@ const Counter = () => { if (items.length === 0) { return '' } else if (items.length === completedTasks.length) { - return `All done ! ${completedTasks.length} / ${items.length}` + return `All done! ${completedTasks.length} / ${items.length}` } else { return `${completedTasks.length} / ${items.length} done` } diff --git a/code/src/components/TaskList.css b/code/src/components/TaskList.css index e69de29bb..21da99475 100644 --- a/code/src/components/TaskList.css +++ b/code/src/components/TaskList.css @@ -0,0 +1,61 @@ +.tasklist-container { + display: flex; + flex-direction: column; + justify-items: center; +} + + .taskList { + display: flex; + flex-direction: column; + gap: 10px; + padding: 0; + } + + ul { + list-style-type: none; + padding: 15px; +} + +.checkBox { + height: 20px; + width: 20px; + margin: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: space-around; +} + +.listSection { + padding: 10px; + border-radius: 12px; + width: 100%; + display: flex; + flex-direction: column; + white-space: break-spaces; + word-break: break-all; +} + +.timeStamp { + font-size: 10px; + text-align: left; +} + +.taskText { + display: flex; +} + +.mainList { + display: flex; + text-align: center; + justify-content: space-between; +} + + +.list { + background: rgba(148, 187, 233, 0.4); + border-radius: 12px; +} diff --git a/code/src/components/TaskList.js b/code/src/components/TaskList.js index 78c567c5d..c2350ecc9 100644 --- a/code/src/components/TaskList.js +++ b/code/src/components/TaskList.js @@ -19,20 +19,26 @@ const TaskList = () => {
    {taskList.map((singleTask) => ( -
  • - onTaskToggle(singleTask.id)} /> - {singleTask.name} - {singleTask.time} - +
  • +

    +

    + onTaskToggle(singleTask.id)} /> +
    +
    +
    {singleTask.name}
    +
    {singleTask.time}
    +
    + +

    • ))} -
+
) } diff --git a/code/src/index.css b/code/src/index.css index e39d31f78..e93b00a7c 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -23,22 +23,31 @@ code { width: 20px; } -.tasklist-container { - +.App{ + height: 100vh; + width: 100vw; display: flex; + align-items: center; justify-content: center; - } -.ClearBtn-container { - display: flex; - justify-content: center; +.app-container{ + height: 8%; + width: 90%; + max-width: 400px; + padding: 32px 0px; + border-radius: 50px; + background: transparent; + display: table; + box-shadow: 32px 32px 64px #bebebe, + -32px -32px 64px #ffffff; } -.App { +.app-container-task{ + flex: 1; + width: 100%; display: flex; - align-items: center; - justify-content: center; flex-direction: column; - width: 100%; + align-items: center; + padding-top: 12px; } \ No newline at end of file From c5d83394955c1e12eb15d99c99fb0d33dfb4fb66 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Mon, 24 Apr 2023 00:58:55 +0200 Subject: [PATCH 05/11] added button styling --- code/src/components/AddTask.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/code/src/components/AddTask.css b/code/src/components/AddTask.css index ba7adb5de..f4dd84a30 100644 --- a/code/src/components/AddTask.css +++ b/code/src/components/AddTask.css @@ -26,4 +26,11 @@ input{ .addBtn { background: transparent; border: none; -} \ No newline at end of file +} + +.addBtn:hover { + background: transparent; + border: none; + cursor: pointer; + transform: scale(1.05); +} From cf80c1f0300f54e996a0793d827aeeb02b792a41 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Mon, 24 Apr 2023 01:00:50 +0200 Subject: [PATCH 06/11] added button styling --- code/src/components/TaskList.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/code/src/components/TaskList.css b/code/src/components/TaskList.css index 21da99475..b2150ec6c 100644 --- a/code/src/components/TaskList.css +++ b/code/src/components/TaskList.css @@ -59,3 +59,9 @@ background: rgba(148, 187, 233, 0.4); border-radius: 12px; } + + +.removeBtn:hover { + cursor: pointer; + transform: scale(1.1); +} \ No newline at end of file From b6957d1f35c1a261b2afb90d1288f3b3c82f42f2 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Mon, 24 Apr 2023 01:07:08 +0200 Subject: [PATCH 07/11] updated README --- README.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/README.md b/README.md index e9b474ba2..d54d150f5 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,6 @@ # Project Todos -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## The problem - -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +In this week the assignment was to create a todo app with Redux by create slices, reducers, actions and how to interact with the store. ## View it live From 3e22e87b2ae348205fd6fc1947a32f53fc0f2b7b Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Mon, 24 Apr 2023 01:10:57 +0200 Subject: [PATCH 08/11] updated README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d54d150f5..30c3f48c5 100644 --- a/README.md +++ b/README.md @@ -4,4 +4,4 @@ In this week the assignment was to create a todo app with Redux by create slices ## 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://todo-ajmal.netlify.app/ From 5e48a6188e5f8325044a0af5ef64421d0fc11407 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Mon, 24 Apr 2023 01:19:53 +0200 Subject: [PATCH 09/11] added styling to checkbox --- code/src/components/TaskList.css | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/code/src/components/TaskList.css b/code/src/components/TaskList.css index b2150ec6c..84bde0c4f 100644 --- a/code/src/components/TaskList.css +++ b/code/src/components/TaskList.css @@ -17,16 +17,8 @@ } .checkBox { - height: 20px; - width: 20px; margin: auto; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: flex; - align-items: center; - justify-content: space-around; + scale: 150%; } .listSection { From e65ae95def59fabb2d613a88fda243e531e4f8d6 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Mon, 24 Apr 2023 01:23:02 +0200 Subject: [PATCH 10/11] changed meta tag --- code/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..26d37bc59 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -3,7 +3,7 @@ - + - Technigo React App + To-Do App