ARTICLE AD BOX
Hi I am a beginner to coding and I am trying to build The Odin Project To Do List . I have been stuck with this code for 2 days and this is my first time ever asking for help on a forum so please do tell me if I make any mistakes or if you don't understand my question. This code does use modules and the logic is separated from the display and it's hard to fit everything in so i've putt the relevant bits in . In my code I have a add project button which users can click to generate a form which they can fill in to create a new project . This new project is in a div and users can generate as many projects as they want , the div is called overview in my code , I want to click on each individual project (I have set an attribute called data Id for each project which is the same as the Id of the project) and a add task button will show which you can fill in to add tasks but the problem is that if i add 4 projects , each task added to the project will be duplicated 4 times and I know it's because of the for Each but every method i've tried to generate the code outside of the forEach or add it to another variable breaks my code.
Here is my gitHub for the code as well https://github.com/Oyin414/to_do_list
class ListItems { constructor(title,priority,dues,info,id){ this.title = title this.priority = priority this.due = format(new Date(),dues) this.info = info this.id = id } } class Project { constructor(title,id){ this.title = title this.id = id this.list = [] } addListItem(item){ this.list.push(item) console.log(this.list) } findListItem(id){ const result = this.list.filter(item => item.id === id) return result } removeListItem(item){ let newList = this.list.filter(value => value.id !== item.id) this.list = newList } } projectBtn.addEventListener("click",function() { event.preventDefault(); let projectName = document.getElementById("project").value let id = crypto.randomUUID() const newProject = new Project(projectName,id) makeProject(projectName,id) addProject(newProject) console.log(id) console.log(getProject()) project = getProject() let overview = document.querySelectorAll(".overview") overview.forEach(item=> item.addEventListener("click",function(){ document.querySelector('.hide').style.display = "block"; let dataId = item.getAttribute("data-id") result = findProject(dataId) changeProject(result.title) })) taskBtn.addEventListener("click",function (){ event.preventDefault(); let name = document.getElementById("task").value let priority = document.getElementById("priority").value let date = document.getElementById("date").value let taskId = crypto.randomUUID() let info = document.getElementById("info").value let task = new ListItems(name,priority,date,info,taskId) makeTask(name,date,taskId) }) })