`; kudosBoard.appendChild(card); }); // Add event listeners for like buttons document.querySelectorAll('.like-btn').forEach(btn => { btn.addEventListener('click', handleLike); }); } function renderValueOptions() { kudosValueSelect.innerHTML = companyValues.map(v => `${v.name}`).join(''); } function handleLike(event) { const button = event.currentTarget; const kudoId = parseInt(button.dataset.id); const kudo = kudosData.find(k => k.id === kudoId); if (kudo) { kudo.likes++; button.querySelector('.like-count').innerText = kudo.likes; button.classList.add('text-red-500'); // Show immediate feedback } } function toggleModal(show) { if (show) { modal.classList.add('active'); } else { modal.classList.remove('active'); } } // --- EVENT HANDLERS --- addKudosBtn.addEventListener('click', () => toggleModal(true)); cancelKudosBtn.addEventListener('click', () => toggleModal(false)); modal.addEventListener('click', (e) => { if (e.target === modal) toggleModal(false); }); kudosForm.addEventListener('submit', (e) => { e.preventDefault(); const newKudo = { id: kudosData.length > 0 ? Math.max(...kudosData.map(k => k.id)) + 1 : 1, recipient: document.getElementById('recipient-name').value.trim(), sender: document.getElementById('sender-name').value.trim(), valueId: document.getElementById('kudos-value').value, message: document.getElementById('kudos-message').value.trim(), likes: 0, date: new Date().toISOString().split('T')[0] // YYYY-MM-DD }; kudosData.push(newKudo); kudosForm.reset(); toggleModal(false); renderKudos(document.querySelector('.filter-btn.active').dataset.filter); }); // --- INITIALIZATION --- renderFilters(); renderKudos(); renderValueOptions(); });