Currently, I am engaged in a small project that involves experimenting with DOM manipulation. The project revolves around creating a Todo list where users can generate various categories (such as work, gym, finances, etc.) and then add corresponding subtasks under each category. For instance, clicking on 'work' should display subtask1, subtask2, and so forth, while selecting 'gym' should reveal the relevant gym-related subtasks.
However, I have encountered an issue wherein I am unable to show the subtasks separately each time a main task is clicked. The majority of the functionality has been implemented using Javascript.
let index = 1;
// Remaining Javascript code omitted for brevity
The complete JavaScript code snippet is provided above.
Below is a skeleton of the HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="\todo-list\dist\style.css" />
<title>Document</title>
</head>
<body>
<div id="content">
// Rest of the HTML structure provided for context
</div>
<script src="main.js"></script>
</body>
</html>
Despite progress made, there seems to be an issue when clicking on a primary task, as all subtasks are displayed simultaneously. How can I modify the code to function as intended?
Please note that NPM is being utilized for this project. I have considered segregating separate arrays for individual elements and displaying them upon clicking, although I am uncertain if this aligns with proper DOM management principles.