I’m currently working on a To-do-list from the odin project. As per the instructions, my todolist can create a new project, which we can then add tasks to the project. I now have a sidebar listing all existing projects, and when I click on any of the projects, it renders the details of the project onto the main body. I’ve attached screenshots of the page
before I click on a project
after I click on a project
I’m currently having trouble trying to add new tasks to the project that’s active on the main body as I can’t get its index.
In my addTaskModal.js module, I’ve created a dialog popup for users to input the details of the tasks to be added to the active project.
But I’ve been stuck for hours and I can’t figure out how to get the index of the project that’s rendered on the main page.
Here’s my code that renders the project to the body:
import {
addTaskModal
} from './addTaskModal.js';
import {
myProjects
} from './myProjects.js';
const mainContent = document.querySelector('#main');
export default function renderMain(event) { //render project from sidebar to mainContent body
mainContent.textContent = '';
mainContent.appendChild(addTaskModal); //dialog to input new task and its priority
let index = parseInt(event.target.id.split('-')[1]);
const projectCard = document.createElement('div');
projectCard.classList.add('card');
const projectCardHeader = document.createElement('h3');
projectCardHeader.classList.add('cardheader');
projectCardHeader.textContent = myProjects[index].name
projectCard.appendChild(projectCardHeader);
const projectDue = document.createElement('div');
projectDue.textContent = myProjects[index].due;
projectDue.classList.add('date');
projectCard.appendChild(projectDue);
for (let i = 0; i < myProjects[index].tasks?.length; i++) {
const tasks = document.createElement('div');
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete Task';
deleteBtn.addEventListener('click', () => {
myProjects[index].tasks.splice(i, 1);
localStorage.setItem('projects', JSON.stringify(myProjects));
renderMain(event);
})
//when we want to update after delete, just store with same "key" and the "key" will be updated.
tasks.textContent = myProjects[index].tasks[i].name;
tasks.classList.add('tasks');
tasks.appendChild(deleteBtn);
projectCard.appendChild(tasks);
}
const addTaskBtn = document.createElement('button');
addTaskBtn.textContent = "Add Task";
mainContent.appendChild(addTaskBtn);
addTaskBtn.addEventListener('click', () => {
addTaskModal.showModal();
});
mainContent.appendChild(addTaskBtn);
mainContent.appendChild(projectCard)
}
Here’s the code for myProjects array for context:
let myProjects = JSON.parse(localStorage.getItem('projects')) || [{
name: "Go to supermarket",
due: "12/2/25",
tasks: [{
name: "Buy apples",
priority: "high"
},
{
name: "Buy Eggs",
priority: "medium"
}
]
},
{
name: "Clean the house",
due: "13/2/25",
tasks: [{
name: "Sweep and mop the floor",
priority: "high"
},
{
name: "Do laundry",
priority: "high"
}
]
}
];
export {
myProjects
};