diff --git a/src/App.css b/src/App.css
new file mode 100644
index 00000000..b9d355df
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 00000000..c5ed2a25
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react';
+import Header from './components/Header';
+import AddTodo from './components/AddTodo';
+import Category from './components/Category';
+import TodoList from './components/TodoList';
+
+function App() {
+ const [todos, setTodos] = useState(() => {
+ const savedTodos = localStorage.getItem('todos');
+ return savedTodos ? JSON.parse(savedTodos) : [
+ { id: 1, text: 'Eat', completed: false },
+ { id: 2, text: 'Sleep', completed: false },
+ { id: 3, text: 'Repeat', completed: false },
+ ];
+ });
+ const [filter, setFilter] = useState('All');
+
+ useEffect(() => {
+ localStorage.setItem('todos', JSON.stringify(todos));
+ }, [todos]);
+
+ const addTodo = (text) => {
+ const newTodo = {
+ id: Date.now(),
+ text,
+ completed: false,
+ };
+ setTodos([newTodo, ...todos]);
+ };
+
+ const deleteTodo = (id) => {
+ setTodos(todos.filter((todo) => todo.id !== id));
+ };
+
+ const toggleComplete = (id) => {
+ setTodos(
+ todos.map((todo) =>
+ todo.id === id ? { ...todo, completed: !todo.completed } : todo
+ )
+ );
+ };
+
+ const editTodo = (id, newText) => {
+ setTodos(
+ todos.map((todo) =>
+ todo.id === id ? { ...todo, text: newText } : todo
+ )
+ );
+ };
+
+ const filteredTodos = todos.filter((todo) => {
+ if (filter === 'Active') return !todo.completed;
+ if (filter === 'Completed') return todo.completed;
+ return true;
+ });
+
+ return (
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/AddTodo.jsx b/src/components/AddTodo.jsx
new file mode 100644
index 00000000..c02c1b80
--- /dev/null
+++ b/src/components/AddTodo.jsx
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+export default function AddTodo({ onAdd }) {
+ const [input, setInput] = useState('');
+
+ const handleAdd = () => {
+ if (input.trim()) {
+ onAdd(input);
+ setInput('');
+ }
+ };
+
+ return (
+
+ setInput(e.target.value)}
+ placeholder="Enter a task"
+ />
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Category.jsx b/src/components/Category.jsx
new file mode 100644
index 00000000..42ec996e
--- /dev/null
+++ b/src/components/Category.jsx
@@ -0,0 +1,9 @@
+export default function Category({ current, onChange }) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 00000000..a84507f0
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,9 @@
+export default function Header() {
+ return (
+
+
TodoMatic
+ What needs to be done?
+
+ );
+ }
+
\ No newline at end of file
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
new file mode 100644
index 00000000..8501c2ea
--- /dev/null
+++ b/src/components/TodoItem.jsx
@@ -0,0 +1,55 @@
+import { useState } from 'react';
+
+export default function TodoItem({ todo, onDelete, onToggle, onEdit }) {
+ const [isEditing, setIsEditing] = useState(false);
+ const [editText, setEditText] = useState(todo.text);
+
+ const handleEdit = () => {
+ if (isEditing) {
+ if (editText.trim() !== '') {
+ onEdit(todo.id, editText);
+ }
+ }
+ setIsEditing(!isEditing);
+ };
+
+ const handleCancel = () => {
+ setEditText(todo.text);
+ setIsEditing(false);
+ };
+
+ return (
+
+ onToggle(todo.id)}
+ />
+ {isEditing ? (
+ <>
+ setEditText(e.target.value)}
+ className="edit-input"
+ />
+
+
+
+ ) : (
+ <>
+
+ {todo.text}
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
new file mode 100644
index 00000000..0dcc34a8
--- /dev/null
+++ b/src/components/TodoList.jsx
@@ -0,0 +1,18 @@
+import TodoItem from './TodoItem';
+
+export default function TodoList({ todos, onDelete, onToggle, onEdit }) {
+ return (
+
+
{todos.length} tasks remaining
+ {todos.map((todo) => (
+
+ ))}
+