Back to all nuggets
javascript
Published on June 18, 2025
Write a 100 lines of code a day. JavaScript is simple, well, not that simple. But it can be if you write 100 lines a day.
Full 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>Love this nugget?
Support my work to get exclusive premium nuggets and early access via a personal activation link.
Support Now & Unlock Exclusive Content