Summary

EuJinnLucaShow · Nov 25, 2023 · 88cdc2d · 88cdc2d
1 parent b3a1a34
commit 88cdc2d
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 43 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -13,7 +13,7 @@ const App = () => {
         title: inputValue,
         completed: false,
       };
-      setTasks([...tasks, newTask]);
+      setTasks([newTask, ...tasks]);
       setInputValue('');
     }
   };

diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
@@ -2,15 +2,15 @@ import React from 'react';
 
 const TodoItem = ({ task, toggleTaskStatus, deleteTask }) => {
   return (
-    <div className="task">
+    <li className="task">
       <span
         style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
         onClick={() => toggleTaskStatus(task.id)}
       >
         {task.title}
       </span>
       <button onClick={() => deleteTask(task.id)}>Delete</button>
-    </div>
+    </li>
   );
 };
 

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -3,7 +3,7 @@ import TodoItem from './TodoItem';
 
 const TodoList = ({ tasks, toggleTaskStatus, deleteTask }) => {
   return (
-    <div className="tasks">
+    <ul className="tasks">
       {tasks.map(task => (
         <TodoItem
           key={task.id}
@@ -12,7 +12,7 @@ const TodoList = ({ tasks, toggleTaskStatus, deleteTask }) => {
           deleteTask={deleteTask}
         />
       ))}
-    </div>
+    </ul>
   );
 };
 

diff --git a/src/index.css b/src/index.css
@@ -17,3 +17,10 @@ code {
   flex-direction: column;
   align-items: center;
 }
+
+.tasks {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 20px;
+}