100 lines challenge

Back to all nuggets
javascript

Published on June 18, 2025

Code Snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CQI Progress Tracker</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
        @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .pulse { animation: pulse 2s infinite; }
        .slide-in { animation: slideIn 0.5s ease-out; }
        .progress-bar { transition: width 1s ease-in-out; }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen p-4">
    <div class="container mx-auto">
        <h1 class="text-3xl font-bold text-center mb-4">🎉 CQI Progress Tracker 🚀</h1>
        <div class="mb-4">
            <label for="status" class="text-sm font-medium">Filter by Status:</label>
            <select id="status" class="ml-2 p-2 bg-gray-800 rounded">
                <option value="">All</option>
                <option value="Not Started">Not Started</option>
                <option value="In Progress">In Progress</option>
                <option value="Completed">Completed</option>
                <option value="On Hold">On Hold</option>
                <option value="Cancelled">Cancelled</option>
            </select>
        </div>
        <div id="projects" class="space-y-4"></div>
    </div>
    <script>
        async function fetchProjects(status = '') {
            try {
                const response = await fetch(`/api/cqi-projects${status ? `?status=${encodeURIComponent(status)}` : ''}`, {
                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                });
                if (!response.ok) throw new Error('Failed to fetch projects');
                return await response.json();
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('projects').innerHTML = '<p class="text-red-400">Error loading projects! 😢</p>';
                return [];
            }
        }

        function renderProjects(projects) {
            const container = document.getElementById('projects');
            container.innerHTML = projects.length ? '' : '<p class="text-gray-400">No projects found. 😕</p>';
            projects.forEach((project, index) => {
                const progress = project.initial_progress;
                const barColor = progress === 100 ? 'bg-green-500' : progress >= 50 ? 'bg-blue-500' : 'bg-red-500';
                const delay = index * 0.1;
                container.innerHTML += `
                    <div class="slide-in bg-gray-800 p-4 rounded-lg" style="animation-delay: ${delay}s">
                        <h3 class="font-bold">${project.project_name}</h3>
                        <p class="text-sm text-gray-400">Status: ${project.status}</p>
                        <div class="w-full bg-gray-700 rounded-full h-4 mt-2">
                            <div class="progress-bar ${barColor} h-4 rounded-full" style="width: ${progress}%"></div>
                        </div>
                        <p class="text-sm mt-1">${progress}% Complete</p>
                    </div>
                `;
            });
        }

        async function init() {
            const statusSelect = document.getElementById('status');
            statusSelect.addEventListener('change', async () => {
                const projects = await fetchProjects(statusSelect.value);
                renderProjects(projects);
            });
            const projects = await fetchProjects();
            renderProjects(projects);
        }

        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Premium Content Locked

Subscribe to unlock the full article, detailed explanations, and downloadable resources.

Subscribe to Read Full

Love this nugget?

Support our work to get exclusive premium nuggets and early access via a personal activation link.

Support Now & Unlock Exclusive Content