-
-
-
-
-
-
-
- setInputValue(e.target.value)}
- />
-
-
-
- setFilter("all")} />
- setFilter("active")} />
- setFilter("completed")} />
-
-
-
-
-
- {filteredTasks.map((task, index) => (
- -
- toggleTask(index)}
- />
-
- editTask(index, prompt("Edit task:", task.name))}
- />
- deleteTask(index)}
- />
-
- ))}
-
+
);
}
diff --git a/src/component/AddTodo.jsx b/src/component/AddTodo.jsx
new file mode 100644
index 00000000..4207b6b0
--- /dev/null
+++ b/src/component/AddTodo.jsx
@@ -0,0 +1,18 @@
+import InputComponent from "./InputComponent";
+import ButtonComponent from "./ButtonComponent";
+
+function AddTodo({ inputValue, setInputValue, addTask }) {
+ return (
+
+
+ setInputValue(e.target.value)}
+ />
+
+
+
+ );
+}
+
+export default AddTodo;
\ No newline at end of file
diff --git a/src/component/ButtonComponent.jsx b/src/component/ButtonComponent.jsx
index e972d833..701db591 100644
--- a/src/component/ButtonComponent.jsx
+++ b/src/component/ButtonComponent.jsx
@@ -1,7 +1,12 @@
-import React from "react";
+function ButtonComponent({ label, onClick, type }) {
+
+ const buttonClass = type === "add" ? "add-button-container" : "";
-function ButtonComponent({ label, onClick }) {
- return
;
+ return (
+
+ );
}
export default ButtonComponent;
\ No newline at end of file
diff --git a/src/component/Category.jsx b/src/component/Category.jsx
new file mode 100644
index 00000000..b0f252d7
--- /dev/null
+++ b/src/component/Category.jsx
@@ -0,0 +1,14 @@
+
+import ButtonComponent from "./ButtonComponent";
+
+function Category({ setFilter }) {
+ return (
+
+ setFilter("all")} />
+ setFilter("active")} />
+ setFilter("completed")} />
+
+ );
+}
+
+export default Category;
\ No newline at end of file
diff --git a/src/component/CheckboxComponent.jsx b/src/component/CheckboxComponent.jsx
index 5473e91f..39f3c143 100644
--- a/src/component/CheckboxComponent.jsx
+++ b/src/component/CheckboxComponent.jsx
@@ -1,5 +1,3 @@
-import React from "react";
-
function CheckboxComponent({ isChecked, onChange }) {
return
;
}
diff --git a/src/component/Header.jsx b/src/component/Header.jsx
new file mode 100644
index 00000000..03a3575a
--- /dev/null
+++ b/src/component/Header.jsx
@@ -0,0 +1,12 @@
+import TextComponent from "./TextComponent";
+
+function Header() {
+ return (
+
+
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/component/InputComponent.jsx b/src/component/InputComponent.jsx
index 7bcac583..6bfbe0dc 100644
--- a/src/component/InputComponent.jsx
+++ b/src/component/InputComponent.jsx
@@ -1,5 +1,3 @@
-import React from "react";
-
function InputComponent({ value, onChange, placeholder }) {
return
;
}
diff --git a/src/component/TextComponent.jsx b/src/component/TextComponent.jsx
index 35eaaf68..ade087e7 100644
--- a/src/component/TextComponent.jsx
+++ b/src/component/TextComponent.jsx
@@ -1,7 +1,11 @@
-import React from "react";
+function TextComponent({ text, type }) {
+
+ const style = {
+ fontSize: type === "title" ? "2rem" : "1.5rem",
+ fontWeight: type === "title" ? "bold" : "normal",
+ };
-function TextComponent({ text }) {
- return
{text};
+ return
{text};
}
export default TextComponent;
\ No newline at end of file
diff --git a/src/component/TodoComponent.jsx b/src/component/TodoComponent.jsx
new file mode 100644
index 00000000..f4135263
--- /dev/null
+++ b/src/component/TodoComponent.jsx
@@ -0,0 +1,31 @@
+// src/components/Todo.jsx
+import CheckboxComponent from "./CheckboxComponent";
+import ButtonComponent from "./ButtonComponent";
+
+function Todo({ task, index, toggleTask, editTask, deleteTask }) {
+ return (
+
+
+ toggleTask(index)}
+ />
+ {task.name}
+
+
+ editTask(index, prompt("Edit task:", task.name))}
+ />
+ deleteTask(index)}
+ />
+
+
+ );
+}
+
+export default Todo;
diff --git a/src/component/TodoList.jsx b/src/component/TodoList.jsx
new file mode 100644
index 00000000..38ac15bd
--- /dev/null
+++ b/src/component/TodoList.jsx
@@ -0,0 +1,21 @@
+function TodoList({ filteredTasks, toggleTask, editTask, deleteTask, activeTaskCount }) {
+ return (
+
+
+
+
+
+ {filteredTasks.map((task, index) => (
+
+ ))}
+
+
+ );
+}
diff --git a/src/index.css b/src/index.css
index 08a3ac9e..e69de29b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +0,0 @@
-:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/vite.config.js b/vite.config.js
index 24a4b461..0891f5f1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,4 +1,4 @@
-import react from "@vitejs/plugin-react";
+ import react from "@vitejs/plugin-react";
import { resolve } from "node:path";
import { defineConfig } from "vite";
@@ -12,6 +12,7 @@ export default defineConfig({
},
},
server: {
+
port: 3000,
},
build: {