From d51efdf07c02a38ece718d5f6bdd7a63ac5a90d4 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 11:39:13 +0200 Subject: [PATCH 01/22] added folders --- README.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d1c68b5..975202d 100644 --- a/README.md +++ b/README.md @@ -1 +1,21 @@ -# Todo \ No newline at end of file +# links + + + +## Project Structure +src/ +├── App.js # Main App component with routing [] +├── store/ +│ └── todoStore.jsx # Zustand store for state management [] +├── components/ +│ ├── StyledComponents.jsx # Reusable styled components [] +│ ├── Header.jsx # App header with date and controls [] +│ ├── TaskItem.jsx # Individual task component [] +│ ├── AddTask.jsx # Form to add new tasks [] +│ ├── TaskList.jsx # List container for tasks [] +│ └── TaskFilters.jsx # Filter and action buttons [] +├── pages/ +│ ├── TodoPage.jsx # Main todo page [] +│ └── AboutPage.jsx # About page [] +└── styles/ + └── GlobalStyles.jsx [] \ No newline at end of file From 00a30986e1687ae7b0eb9393c3c6d74c23e5c04b Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 12:16:23 +0200 Subject: [PATCH 02/22] added folder, app structure --- src/components/AddTask.jsx | 0 src/components/Header.jsx | 0 src/components/StyledComponents.jsx | 0 src/components/TaskFilters.jsx | 0 src/components/TaskItem.jsx | 0 src/components/TaskList.jsx | 0 src/pages/AboutPage.jsx | 0 src/pages/TodoPage.jsx | 0 src/store/todoStore.js | 0 src/styles/GlobalStyles.jsx | 0 10 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/AddTask.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/StyledComponents.jsx create mode 100644 src/components/TaskFilters.jsx create mode 100644 src/components/TaskItem.jsx create mode 100644 src/components/TaskList.jsx create mode 100644 src/pages/AboutPage.jsx create mode 100644 src/pages/TodoPage.jsx create mode 100644 src/store/todoStore.js create mode 100644 src/styles/GlobalStyles.jsx diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/StyledComponents.jsx b/src/components/StyledComponents.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/TaskFilters.jsx b/src/components/TaskFilters.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/TodoPage.jsx b/src/pages/TodoPage.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/store/todoStore.js b/src/store/todoStore.js new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/GlobalStyles.jsx b/src/styles/GlobalStyles.jsx new file mode 100644 index 0000000..e69de29 From 7f82c79361bb6908e23334d0d3e4492dd7fe9afe Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 12:24:39 +0200 Subject: [PATCH 03/22] installed dependecies --- package.json | 6 +++++- src/App.jsx | 2 +- src/components/AddTask.jsx | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index caf6289..f82e48f 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,12 @@ "preview": "vite preview" }, "dependencies": { + "date-fns": "^4.1.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.6.1", + "styled-components": "^6.1.18", + "zustand": "^5.0.5" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/src/App.jsx b/src/App.jsx index 5427540..0cd15be 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,5 @@ export const App = () => { return ( -

React Boilerplate

+

