Add create, toggle and delete task

Author: eren-the-coder

src/App.css

@@ -0,0 +1,115 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e0e0e0 100%);
+}
+
+.container {
+  border: 1px solid #d1d5db;
+  border-radius: 1rem;
+  box-shadow: 0 4px 24px #b0b0b0;
+  padding: 1rem;
+  min-width: 500px;
+  background: #fff;
+}
+
+h1 {
+  margin-bottom: 1rem;
+  color: #222;
+  text-shadow: 0 1px 2px #e0e0e0;
+  position: relative;
+  width: max-content;
+}
+
+h1::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: -4px;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, #000, #fff);
+  border-radius: 2px;
+}
+
+.input-group {
+  display: flex;
+}
+.input-group input {
+  width: 100%;
+  line-height: 1.5rem;
+  border-radius: 1rem 0 0 1rem;
+  border: 1px solid #bdbdbd;
+  padding-left: .8rem;
+  box-shadow: 0 0 8px #e0e0e0;
+  background: #f5f5f5;
+  color: #222;
+}
+.input-group input:focus {
+  outline: none;
+  border-color: #888;
+  background: #fff;
+}
+
+.input-group button {
+  border-radius: 0 1rem 1rem 0;
+  border: none;
+  background: #222;
+  color: #fff;
+  padding: 5px 16px;
+  letter-spacing: -1px;
+  font-size: .9rem;
+  font-weight: bold;
+  box-shadow: 0 0 8px #e0e0e0;
+  transition: background 0.2s, color 0.2s;
+}
+
+.input-group button:hover {
+  background: #444;
+  cursor: pointer;
+}
+
+hr {
+  margin: 0.5rem 0;
+  box-shadow: 0 0 8px #e0e0e0;
+  border: none;
+  border-top: 1px solid #d1d5db;
+}
+
+li {
+  list-style-type: none;
+  background: #f8f9fa;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  color: #222;
+  box-shadow: 0 1px 4px #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
+li button {
+  border: none;
+  color: red;
+  padding: 4px;
+  cursor: pointer;
+}
+li button:hover {
+  border-radius: 4px;
+  background: rgba(192, 192, 192, 0.548);
+}

src/App.tsx

@@ -0,0 +1,84 @@
+import { useReducer, useState } from 'react'
+import './App.css'
+interface Task {
+  id?: number;
+  text: string;
+  done: boolean;
+}
+
+const initialState: Task[] = []
+
+const App = () => {
+  const [text, setText] = useState('');
+  const [todos, dispatch] = useReducer(reducer, initialState)
+
+  const handleAddTask = () => {
+    if (!text) return
+    dispatch({ type: 'ADD_TASK', value: text })
+    setText('');
+  }
+
+  return (
+    <div className='container'>
+      <h1>MyTodo</h1>
+
+      <div className="input-group">
+        <input
+          type="text" 
+          placeholder='Type your task here...'
+          value={text}
+          onChange={e => setText(e.target.value)}
+        />
+        <button onClick={handleAddTask}>Add</button>
+      </div>
+
+      <hr />
+
+      <ul>
+        {todos.map(task => (
+          <li key={task.id} >
+            <span
+              className={ task.done ? 'line-through' : '' }
+              onClick={() => {
+                if (task.id)
+                  dispatch({ type: 'TOGGLE_TASK', id: task.id })
+              }}
+            >{task.text}</span>
+            <button
+              onClick={e => {
+                e.stopPropagation();
+                if (task.id)
+                  dispatch({ type: 'DELETE_TASK', id: task.id })
+              }}
+            >&times;</button>
+          </li>
+        ))}
+      </ul>
+
+    </div>
+  )
+}
+
+export default App
+
+type Action = 
+  | { type: 'ADD_TASK', value: string }
+  | { type: 'DELETE_TASK', id: number }
+  | { type: 'TOGGLE_TASK', id: number }
+
+const reducer = (state: Task[], action: Action) => {
+  switch (action.type) {
+
+  case 'ADD_TASK':
+    return [...state, { id: Date.now(), text: action.value, done: false }]
+
+  case 'DELETE_TASK':
+    return state.filter(task => task.id !== action.id)
+
+  case 'TOGGLE_TASK':
+    return state.map(task => (task.id === action.id) ? { ...task, done: !task.done } : task)
+
+  default:
+    return state
+  }
+}

src/main.tsx

@@ -1,8 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <App />
   </StrictMode>,
 )