Thiết kế website giá rẻ

Question

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

Thiết kế website giá rẻ

Danh mục

fixing array from being created until button is pressed