dashboard

avatar
unknown
html
5 months ago
3.6 kB
2
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Goal-ito</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="fade-in">
    <div class="container">
        <header>
            <h1>Goal-ito</h1>
        </header>

        <section class="priority-goal" id="priorityGoalSection">
        </section>

        <div class="divider"></div>

        <section class="goals-list">
            <h2>Goals</h2>
            <div id="goalItemsContainer" class="goal-items-container">
            </div>
        </section>

        <section class="stats">
            <h2>Stats siguro</h2>
            <div class="stats-image">
                <img src="stats-illustration.png" alt="Stats Illustration">
            </div>
        </section>
    </div>

    <footer>
        <button id="addGoalBtn" class="add-button">+</button>
    </footer>

    <script>
        const goalItemsContainer = document.getElementById('goalItemsContainer');
        const priorityGoalSection = document.getElementById('priorityGoalSection');
        
        // Function to display goals from local storage
        function displayGoals() {
            let goals = JSON.parse(localStorage.getItem('goals')) || [];

            // Sort goals by priority (descending)
            goals.sort((a, b) => b.priority - a.priority);

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

            // Check if there is at least one goal
            if (goals.length > 0) {
                const highestPriorityGoal = goals[0]; // Highest priority goal is the first after sorting
                priorityGoalSection.innerHTML = `
                    <div class="goal-image">
                        <img src="image2.png" alt="Clock Illustration">
                    </div>
                    <div class="goal-info">
                        <h2>Priority Goal!</h2>
                        <h1>${highestPriorityGoal.name}</h1>
                        <p>Description: ${highestPriorityGoal.desc}</p>
                        <p class="deadline"><strong>Deadline:</strong> ${highestPriorityGoal.due}</p>
                    </div>
                `;
            }

            // Render the other goals
            goals.forEach(goal => {
                const goalItem = document.createElement('div');
                goalItem.classList.add('goal-item');
                goalItem.innerHTML = `
                    <h3>${goal.name}</h3>
                    <p>${goal.desc}</p>
                    <p><i class="time">${goal.due}</i></p>
                `;
                goalItemsContainer.appendChild(goalItem);
            });
        }

        // Load the goals when the dashboard page loads
        window.onload = () => {
            displayGoals();
        };

        // Redirect to the add goal page when + button is clicked
        const addGoalBtn = document.getElementById('addGoalBtn');
        addGoalBtn.addEventListener('click', function () {
            document.body.classList.add('fade-out');
            setTimeout(() => {
                window.location.href = 'addGoal.html';
            }, 700); 
        });
        
        // Ensure body fades in when the page loads
        window.addEventListener('load', function () {
            document.body.classList.add('fade-in');
        });
    </script>
</body>
</html>
Editor is loading...
Leave a Comment