To do App

) } diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index e69de29..8b13789 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -0,0 +1 @@ + From 16cf86a75eda100244e6588e3202ebdbd9e4783a Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 13:06:59 +0200 Subject: [PATCH 04/22] font + button etc --- src/App.jsx | 21 ++++- src/components/AddTask.jsx | 38 ++++++++ src/components/AddTaskModal.jsx | 162 ++++++++++++++++++++++++++++++++ src/components/Header.jsx | 46 +++++++++ src/components/TaskItem.jsx | 66 +++++++++++++ src/components/TaskList.jsx | 39 ++++++++ src/pages/AboutPage.jsx | 0 src/pages/TodoPage.jsx | 0 src/store/todoStore.js | 19 ++++ src/styles/GlobalStyles.jsx | 14 +++ 10 files changed, 400 insertions(+), 5 deletions(-) create mode 100644 src/components/AddTaskModal.jsx delete mode 100644 src/pages/AboutPage.jsx delete mode 100644 src/pages/TodoPage.jsx diff --git a/src/App.jsx b/src/App.jsx index 0cd15be..fc326ca 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,16 @@ -export const App = () => { - return ( -

To do App

- ) -} +import { BrowserRouter as Router } from 'react-router-dom'; +import { GlobalStyle } from './styles/GlobalStyles'; +import Header from './components/Header'; +import AddTask from './components/AddTask'; +import TaskList from './components/TaskList'; + +export const App = () => ( + + +
+
+ + +
+ +); \ No newline at end of file diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index 8b13789..27c4d80 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -1 +1,39 @@ +import { useState } from 'react'; +import styled from 'styled-components'; +import AddTaskModal from './AddTaskModal'; +const AddButton = styled.button` + position: fixed; + right: 24px; + bottom: 24px; + width: 56px; + height: 56px; + border-radius: 20%; + background: #111; + color: #fff; + font-size: 2.2rem; + font-weight: 200; + font-family: 'Arial', 'Helvetica Neue', Arial, sans-serif; + border: none; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px rgba(0,0,0,0.12); + cursor: pointer; + z-index: 100; +`; + +const AddTask = () => { + const [open, setOpen] = useState(false); + + return ( + <> + setOpen(true)} aria-label="Add task"> + ＋ + + {open && setOpen(false)} />} + + ); +}; + +export default AddTask; \ No newline at end of file diff --git a/src/components/AddTaskModal.jsx b/src/components/AddTaskModal.jsx new file mode 100644 index 0000000..f261638 --- /dev/null +++ b/src/components/AddTaskModal.jsx @@ -0,0 +1,162 @@ +import styled from 'styled-components'; +import { useState } from 'react'; +import { useTodoStore } from '../store/todoStore'; + +const ModalOverlay = styled.div` + position: fixed; + inset: 0; + background: rgba(0,0,0,0.45); + display: flex; + align-items: flex-end; + justify-content: center; + z-index: 200; +`; + +const Modal = styled.div` + background: #fff; + width: 100%; + max-width: 600px; + border-radius: 32px 32px 0 0; + padding: 32px 24px 24px 24px; + box-shadow: 0 -2px 24px rgba(0,0,0,0.08); + margin-bottom: 0; +`; + +const ModalBar = styled.div` + width: 60px; + height: 6px; + background: #e0e3e7; + border-radius: 3px; + margin: 0 auto 18px auto; +`; + +const ModalTitle = styled.h2` + text-align: center; + font-size: 1.5rem; + font-weight: 700; + margin: 0 0 24px 0; +`; + +const Input = styled.input` + width: 100%; + padding: 18px; + border-radius: 16px; + border: 2px solid #b5cdfa; + background: #f7f8fa; + font-size: 1.15rem; + margin-bottom: 18px; + outline: none; + color: #222; + &::placeholder { + color: #aab2bb; + font-size: 1.1rem; + } +`; + +const Select = styled.select` + width: 100%; + padding: 16px; + border-radius: 12px; + border: none; + background: #f7f8fa; + font-size: 1.1rem; + margin-bottom: 28px; + color: #222; +`; + +const ButtonRow = styled.div` + display: flex; + gap: 16px; +`; + +const CancelButton = styled.button` + flex: 1; + padding: 18px 0; + border-radius: 16px; + border: none; + background: #f7f8fa; + color: #6b7280; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; +`; + +const SubmitButton = styled.button` + flex: 2; + padding: 18px 0; + border-radius: 16px; + border: none; + background: #888; + color: #fff; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; +`; + +const AddTaskModal = ({ onClose }) => { + const [value, setValue] = useState(''); + const [category, setCategory] = useState('General'); + const addTask = useTodoStore((s) => s.addTask); + + const handleSubmit = (e) => { + e.preventDefault(); + if (value.trim()) { + addTask({ + id: Date.now(), + title: value, + category, + completed: false, + }); + setValue(''); + setCategory('General'); + onClose(); + } + }; + + // Close modal on overlay click or Esc key + const handleOverlayClick = (e) => { + if (e.target === e.currentTarget) onClose(); + }; + + return ( + + + + Add New Task +
+ setValue(e.target.value)} + aria-label="Task name" + autoFocus + /> + + + + Cancel + + + Add Task + + +
+ + + ); +}; + +export default AddTaskModal; \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx index e69de29..de9ccc2 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -0,0 +1,46 @@ +import styled from 'styled-components'; +import { format } from 'date-fns'; +import { useTodoStore } from '../store/todoStore'; + + +const HeaderContainer = styled.header` + display: flex; + flex-direction: column; + padding: 24px 20px 0 20px; + background: #fff; +`; + +const DateText = styled.div` + font-size: 0.95rem; + color: #888; + margin-top: 12px; +`; + +const DayText = styled.h1` + font-size: 1.5rem; + font-weight: 700; + margin: 0; + margin-top: 2px; +`; +const TaskCount = styled.div` + font-size: 1rem; + color: #888; + margin: 8px 0 0 0; +`; + + +const Header = () => { + const now = new Date(); + const tasks = useTodoStore((s) => s.tasks); + const uncompleted = tasks.filter(t => !t.completed).length; + + return ( + + {format(now, "do MMM yyyy")} + {format(now, "EEEE")} + {uncompleted} tasks remaining + + ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx index e69de29..5d279d0 100644 --- a/src/components/TaskItem.jsx +++ b/src/components/TaskItem.jsx @@ -0,0 +1,66 @@ +import styled from 'styled-components'; +import { useTodoStore } from '../store/todoStore'; + +const TaskRow = styled.div` + display: flex; + align-items: flex-start; + padding: 12px 0; + border-bottom: 1px solid #eee; +`; + +const Checkbox = styled.input` + margin-right: 16px; + width: 22px; + height: 22px; +`; + +const TaskInfo = styled.div` + flex: 1; +`; + +const Title = styled.div` + font-size: 1.1rem; + color: ${({ completed }) => (completed ? '#aaa' : '#222')}; + text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')}; +`; + +const DeleteButton = styled.button` + background: none; + border: none; + color: #e57373; + font-size: 1.3rem; + margin-left: 8px; + cursor: pointer; + align-self: flex-start; +`; + +const Category = styled.div` + font-size: 0.9rem; + color: #b5b5b5; + margin-top: 2px; +`; + +const TaskItem = ({ task }) => { + const toggleTask = useTodoStore((s) => s.toggleTask); + const removeTask = useTodoStore((s) => s.removeTask); + + return ( + + toggleTask(task.id)} + aria-label={task.title} + /> + + {task.title} + {task.category} + + removeTask(task.id)}> + × + + + ); +}; + +export default TaskItem; \ No newline at end of file diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx index e69de29..9bde37a 100644 --- a/src/components/TaskList.jsx +++ b/src/components/TaskList.jsx @@ -0,0 +1,39 @@ +import styled from 'styled-components'; +import { useTodoStore } from '../store/todoStore'; +import TaskItem from './TaskItem'; + +const SectionTitle = styled.h2` + font-size: 1.1rem; + font-weight: 600; + margin: 24px 0 8px 0; +`; + +const TaskListContainer = styled.div` + padding: 0 20px; +`; + +const TaskList = () => { + const tasks = useTodoStore((s) => s.tasks); + const todos = tasks.filter((t) => !t.completed); + const dones = tasks.filter((t) => t.completed); + + return ( + + Todo + {todos.length === 0 ? ( +
No tasks to do. 🎉
+ ) : ( + todos.map((task) => ) + )} + + Done + {dones.length === 0 ? ( +
No completed tasks yet.
+ ) : ( + dones.map((task) => ) + )} + + ); +}; + +export default TaskList; \ No newline at end of file diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/TodoPage.jsx b/src/pages/TodoPage.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/store/todoStore.js b/src/store/todoStore.js index e69de29..34fef50 100644 --- a/src/store/todoStore.js +++ b/src/store/todoStore.js @@ -0,0 +1,19 @@ +import { create } from 'zustand'; + +export const useTodoStore = create((set) => ({ + tasks: [], + addTask: (task) => + set((state) => ({ + tasks: [...state.tasks, task], + })), + toggleTask: (id) => + set((state) => ({ + tasks: state.tasks.map((t) => + t.id === id ? { ...t, completed: !t.completed } : t + ), + })), + removeTask: (id) => + set((state) => ({ + tasks: state.tasks.filter((t) => t.id !== id), + })), +})); \ No newline at end of file diff --git a/src/styles/GlobalStyles.jsx b/src/styles/GlobalStyles.jsx index e69de29..1b91bec 100644 --- a/src/styles/GlobalStyles.jsx +++ b/src/styles/GlobalStyles.jsx @@ -0,0 +1,14 @@ +import { createGlobalStyle } from 'styled-components'; + +export const GlobalStyle = createGlobalStyle` + body { + margin: 0; + padding: 0; + font-family: 'Inter', Arial, sans-serif; + background: #fafafa; + color: #222; + } + * { + box-sizing: border-box; + } +`; \ No newline at end of file From 8d9774a3fc8a31f9c7102ba7ec4fca31fd7494c8 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 13:19:17 +0200 Subject: [PATCH 05/22] hoover bin deleteButton --- package.json | 1 + src/components/TaskItem.jsx | 13 +++++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f82e48f..15d2d67 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "date-fns": "^4.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-icons": "^5.5.0", "react-router-dom": "^7.6.1", "styled-components": "^6.1.18", "zustand": "^5.0.5" diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx index 5d279d0..8d8898a 100644 --- a/src/components/TaskItem.jsx +++ b/src/components/TaskItem.jsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { useTodoStore } from '../store/todoStore'; +import { FiTrash2 } from 'react-icons/fi'; const TaskRow = styled.div` display: flex; @@ -27,11 +28,19 @@ const Title = styled.div` const DeleteButton = styled.button` background: none; border: none; - color: #e57373; + color: #bdbdbd; /* grey by default */ font-size: 1.3rem; margin-left: 8px; cursor: pointer; align-self: flex-start; + display: flex; + align-items: center; + transition: color 0.2s; + + &:hover, + &:focus { + color: #e57373; /* red on hover/focus */ + } `; const Category = styled.div` @@ -57,7 +66,7 @@ const TaskItem = ({ task }) => { {task.category} removeTask(task.id)}> - × + ); From 77f06e7288f635031ec1b5276331417c41be8f15 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 13:36:00 +0200 Subject: [PATCH 06/22] timestamp added --- README.md | 22 +++++++++++----------- src/components/AddTaskModal.jsx | 1 + src/components/StyledComponents.jsx | 0 src/components/TaskItem.jsx | 5 +++++ 4 files changed, 17 insertions(+), 11 deletions(-) delete mode 100644 src/components/StyledComponents.jsx diff --git a/README.md b/README.md index 975202d..d1cbb11 100644 --- a/README.md +++ b/README.md @@ -4,18 +4,18 @@ ## Project Structure src/ -├── App.js # Main App component with routing [] +├── App.js # Main App component with routing [x] ├── store/ -│ └── todoStore.jsx # Zustand store for state management [] +│ └── todoStore.jsx # Zustand store for state management [x] ├── components/ -│ ├── StyledComponents.jsx # Reusable styled components [] -│ ├── Header.jsx # App header with date and controls [] -│ ├── TaskItem.jsx # Individual task component [] -│ ├── AddTask.jsx # Form to add new tasks [] -│ ├── TaskList.jsx # List container for tasks [] -│ └── TaskFilters.jsx # Filter and action buttons [] +│ ├── StyledComponents.jsx # Reusable styled components [x] +│ ├── Header.jsx # App header with date and controls [x] +│ ├── TaskItem.jsx # Individual task component [x] +│ ├── AddTask.jsx # Form to add new tasks [x] +│ ├── TaskList.jsx # List container for tasks [x] +│ └── TaskFilters.jsx # Filter and action buttons [x] ├── pages/ -│ ├── TodoPage.jsx # Main todo page [] -│ └── AboutPage.jsx # About page [] +│ ├── TodoPage.jsx # Main todo page [x] +│ └── AboutPage.jsx # About page [x] └── styles/ - └── GlobalStyles.jsx [] \ No newline at end of file + └── GlobalStyles.jsx [x] \ No newline at end of file diff --git a/src/components/AddTaskModal.jsx b/src/components/AddTaskModal.jsx index f261638..c0ea167 100644 --- a/src/components/AddTaskModal.jsx +++ b/src/components/AddTaskModal.jsx @@ -106,6 +106,7 @@ const AddTaskModal = ({ onClose }) => { title: value, category, completed: false, + createdAt: new Date().toISOString(), }); setValue(''); setCategory('General'); diff --git a/src/components/StyledComponents.jsx b/src/components/StyledComponents.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx index 8d8898a..5033068 100644 --- a/src/components/TaskItem.jsx +++ b/src/components/TaskItem.jsx @@ -64,6 +64,11 @@ const TaskItem = ({ task }) => { {task.title} {task.category} + {task.createdAt && ( +
+ {format(new Date(task.createdAt), 'd MMM yyyy, HH:mm')} +
+ )} removeTask(task.id)}> From 236b8905eade4c9d8f7ad3aef99cf3470fdd5e9d Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 13:37:36 +0200 Subject: [PATCH 07/22] added import { format } from 'date-fns'; --- src/components/TaskItem.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx index 5033068..4c324e8 100644 --- a/src/components/TaskItem.jsx +++ b/src/components/TaskItem.jsx @@ -1,6 +1,7 @@ import styled from 'styled-components'; import { useTodoStore } from '../store/todoStore'; import { FiTrash2 } from 'react-icons/fi'; +import { format } from 'date-fns'; const TaskRow = styled.div` display: flex; From 316127355429ba803a24d059e61ca8ab0625b88c Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 13:45:04 +0200 Subject: [PATCH 08/22] empty state, hide done, show to do --- src/components/TaskList.jsx | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx index 9bde37a..8bfc5fe 100644 --- a/src/components/TaskList.jsx +++ b/src/components/TaskList.jsx @@ -19,18 +19,25 @@ const TaskList = () => { return ( - Todo - {todos.length === 0 ? ( -
No tasks to do. 🎉
+ {tasks.length === 0 ? ( +
+ No tasks yet. Add your first task! 🎉 +
) : ( - todos.map((task) => ) - )} - - Done - {dones.length === 0 ? ( -
No completed tasks yet.
- ) : ( - dones.map((task) => ) + <> + {todos.length > 0 && ( + <> + Todo + {todos.map((task) => )} + + )} + {dones.length > 0 && ( + <> + Done + {dones.map((task) => )} + + )} + )} ); From 99b2c2cc980aee49c84a13872449e7a9f08fe1d2 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 13:48:36 +0200 Subject: [PATCH 09/22] empty state fix --- src/components/TaskList.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx index 8bfc5fe..7cfb2e3 100644 --- a/src/components/TaskList.jsx +++ b/src/components/TaskList.jsx @@ -12,6 +12,14 @@ const TaskListContainer = styled.div` padding: 0 20px; `; +const EmptyState = styled.div` +color: #bbb; +text-align: center; +margin: 48px 0; +font-size: 1.2rem; +`; + + const TaskList = () => { const tasks = useTodoStore((s) => s.tasks); const todos = tasks.filter((t) => !t.completed); @@ -20,9 +28,9 @@ const TaskList = () => { return ( {tasks.length === 0 ? ( -
+ No tasks yet. Add your first task! 🎉 -
+ ) : ( <> {todos.length > 0 && ( From 251eca2ae97f9b275c3ee2ad527f4715cf558370 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 14:20:57 +0200 Subject: [PATCH 10/22] added lottie gradient animation, grey scale --- package.json | 2 ++ src/components/TaskList.jsx | 18 ++++++++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 15d2d67..b93f926 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "preview": "vite preview" }, "dependencies": { + "@lottiefiles/dotlottie-react": "^0.13.5", "date-fns": "^4.1.0", + "lottie-react": "^2.4.1", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.5.0", diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx index 7cfb2e3..85c1965 100644 --- a/src/components/TaskList.jsx +++ b/src/components/TaskList.jsx @@ -1,6 +1,7 @@ import styled from 'styled-components'; import { useTodoStore } from '../store/todoStore'; import TaskItem from './TaskItem'; +import { DotLottieReact } from '@lottiefiles/dotlottie-react'; const SectionTitle = styled.h2` font-size: 1.1rem; @@ -15,11 +16,17 @@ const TaskListContainer = styled.div` const EmptyState = styled.div` color: #bbb; text-align: center; -margin: 48px 0; +margin: 0; font-size: 1.2rem; +display: flex; +flex-direction: column; +align-items: center; +justify-content: center; `; + + const TaskList = () => { const tasks = useTodoStore((s) => s.tasks); const todos = tasks.filter((t) => !t.completed); @@ -29,7 +36,14 @@ const TaskList = () => { {tasks.length === 0 ? ( - No tasks yet. Add your first task! 🎉 + + No tasks yet. Add your first task! ) : ( <> From 29be1591eca73d2f29b7174fc49c8891ada0d124 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 14:40:50 +0200 Subject: [PATCH 11/22] added pastel color on background of each cathegory --- src/components/AddTaskModal.jsx | 4 ++-- src/components/TaskFilters.jsx | 0 src/components/TaskItem.jsx | 17 +++++++++++++++-- src/components/TaskList.jsx | 5 +---- 4 files changed, 18 insertions(+), 8 deletions(-) delete mode 100644 src/components/TaskFilters.jsx diff --git a/src/components/AddTaskModal.jsx b/src/components/AddTaskModal.jsx index c0ea167..1b6ffbf 100644 --- a/src/components/AddTaskModal.jsx +++ b/src/components/AddTaskModal.jsx @@ -143,8 +143,8 @@ const AddTaskModal = ({ onClose }) => { - - + + diff --git a/src/components/TaskFilters.jsx b/src/components/TaskFilters.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx index 4c324e8..a2b9516 100644 --- a/src/components/TaskItem.jsx +++ b/src/components/TaskItem.jsx @@ -29,7 +29,7 @@ const Title = styled.div` const DeleteButton = styled.button` background: none; border: none; - color: #bdbdbd; /* grey by default */ + color: #bdbdbd; font-size: 1.3rem; margin-left: 8px; cursor: pointer; @@ -47,9 +47,22 @@ const DeleteButton = styled.button` const Category = styled.div` font-size: 0.9rem; color: #b5b5b5; + padding: 2px 6px; + border-radius: 8px; margin-top: 2px; + background: ${({ color }) => color || '#eee'}; `; +const categoryColors = { + General: '#ffe0ec', + Finance: '#e0f7fa', + Freelance: '#e0ffe0', + Design: '#e0e7ff', + 'Shopping List': '#fff9e0', + Personal: '#f3e0ff', + Health: '#e0fff4', +}; + const TaskItem = ({ task }) => { const toggleTask = useTodoStore((s) => s.toggleTask); const removeTask = useTodoStore((s) => s.removeTask); @@ -64,7 +77,7 @@ const TaskItem = ({ task }) => { /> {task.title} - {task.category} + {task.category} {task.createdAt && (
{format(new Date(task.createdAt), 'd MMM yyyy, HH:mm')} diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx index 85c1965..3cc4da8 100644 --- a/src/components/TaskList.jsx +++ b/src/components/TaskList.jsx @@ -24,9 +24,6 @@ align-items: center; justify-content: center; `; - - - const TaskList = () => { const tasks = useTodoStore((s) => s.tasks); const todos = tasks.filter((t) => !t.completed); @@ -40,7 +37,7 @@ const TaskList = () => { autoplay loop src="https://lottie.host/89ccd181-963b-4dfd-a0c9-be71032ed21c/huOeFAm1JL.lottie" - style={{ height: 380, width: 380, marginBottom: 16, filter: 'grayscale(1)' }} + style={{ height: 300, width: 300, marginBottom: 16, filter: 'grayscale(1)' }} aria-label="No tasks animation" /> No tasks yet. Add your first task! From abc386b0d43f75f705ef113b84d54901f2fb443f Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 15:03:35 +0200 Subject: [PATCH 12/22] responsiveness --- src/App.jsx | 13 ++++++++----- src/components/StyledComponents.jsx | 23 +++++++++++++++++++++++ src/styles/GlobalStyles.jsx | 5 +++-- 3 files changed, 34 insertions(+), 7 deletions(-) create mode 100644 src/components/StyledComponents.jsx diff --git a/src/App.jsx b/src/App.jsx index fc326ca..2bba276 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import { BrowserRouter as Router } from 'react-router-dom'; import { GlobalStyle } from './styles/GlobalStyles'; +import { MainContainer } from './components/StyledComponents'; import Header from './components/Header'; import AddTask from './components/AddTask'; import TaskList from './components/TaskList'; @@ -7,10 +8,12 @@ import TaskList from './components/TaskList'; export const App = () => ( -
-
- - -
+ +
+
+ + +
+ ); \ No newline at end of file diff --git a/src/components/StyledComponents.jsx b/src/components/StyledComponents.jsx new file mode 100644 index 0000000..21e72e0 --- /dev/null +++ b/src/components/StyledComponents.jsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +export const MainContainer = styled.div` + width: 100%; + min-height: 100vh; + background: #f7f8fa; + display: flex; + flex-direction: column; + padding: 0; + + @media (min-width: 700px) { + padding: 40px 0; + } + + @media (min-width: 1024px) { + max-width: 600px; + margin: 40px auto; + border-radius: 32px; + background: #fff; + box-shadow: 0 8px 32px rgba(0,0,0,0.08); + padding: 48px 0; + } +`; \ No newline at end of file diff --git a/src/styles/GlobalStyles.jsx b/src/styles/GlobalStyles.jsx index 1b91bec..17d7b8d 100644 --- a/src/styles/GlobalStyles.jsx +++ b/src/styles/GlobalStyles.jsx @@ -1,4 +1,4 @@ -import { createGlobalStyle } from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; export const GlobalStyle = createGlobalStyle` body { @@ -11,4 +11,5 @@ export const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; } -`; \ No newline at end of file +`; + From 3ece14c1c46dc74dcf49fb30c051586dbfba4a3c Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 15:19:17 +0200 Subject: [PATCH 13/22] Moday style fixed for resoponsiveness --- src/components/AddTask.jsx | 7 +++++++ src/components/AddTaskModal.jsx | 19 +++++++++++++++++++ src/components/StyledComponents.jsx | 2 ++ 3 files changed, 28 insertions(+) diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index 27c4d80..f6aa944 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -21,6 +21,13 @@ const AddButton = styled.button` box-shadow: 0 2px 8px rgba(0,0,0,0.12); cursor: pointer; z-index: 100; + + @media (min-width: 1024px) { + position: absolute; + right: 40px; + bottom: 40px; + } + `; const AddTask = () => { diff --git a/src/components/AddTaskModal.jsx b/src/components/AddTaskModal.jsx index 1b6ffbf..a339237 100644 --- a/src/components/AddTaskModal.jsx +++ b/src/components/AddTaskModal.jsx @@ -10,6 +10,16 @@ const ModalOverlay = styled.div` align-items: flex-end; justify-content: center; z-index: 200; + + @media (min-width: 1024px) { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border-radius: 32px; + + } `; const Modal = styled.div` @@ -20,6 +30,15 @@ const Modal = styled.div` padding: 32px 24px 24px 24px; box-shadow: 0 -2px 24px rgba(0,0,0,0.08); margin-bottom: 0; + +@media (min-width: 1024px) { + width: 100%; + max-width: 600px; + border-radius: 32px; + padding: 48px 40px; + box-shadow: 0 8px 32px rgba(0,0,0,0.08); +} + `; const ModalBar = styled.div` diff --git a/src/components/StyledComponents.jsx b/src/components/StyledComponents.jsx index 21e72e0..6259659 100644 --- a/src/components/StyledComponents.jsx +++ b/src/components/StyledComponents.jsx @@ -14,10 +14,12 @@ export const MainContainer = styled.div` @media (min-width: 1024px) { max-width: 600px; + min-height: 90vh; margin: 40px auto; border-radius: 32px; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.08); padding: 48px 0; + position: relative; } `; \ No newline at end of file From b1fe889f3d8f0872c89408785fb86e5ef7b4842a Mon Sep 17 00:00:00 2001 From: alex91-html Date: Thu, 29 May 2025 15:31:14 +0200 Subject: [PATCH 14/22] fixed header border radious on desktop --- src/components/Header.jsx | 9 ++++++++- src/components/StyledComponents.jsx | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index de9ccc2..03faf08 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -6,8 +6,15 @@ import { useTodoStore } from '../store/todoStore'; const HeaderContainer = styled.header` display: flex; flex-direction: column; - padding: 24px 20px 0 20px; + padding: 20px; background: #fff; + + @media (min-width: 1024px) { + padding: 40px; + border-top-left-radius: 32px; + border-top-right-radius: 32px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); + } `; const DateText = styled.div` diff --git a/src/components/StyledComponents.jsx b/src/components/StyledComponents.jsx index 6259659..3496762 100644 --- a/src/components/StyledComponents.jsx +++ b/src/components/StyledComponents.jsx @@ -9,7 +9,8 @@ export const MainContainer = styled.div` padding: 0; @media (min-width: 700px) { - padding: 40px 0; + + } @media (min-width: 1024px) { @@ -19,7 +20,6 @@ export const MainContainer = styled.div` border-radius: 32px; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.08); - padding: 48px 0; position: relative; } `; \ No newline at end of file From 8babe696544fbb3c32f6463719343fabdc30c3e0 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Fri, 30 May 2025 09:03:55 +0200 Subject: [PATCH 15/22] deployed on netlify and added links --- README.md | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index d1cbb11..d0d1848 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,24 @@ # links - +- github: https://github.com/alex91-html/js-project-todo +- netlify: https://alextodo-app.netlify.app/ ## Project Structure + \ No newline at end of file From 26d962d7b31f602adfabf04b296596dbce2dcbd7 Mon Sep 17 00:00:00 2001 From: alex91-html Date: Fri, 30 May 2025 09:14:40 +0200 Subject: [PATCH 16/22] color btn on hoover --- README.md | 4 ++-- src/components/AddTask.jsx | 4 ++++ src/components/AddTaskModal.jsx | 12 ++++++++++++ src/styles/GlobalStyles.jsx | 2 +- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d0d1848..ece7b69 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# links +## links - github: https://github.com/alex91-html/js-project-todo - netlify: https://alextodo-app.netlify.app/ -## Project Structure