addGoal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Goal - Goal-ito</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Goal-ito</h1>
        </header>

        <div id="addGoalForm">
            <h1>Add a new goal!</h1>
            <label for="goalName">What is your goal?</label>
            <input type="text" id="goalName" placeholder="Enter your goal">

            <label for="goalDesc">Describe your goal</label>
            <textarea id="goalDesc" placeholder="Goal description"></textarea>

            <label>How important is your goal?</label>
            <div class="priority-options">
                <button class="priority-btn" data-priority="5">Most Priority</button>
                <button class="priority-btn" data-priority="4">More Priority</button>
                <button class="priority-btn" data-priority="3">Priority</button>
                <button class="priority-btn" data-priority="2">Less Priority</button>
                <button class="priority-btn" data-priority="1">Least Priority</button>
            </div>

            <label for="goalDue">When is your goal due?</label>
            <input type="date" id="goalDue">

            <button id="saveGoalBtn">Save Goal</button>
        </div>

        <!-- Goals List Section -->
        <div id="goalsList">
            <h2>Your Goals</h2>
            <ul id="goalItemsContainer"></ul>
        </div>

        <!-- Back button to return to dashboard -->
        <button id="backBtn">Back to Dashboard</button>
    </div>

    <script>
        const saveGoalBtn = document.getElementById('saveGoalBtn');
        const priorityBtns = document.querySelectorAll('.priority-btn');
        const goalItemsContainer = document.getElementById('goalItemsContainer');
        const backBtn = document.getElementById('backBtn');

        let selectedPriority = 3; // Default priority

        // Handle priority selection
        priorityBtns.forEach(btn => {
            btn.addEventListener('click', (e) => {
                priorityBtns.forEach(button => button.classList.remove('selected'));
                e.target.classList.add('selected');
                selectedPriority = e.target.dataset.priority;
            });
        });

        // Function to save and display goals
        function displayGoals() {
            let goals = JSON.parse(localStorage.getItem('goals')) || [];
            
            // Sort the goals by priority (descending)
            goals.sort((a, b) => b.priority - a.priority);

            // Clear the current display
            goalItemsContainer.innerHTML = '';

            // Render the sorted goals
            goals.forEach((goal, index) => {
                const goalItem = document.createElement('li');
                goalItem.classList.add('goal-item');
                goalItem.innerHTML = `
                    <h3>${goal.name} (Priority: ${goal.priority})</h3>
                    <p>${goal.desc}</p>
                    <p>Due: ${goal.due}</p>
                    <button class="deleteGoalBtn" data-index="${index}">Mark as Done</button>
                `;
                goalItemsContainer.appendChild(goalItem);
            });

            // Add event listeners to delete buttons
            const deleteButtons = document.querySelectorAll('.deleteGoalBtn');
            deleteButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    const goalIndex = e.target.dataset.index;
                    deleteGoal(goalIndex);
                });
            });
        }

        // Handle saving a goal
        saveGoalBtn.addEventListener('click', () => {
            const goalName = document.getElementById('goalName').value;
            const goalDesc = document.getElementById('goalDesc').value;
            const goalDue = document.getElementById('goalDue').value;

            if (goalName && goalDesc && goalDue) {
                const newGoal = {
                    name: goalName,
                    desc: goalDesc,
                    due: goalDue,
                    priority: selectedPriority
                };

                // Store goal in local storage
                let goals = JSON.parse(localStorage.getItem('goals')) || [];
                goals.push(newGoal);
                localStorage.setItem('goals', JSON.stringify(goals));

                // Display the updated goals
                displayGoals();
            } else {
                alert("Please fill out all fields before saving.");
            }
        });

        // Function to delete a goal
        function deleteGoal(index) {
            let goals = JSON.parse(localStorage.getItem('goals')) || [];
            goals.splice(index, 1);
            localStorage.setItem('goals', JSON.stringify(goals));

            // Display the updated goals
            displayGoals();
        }

        // Display stored goals on page load
        window.onload = () => {
            displayGoals();
        };
        document.getElementById('backBtn').addEventListener('click', function () {
                document.body.classList.add('fade-out');
                setTimeout(() => {
                    window.location.href = 'dashboard.html';
                }, 700);
            });

            // Ensure body fades in when the page loads
            window.addEventListener('load', function () {
                document.body.classList.add('fade-in');
            });

        // Back button to redirect to the dashboard
        backBtn.addEventListener('click', () => {
            window.location.href = 'dashboard.html';
        });
    </script>
</body>
</html>
Editor is loading...