I am trying to make a to-do list, I need separate pages one for tasks and one for projects, I have an array that should get filled in once I input a form, but the array gets filled with multiple items after, I have found that every time I click either one of the page buttons, its creating a new array and then the add item button logs all of them, so I am assuming it has to do with how my pages are being loaded or how the code is being ran
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do It</title>
</head>
<body>
<main>
<div id="side-menu">
<button id="newBtn">+ New Item</button>
<form id="formElement" style="display: none;">
<li>
<input type="text" name="title" id="title" placeholder="Task Name">
</li>
<li>
<input type="text" name="desc" id="desc" placeholder="Description">
</li>
<div id="button-options">
<li>
<select name="priority" id="priority">
<option value="priority" selected>Priority</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</li>
<li>
<input type="date" name="dueDate" id="dueDate">
</li>
</div>
<button id="addBtn" type="submit">Add Item</button>
<button id="cancelBtn" type="reset">Cancel</button>
</form>
<button class="nav-button" id="todayBtn">Home</button>
<button class="nav-button" id="projectBtn">My Projects</button>
</div>
<div id="displayWrapper">
<ul id="listDisplay" style="display: none;">
</ul>
<ul id="projectDisplay" style="display: none;">
</ul>
</div>
</main>
</body>
</html>
index.js
import './styles.css';
import { loadHomePage } from './homePage';
import { loadProjectPage } from './projectPage';
let myList = [];
let projectList = [];
document.addEventListener("DOMContentLoaded", () => {
handlePageChange(loadHomePage, "todayBtn");
document.getElementById("todayBtn").addEventListener("click", () => {
handlePageChange(loadHomePage, "todayBtn");
});
document.getElementById("projectBtn").addEventListener("click", () => {
handlePageChange(loadProjectPage, "projectBtn");
});
});
function handlePageChange(loadPageFunction, activeButtonId) {
document.getElementById("listDisplay").style.display = 'none';
document.getElementById("projectDisplay").style.display = 'none';
loadPageFunction();
const buttons = document.querySelectorAll(".nav-button");
buttons.forEach(button => button.classList.remove("selectedMenu"));
document.getElementById(activeButtonId).classList.add("selectedMenu");
}
export { myList, projectList };
homePage.js
export function loadHomePage() {
const listDiv = document.getElementById("listDisplay");
listDiv.style.display = 'block';
listDiv.innerHTML = `<p>Home Page</p>`;
let myList = [];
function listItem(title, description, dueDate, priority) {
this.title = title;
this.description = description;
this.dueDate = dueDate;
this.priority = priority;
}
function listLogic() {
function displayItem() {
listDiv.innerHTML = '';
myList.forEach(function(item, index) {
let itemContainer = document.createElement("div");
itemContainer.classList.add("item-container");
let titleElement = document.createElement("p");
titleElement.textContent = `Title: ${item.title}`;
itemContainer.appendChild(titleElement);
let descElement = document.createElement("p");
descElement.textContent = `Description: ${item.description}`;
itemContainer.appendChild(descElement);
let dueDateElement = document.createElement("p");
dueDateElement.textContent = `Due Date: ${item.dueDate}`;
itemContainer.appendChild(dueDateElement);
let priorityElement = document.createElement("p");
priorityElement.textContent = `Priority: ${item.priority}`;
itemContainer.appendChild(priorityElement);
let deleteButton = document.createElement("button");
deleteButton.classList.add("deleteBtn");
deleteButton.textContent = "Delete Task";
itemContainer.appendChild(deleteButton);
deleteButton.addEventListener("click", function() {
myList.splice(index, 1);
displayItem();
});
listDiv.appendChild(itemContainer);
});
}
function setupFormListener() {
const formElement = document.getElementById("formElement");
formElement.removeEventListener("submit", formSubmitHandler);
function formSubmitHandler(e) {
e.preventDefault();
let title = document.getElementById("title").value;
let desc = document.getElementById("desc").value;
let priority = document.getElementById("priority").value;
let dueDate = document.getElementById("dueDate").value;
const newListItem = new listItem(title, desc, dueDate, priority);
myList.push(newListItem);
console.log(myList);
displayItem();
document.getElementById('formElement').style.display = 'none';
}
formElement.addEventListener("submit", formSubmitHandler);
}
setupFormListener();
return { displayItem };
}
function buttonLogic() {
function newBtn() {
const newButton = document.getElementById("newBtn");
newButton.removeEventListener('click', showForm);
newButton.addEventListener('click', showForm);
}
function showForm() {
document.getElementById('formElement').style.display = 'block';
}
function cancelBtn() {
const cancelButton = document.getElementById('cancelBtn');
cancelButton.removeEventListener('click', hideForm);
cancelButton.addEventListener('click', hideForm);
}
function hideForm() {
document.getElementById('formElement').style.display = 'none';
}
return { newBtn, cancelBtn };
}
const buttonControls = buttonLogic();
const listControls = listLogic();
buttonControls.newBtn();
buttonControls.cancelBtn();
listControls.displayItem();
}
projectPage.js
export function loadProjectPage() {
const projectDiv = document.getElementById("projectDisplay");
projectDiv.style.display = 'block';
projectDiv.innerHTML = `<p>Project Page</p>`;
let projectDisplay = [];
function projectList(title, description, dueDate, priority) {
this.title = title;
this.description = description;
this.dueDate = dueDate;
this.priority = priority;
}
function listLogic() {
function displayItem() {
projectDiv.innerHTML = '';
projectDisplay.forEach(function(item, index) {
let itemContainer = document.createElement("div");
itemContainer.classList.add("item-container");
let titleElement = document.createElement("p");
titleElement.textContent = `Title: ${item.title}`;
itemContainer.appendChild(titleElement);
let descElement = document.createElement("p");
descElement.textContent = `Description: ${item.description}`;
itemContainer.appendChild(descElement);
let dueDateElement = document.createElement("p");
dueDateElement.textContent = `Due Date: ${item.dueDate}`;
itemContainer.appendChild(dueDateElement);
let priorityElement = document.createElement("p");
priorityElement.textContent = `Priority: ${item.priority}`;
itemContainer.appendChild(priorityElement);
let deleteButton = document.createElement("button");
deleteButton.classList.add("deleteBtn");
deleteButton.textContent = "Delete Task";
itemContainer.appendChild(deleteButton);
deleteButton.addEventListener("click", function() {
projectDisplay.splice(index, 1);
displayItem();
});
projectDiv.appendChild(itemContainer);
});
}
function setupFormListener() {
const formElement = document.getElementById("formElement");
formElement.removeEventListener("submit", formSubmitHandler);
function formSubmitHandler(e) {
e.preventDefault();
let title = document.getElementById("title").value;
let desc = document.getElementById("desc").value;
let priority = document.getElementById("priority").value;
let dueDate = document.getElementById("dueDate").value;
const newprojectList = new projectList(title, desc, dueDate, priority);
projectDisplay.push(newprojectList);
console.log(projectDisplay);
displayItem();
document.getElementById('formElement').style.display = 'none';
}
formElement.addEventListener("submit", formSubmitHandler);
}
setupFormListener();
return { displayItem };
}
function buttonLogic() {
function newBtn() {
const newButton = document.getElementById("newBtn");
newButton.removeEventListener('click', showForm);
newButton.addEventListener('click', showForm);
}
function showForm() {
document.getElementById('formElement').style.display = 'block';
}
function cancelBtn() {
const cancelButton = document.getElementById('cancelBtn');
cancelButton.removeEventListener('click', hideForm);
cancelButton.addEventListener('click', hideForm);
}
function hideForm() {
document.getElementById('formElement').style.display = 'none';
}
return { newBtn, cancelBtn };
}
const buttonControls = buttonLogic();
const listControls = listLogic();
buttonControls.newBtn();
buttonControls.cancelBtn();
listControls.displayItem();
}
I can’t really figure out whats happening