├── src ├── App.css ├── assets │ ├── deleteicon.png │ ├── tickicon1.png │ └── todofavicon.png ├── App.jsx ├── main.jsx ├── todolist │ ├── AddTodo.jsx │ ├── TodoItem.jsx │ ├── TodoList.jsx │ └── Todo.css └── index.css ├── vite.config.js ├── index.html └── package.json /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /src/assets/deleteicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibrahim1553/assignment-6-react.js-calaculator/HEAD/src/assets/deleteicon.png -------------------------------------------------------------------------------- /src/assets/tickicon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibrahim1553/assignment-6-react.js-calaculator/HEAD/src/assets/tickicon1.png -------------------------------------------------------------------------------- /src/assets/todofavicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibrahim1553/assignment-6-react.js-calaculator/HEAD/src/assets/todofavicon.png -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css" 2 | import { TodoList } from "./todolist/TodoList" 3 | 4 | function App() { 5 | return 6 | } 7 | 8 | export default App -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ReactDOM from "react-dom/client" 3 | import App from "./App.jsx" 4 | import "./index.css" 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | 10 | ) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To-Do App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.0.37", 18 | "@types/react-dom": "^18.0.11", 19 | "@vitejs/plugin-react": "^4.0.0", 20 | "eslint": "^8.38.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.3.4", 24 | "vite": "^4.3.9" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/todolist/AddTodo.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import { useState } from "react" 3 | import "./todo.css" 4 | 5 | export const AddTodo = ({ addTodo }) => { 6 | const [newTask, setNewTask] = useState("") 7 | 8 | const onChange = (e) => { 9 | setNewTask(e.target.value) 10 | } 11 | 12 | return ( 13 |
14 | 21 | 30 |
31 | ) 32 | } -------------------------------------------------------------------------------- /src/todolist/TodoItem.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import { useState } from "react" 3 | import DeleteIcon from "../assets/deleteicon.png" 4 | import Tickicon from "../assets/tickicon1.png" 5 | import "./todo.css" 6 | 7 | export const TodoItem = ({ title, deleteTodo }) => { 8 | 9 | const [color,setcolor] = useState("white") 10 | 11 | function changeColor() { 12 | if (color==="white") { 13 | setcolor("#024b88") 14 | } 15 | else{ 16 | setcolor("white") 17 | } 18 | } 19 | 20 | return ( 21 |
22 | 23 |

{title}

24 | 25 | 26 |
27 | ) 28 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | } 6 | 7 | body { 8 | background-color: #352088; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | } 15 | 16 | h1 { 17 | font-size: 3.2em; 18 | line-height: 1.1; 19 | } 20 | 21 | button { 22 | border-radius: 15px; 23 | border: 1px solid transparent; 24 | padding: 8px; 25 | font-size: 4rem; 26 | font-weight: 600; 27 | font-family: inherit; 28 | background-color: #1a1a1a; 29 | cursor: pointer; 30 | color: white; 31 | transition: border-color 0.25s; 32 | } 33 | 34 | button:hover { 35 | border-color: #ffffff; 36 | } 37 | 38 | button:focus, 39 | button:focus-visible { 40 | outline: 1px auto -webkit-focus-ring-color; 41 | } 42 | 43 | @media (prefers-color-scheme: light) { 44 | :root { 45 | color: #075439; 46 | background-color: #ffffff; 47 | } 48 | 49 | a:hover { 50 | color: #ffffff; 51 | } 52 | 53 | button { 54 | background-color: #f9f9f9; 55 | } 56 | } -------------------------------------------------------------------------------- /src/todolist/TodoList.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import "./todo.css" 3 | import { TodoItem } from "./TodoItem" 4 | import { AddTodo } from "./AddTodo" 5 | 6 | export const TodoList = () => { 7 | const [items, setItems] = useState([ 8 | { 9 | id: 1, 10 | title: "Wake up 7:00 am" 11 | }, 12 | { 13 | id: 2, 14 | title: "Going to gym " 15 | }, 16 | { 17 | id: 3, 18 | title: "do breakfast" 19 | }, 20 | { 21 | id: 4, 22 | title: "go to office" 23 | } 24 | ]) 25 | 26 | 27 | 28 | 29 | const deleteTodo = (id) => { 30 | const toBeDeletedIndex = items.findIndex((item) => item.id === id) 31 | items.splice(toBeDeletedIndex, 1) 32 | setItems([...items]) 33 | } 34 | 35 | const addTask = (title) => { 36 | if (!title) { 37 | return 38 | } 39 | const newTask = { id: items.length + 1, title } 40 | const newItems = [...items, newTask] 41 | setItems(newItems) 42 | } 43 | 44 | 45 | 46 | 47 | return ( 48 |
49 |
50 |

To-Do App

51 |
52 |
53 | {items.map((item) => ( 54 | { 58 | deleteTodo(item.id) 59 | }} 60 | /> 61 | ))} 62 |
63 | 64 | {/* */} 67 |
68 | ) 69 | } -------------------------------------------------------------------------------- /src/todolist/Todo.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | background-color: #0f1112; 3 | height: 60px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | padding: 0 20px; 8 | width: 395px; 9 | border: 3px solid transparent; 10 | border-radius: 50px; 11 | color: white; 12 | font-size: 18px; 13 | cursor: pointer; 14 | } 15 | 16 | .todo-icon{ 17 | width: 25px; 18 | height: 25px; 19 | cursor: pointer; 20 | } 21 | 22 | .todo-list { 23 | width: 440px; 24 | margin-top: 20px; 25 | background-color: white; 26 | border-radius: 10px; 27 | 28 | } 29 | 30 | .todo-item { 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | padding: 0 20px; 35 | height: 40px; 36 | font-size: 18px; 37 | font-weight: 600; 38 | 39 | } 40 | 41 | .todo-add-btn { 42 | background-color: #911818; 43 | color: white; 44 | padding: 10px 20px; 45 | margin-top: 12px; 46 | font-size: 16px; 47 | } 48 | 49 | .input-field { 50 | width: 390px; 51 | height: 40px; 52 | outline: none; 53 | padding: 0 20px; 54 | font-size: 16px; 55 | border-radius: 12px; 56 | border: 5px solid; 57 | 58 | } 59 | 60 | .add-todo { 61 | margin-top: 12px; 62 | display: flex; 63 | justify-content: space-between; 64 | flex-direction: column; 65 | align-items: center; 66 | } 67 | 68 | .tick-icon{ 69 | width: 25px; 70 | height: 25px; 71 | cursor: pointer; 72 | border-radius: 12px; 73 | } 74 | 75 | .input-field:hover { 76 | border-color: #090909; 77 | } 78 | 79 | .bar:hover { 80 | border-color: white; 81 | } --------------------------------------------------------------------------------