Kendiproject1

package.json

@@ -3,8 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+		"@mantine/core": "^4.2.12",
+		"@mantine/hooks": "^4.2.12",
+    "tabler-icons-react": "^1.52.0",
+    "bootstrap": "^5.3.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.11.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {

src/App.css

@@ -1,19 +1,140 @@
-.App {
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+}
+
+.todo-app {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  width: 520px;
+  min-height: 600px;
+  background: #161a2b;
   text-align: center;
+  margin: 128px auto;
+  border-radius: 10px;
+  padding-bottom: 32px;
+}
+
+h1 {
+  margin: 32px 0;
+  color: #fff;
+  font-size: 24px;
+}
+
+.complete {
+  text-decoration: line-through;
+  opacity: 0.4;
+}
+
+.todo-form {
+  margin-bottom: 32px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.todo-input {
+  padding: 14px 32px 14px 16px;
+  border-radius: 4px 0 0 4px;
+  border: 2px solid #5d0cff;
+  outline: none;
+  max-width: 320px;
+  background: transparent;
+  color: #fff;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.todo-input::placeholder {
+  color: #e2e2e2;
+}
+
+.todo-button {
+  padding: 16px;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+  outline: none;
+  background: linear-gradient(
+    90deg,
+    rgba(93, 12, 255, 1) 0%,
+    rgba(155, 0, 250, 1) 100%
+  );
+  color: #fff;
+  text-transform: capitalize;
+}
+
+.todo-input.edit {
+  border: 2px solid #149fff;
+}
+
+.todo-button.edit {
+  background: linear-gradient(
+    90deg,
+    rgba(20, 159, 255, 1) 0%,
+    rgba(17, 122, 255, 1) 100%
+  );
+  padding: 16px 22px;
+}
+
+.todo-container {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+
+.todo-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 4px auto;
+  color: #fff;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 118, 20, 1) 0%,
+    rgba(255, 84, 17, 1) 100%
+  );
+
+  padding: 16px;
+  border-radius: 5px;
+  width: 90%;
+}
+
+.todo-row:nth-child(4n + 1) {
+  background: linear-gradient(
+    90deg,
+    rgba(93, 12, 255, 1) 0%,
+    rgba(155, 0, 250, 1) 100%
+  );
+}
+
+.todo-row:nth-child(4n + 2) {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 12, 241, 1) 0%,
+    rgba(250, 0, 135, 1) 100%
+  );
+}
+
+.todo-row:nth-child(4n + 3) {
+  background: linear-gradient(
+    90deg,
+    rgba(20, 159, 255, 1) 0%,
+    rgba(17, 122, 255, 1) 100%
+  );
+}
+
+.icons {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.delete-icon {
+  margin-right: 5px;
+  color: #fff;
+}
+
+.edit-icon {
+  color: #fff;
 }

src/App.js

@@ -1,17 +1,13 @@
 import React from "react";
-import logo from "./logo.png";
 import "./App.css";
 
+import TodoList from "./components/TodoList";
+
 class App extends React.Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
+      <div className=" Todo App">
+        <TodoList />
       </div>
     );
   }

src/components/Todo.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import TodoForm from "./TodoForm";
+import { RiCloseCircleLine } from "react-icons/ri";
+import { TiEdit } from "react-icons/ti";
+
+function Todo({ todos, completeTodo, removeTodo, updateTodo }) {
+  const [editMode, setEditMode] = useState(false);
+  const [edit, setEdit] = useState({
+    id: null,
+    value: "",
+  });
+
+  const submitUpdate = (value) => {
+    updateTodo(value.id, value);
+
+    setEdit({
+      id: null,
+      value: "",
+    });
+  };
+  if (edit.id) {
+    return <TodoForm edit={edit} editMode={editMode} setEditMode={setEditMode} onSubmit={submitUpdate} />;
+  }
+  return todos.map((todo, index) => (
+    <div
+      className={todo.isCpmplete ? "todo-row complete" : "todo-row"}
+      key={index}
+    >
+      <div key={todo.id} onClick={() => completeTodo(todo.id)}>
+        {todo.text}
+      </div>
+      <div className="icons">
+        <RiCloseCircleLine
+          onClick={() => removeTodo(todo.id)}
+          className="delete - icon"
+        />
+
+        <TiEdit
+          onClick={() => {
+            setEdit({ id: todo, value: todo.text })
+            setEditMode(true);
+          }}
+          className="edit-icon"
+        />
+      </div>
+    </div>
+  ));
+}
+
+export default Todo;

src/components/TodoForm.js

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { Modal, Center } from "@mantine/core";
+
+function TodoForm(props) {
+  const [input, setInput] = useState("");
+  const [update, setUpdate] = useState(props.edit ? props.edit.value : "");
+
+  const handleChange = (e) => {
+    if (props.editMode) setUpdate(e.target.value)
+    else setInput(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    props.onSubmit({
+      id: Math.floor(Math.random() * 10000),
+      text: input,
+    });
+
+    // makes the to do invisible.
+    setInput("");
+  };
+
+  const handleUpdate = (e) => {
+    e.preventDefault();
+
+    // makes the to do invisible.
+    setUpdate("");
+    props.setEditMode(false);
+
+    props.onSubmit({
+      id: props.edit.id,
+      text: update,
+    });
+  }
+
+  return (
+      <>
+        <Modal opened={props.editMode} title={'Update Task'} size={'lg'} onClose={() => props.setEditMode(false)} centered>
+          <Center>
+            <input
+              type="text"
+              placeholder="update your item "
+              value={update}
+              name="text"
+              className="todo-input edit"
+              onChange={handleChange}
+              style={{ color: props.colorScheme === "dark" ? "white" : "black"}}
+            />
+            <button className="todo-button edit" onClick={handleUpdate}>update</button>
+          </Center>
+        </Modal>
+        <form className="todo-form" onSubmit={handleSubmit}>
+          <div>
+            <input
+              type="text"
+              placeholder="Add a todo"
+              value={input}
+              name="text"
+              className="todo-input"
+              onChange={handleChange}
+              style={{ color: props.colorScheme === "dark" ? "white" : "black"}}
+            />
+            <button className="todo-button">Add todo</button>
+          </div>
+        </form>
+      </>
+  );
+}
+
+export default TodoForm;