Update 20 files

README.md

@@ -1,2 +1,38 @@
-# TodoList
-Created with CodeSandbox
+<div align="center">
+
+#  Your First Application 🤟
+## Walcome to Webdev 😊
+
+<div>
+
+<div align="center">
+
+<div align="left">
+
+
+---
+
+### How to install
+
+1. Click on green **Clone or download** button and choose Download ZIP.
+2. Find the downloaded zipped file on your pc and extract it.
+3. Then install nodejs in your local system
+4. Open Roont Directory,
+5. Rum commend.
+> ```npm run start```
+Once you are done  you can close the application in your terminal to quit the application.
+
+---
+
+</div>
+
+### Todo List
+
+![Todo List perview](public/images/perview.gif "Todo List")
+
+</div>
+
+> If you have any issues with that Application feel free to let me know!
+
+> If you are more interested, check out the collection of [ **CLIsapplications**](https://github.com/DSDmark/CLIsapplications"CLIsapplications").
+---

package.json

@@ -1,37 +1,40 @@
 {
-  "name": "todolist",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "main": "src/index.tsx",
-  "dependencies": {
-    "@typescript-eslint/eslint-plugin": "5.36.1",
-    "@typescript-eslint/parser": "5.36.1",
-    "eslint": "8.23.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-scripts": "4.0.3",
-    "uuidv4": "6.2.13"
-  },
-  "devDependencies": {
-    "@types/react": "17.0.20",
-    "@types/react-dom": "17.0.9",
-    "typescript": "4.4.2"
-  },
-  "scripts": {
-    "start": "craco start",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
+    "name": "todolist",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "main": "src/index.tsx",
+    "license": "MIT",
+    "dependencies": {
+        "@craco/craco": "^6.4.5",
+        "react": "18.0.0",
+        "react-dom": "18.0.0",
+        "react-scripts": "4.0.3",
+        "uuidv4": "6.2.13"
+    },
+    "devDependencies": {
+        "@types/react": "17.0.20",
+        "@types/react-dom": "^17.0.9",
+        "@typescript-eslint/eslint-plugin": "^5.36.1",
+        "@typescript-eslint/parser": "^5.36.1",
+        "eslint": "^8.23.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.31.5",
+        "prettier": "^2.7.1",
+        "typescript": "4.4.2"
+    },
+    "scripts": {
+        "start": "yarn start",
+        "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
+        "build": "craco build",
+        "test": "craco test",
+        "eject": "react-scripts eject"
+    },
+    "browserslist": [
+        ">0.2%",
+        "not dead",
+        "not ie <= 11",
+        "not op_mini all"
+    ]
+}

src/App.tsx

@@ -1,18 +1,18 @@
-import { FC } from "react";
-import { TodoItemsList, AddTodo, Heading } from "./Components";
-import { TodoContext } from "./Context";
-import "./style.css";
+import React, { FC } from 'react';
+import { TodoItemsList, AddTodo, Heading } from './Components';
+import { TodoContext } from './Context';
+import './style.css';
 
 export const App: FC = () => {
-  return (
-    <>
-      <TodoContext>
-        <pre>
-          <Heading />
-          <AddTodo />
-          <TodoItemsList />
-        </pre>
-      </TodoContext>
-    </>
-  );
+    return (
+        <>
+            <TodoContext>
+                <pre>
+                    <Heading />
+                    <AddTodo />
+                    <TodoItemsList />
+                </pre>
+            </TodoContext>
+        </>
+    );
 };

src/Components/AddTodolist/AddListElements.tsx

@@ -1,20 +1,20 @@
-import { Todo } from "../index";
+import { Todo } from '../index';
 
 const AddListElements: (
-  e: any,
-  inputState: string,
-  setInputState: Function,
-  setState: Function
+    e: any,
+    inputState: string,
+    setInputState: React.Dispatch<React.SetStateAction<string>>,
+    setState: React.Dispatch<React.SetStateAction<any>>,
 ) => void = (e, inputState, setInputState, setState) => {
-  e.preventDefault();
-  const newAddTodo = {
-    id: new Date().getTime(),
-    text: inputState,
-    isTodoDone: false
-  };
+    e.preventDefault();
+    const newAddTodo = {
+        id: new Date().getTime(),
+        text: inputState,
+        isTodoDone: false,
+    };
 
-  setState((perv: Todo[]) => [...perv, newAddTodo]);
-  setInputState("");
+    setState((perv: Todo[]) => [...perv, newAddTodo]);
+    setInputState('');
 };
 
 export default AddListElements;

src/Components/AddTodolist/AddTodo.tsx

@@ -1,33 +1,27 @@
-import React, { useState, FC } from "react";
-import AddListElements from "./AddListElements";
-import { todoContext } from "../../Context";
-import { useContext } from "react";
+import React, { useState, FC } from 'react';
+import AddListElements from './AddListElements';
+import { todoContext } from '../../Context';
+import { useContext } from 'react';
 
 const AddTodo: FC = () => {
-  const [, setState] = useContext<any>(todoContext);
+    const [, setState] = useContext<any>(todoContext);
 
-  const [inputState, setInputState] = useState<string>("");
-  return (
-    <>
-      <div>
-        <label htmlFor="addTodo">
-          <input
-            type="text"
-            id="addTodo"
-            onChange={(e) => setInputState(e.target.value)}
-            value={inputState}
-          />
-          <button
-            onClick={(e) =>
-              AddListElements(e, inputState, setInputState, setState)
-            }
-          >
-            AddTodo
-          </button>
-        </label>
-      </div>
-    </>
-  );
+    const [inputState, setInputState] = useState<string>('');
+    return (
+        <>
+            <div>
+                <label htmlFor="addTodo">
+                    <input
+                        type="text"
+                        id="addTodo"
+                        onChange={(e) => setInputState(e.target.value)}
+                        value={inputState}
+                    />
+                    <button onClick={(e) => AddListElements(e, inputState, setInputState, setState)}>AddTodo</button>
+                </label>
+            </div>
+        </>
+    );
 };
 
 export default AddTodo;

src/Components/AddTodolist/index.ts

@@ -1 +1 @@
-export { default as AddTodo } from "./AddTodo";
+export { default as AddTodo } from './AddTodo';

src/Components/DeleteTodolist/DeleteTodo.tsx

@@ -1,7 +1,7 @@
-import { Todo } from "../index";
+import { Todo } from '../index';
 
-const DeleteTodo = (id: string, setState: Function) => {
-  setState((perv: Todo[]) => perv.filter((e: Todo) => e.id !== id));
+const DeleteTodo = (id: string, setState: React.Dispatch<React.SetStateAction<Todo>>) => {
+    setState((perv: Todo) => perv.filter((e: Todo) => e.id !== id));
 };
 
 export default DeleteTodo;

src/Components/DeleteTodolist/DeleteTodolist.tsx

@@ -1,23 +1,23 @@
-import React, { useContext, FC } from "react";
-import { todoContext } from "../../Context";
-import DeleteTodo from "./DeleteTodo";
+import React, { useContext, FC } from 'react';
+import { todoContext } from '../../Context';
+import DeleteTodo from './DeleteTodo';
 
 interface Props {
-  id: string;
+    id: string;
 }
 
 const DeleteTodolist: FC<Props> = ({ id }) => {
-  const [, setState] = useContext(todoContext);
-  return (
-    <span
-      role="img"
-      aria-label="edit todo list"
-      style={{ fontSize: "1.5rem" }}
-      onClick={() => DeleteTodo(id, setState)}
-    >
-      🔴
-    </span>
-  );
+    const [, setState] = useContext(todoContext);
+    return (
+        <span
+            role="img"
+            aria-label="edit todo list"
+            style={{ fontSize: '1.5rem' }}
+            onClick={() => DeleteTodo(id, setState)}
+        >
+            🔴
+        </span>
+    );
 };
 
 export default DeleteTodolist;

src/Components/DeleteTodolist/index.tsx

@@ -1 +1 @@
-export { default as DeleteTodolist } from "./DeleteTodolist";
+export { default as DeleteTodolist } from './DeleteTodolist';

src/Components/Heading/MainHeading.tsx

@@ -1,20 +1,22 @@
+import React from 'react';
+
 const Heading = () => (
-  <>
-    <div style={{ textAlign: "center" }}>
-      <h1>
-        Your First Application&nbsp;
-        <span role="img" aria-label="simple emoji">
-          🧞
-        </span>
-      </h1>
-      <h2>
-        Walcome to Webdev{" "}
-        <span role="img" aria-label="simple emoji">
-          😊
-        </span>
-      </h2>
-    </div>
-  </>
+    <>
+        <div style={{ textAlign: 'center' }}>
+            <h1>
+                Your First Application&nbsp;
+                <span role="img" aria-label="simple emoji">
+                    🧞
+                </span>
+            </h1>
+            <h2>
+                Walcome to Webdev{' '}
+                <span role="img" aria-label="simple emoji">
+                    😊
+                </span>
+            </h2>
+        </div>
+    </>
 );
 
 export default Heading;

src/Components/Heading/index.tsx

@@ -1 +1 @@
-export { default as Heading } from "./MainHeading";
+export { default as Heading } from './MainHeading';