ibm-developer-skills-network · ddreader · Mar 21, 2025 · Mar 21, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+node_modules
diff --git a/dist/assets/index-C_KS19bJ.css b/dist/assets/index-C_KS19bJ.css
diff --git a/dist/assets/index-CaW-2liG.js b/dist/assets/index-CaW-2liG.js
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <script type="module" crossorigin src="/assets/index-CaW-2liG.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C_KS19bJ.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,6 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.2.0"
+    "vite": "^6.2.2"
   }
 }
diff --git a/src/Components/TodoList.jsx b/src/Components/TodoList.jsx
@@ -2,7 +2,42 @@ import React, { useState } from 'react';
 import './TodoList.css';
 
 const TodoList = () => {
-
+  const [todos, setTodos] = useState([]);
+  const [headingInput, setHeadingInput] = useState('');
+  const [listInputs, setListInputs] = useState({});
+
+  const handleAddTodo = () => {
+    if (headingInput.trim() !== '') {
+      setTodos([...todos, { heading: headingInput, lists: [] }]);
+      setHeadingInput('');
+    }
+  };
+
+  const handleDeleteTodo = (index) => {
+    const newTodos = [...todos];
+    newTodos.splice(index, 1);
+    setTodos(newTodos);
+  };
+
+  const handleAddList = (index) => {
+    if (listInputs[index] && listInputs[index].trim() !== '') {
+      const newTodos = [...todos];
+      newTodos[index].lists.push(listInputs[index]);
+      setTodos(newTodos);
+      setListInputs({ ...listInputs, [index]: '' });
+    }
+  };
+
+  const handleListInputChange = (index, value) => {
+    setListInputs({ ...listInputs, [index]: value });
+  };
+
+  const handleKeyDown = (e) => {
+    console.log(e.key);
+    if (e.key === 'Enter') {
+      handleAddList();
+    }
+  }
 
   return (
     <>
@@ -13,13 +48,43 @@ const TodoList = () => {
             type="text"
             className="heading-input"
             placeholder="Enter heading"
-
+            value={headingInput}
+            // Add onChange event handler to update headingInput state, e: event
+            onChange={(e) => { setHeadingInput(e.target.value); }}
           />
-          <button className="add-list-button">Add Heading</button>
+          <button className="add-list-button" onClick={handleAddTodo}>Add Heading</button>
         </div>
       </div>
       <div className="todo_main">
-
+        {todos.map((todo, index) => (
+          <div key={index} className='todo-card'>
+            <div className='heading_todo'>
+              <h3>{todo.heading}</h3> {/* Display the heading here */}
+              <button className='delete-button-heading' onClick={() => handleDeleteTodo(index)}>Delete Heading</button>
+            </div>
+
+            <ul>
+              {todo.lists.map((list, listIndex) => (
+                <li key={listIndex} className='todo_inside_list'>
+                  <p>{list}</p>
+                </li>
+              ))}
+            </ul>
+
+            <div className='add_list'>
+              <input
+                type="text"
+                className="list-input"
+                placeholder="Enter list item"
+                value={listInputs[index] || ''}
+                onChange={(e) => handleListInputChange(index, e.target.value)}
+                onKeyDown={handleKeyDown}
+              />
+              <button className="add-list-button" onClick={() => handleAddList(index)}>Add List</button>
+
+            </div>
+          </div>
+        ))}
       </div>
     </>
   );