Please add skills and team members in the configuration tab first.

`; return; } const skillHeaders = requiredSkills.map(skill => `${skill.name}`).join(''); const memberRows = teamMembers.map(member => { const skillCells = requiredSkills.map(skill => { const currentLevel = member.skills[skill.id] || 0; const targetLevel = skill.target; const gap = targetLevel - currentLevel; let cellClass = 'bg-green-100 text-green-800'; let cellText = '✓'; if (gap > 0) { cellClass = gap > 1 ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'; cellText = `Gap: ${gap}`; } return `${cellText}`; }).join(''); return `${member.name}${skillCells}`; }).join(''); analysisOutput.innerHTML = ` ${skillHeaders} ${memberRows}

Team Member

`; downloadPdfBtn.disabled = false; } // --- EVENT HANDLERS --- function handleAddSkill(e) { e.preventDefault(); const nameInput = document.getElementById('skill-name'); const name = nameInput.value.trim(); if (name && !requiredSkills.some(s => s.name.toLowerCase() === name.toLowerCase())) { requiredSkills.push({ id: Date.now(), name, target: 2 }); nameInput.value = ''; renderAll(); } } function handleDeleteSkill(e) { if (e.target.classList.contains('delete-skill-btn')) { const skillId = parseInt(e.target.dataset.id); requiredSkills = requiredSkills.filter(s => s.id !== skillId); renderAll(); } } function handleAddMember(e) { e.preventDefault(); const nameInput = document.getElementById('member-name'); const name = nameInput.value.trim(); if (name) { teamMembers.push({ id: Date.now(), name, skills: {} }); nameInput.value = ''; renderTeamSkills(); } } function handleDeleteMember(e) { if (e.target.classList.contains('delete-member-btn')) { const memberId = parseInt(e.target.dataset.id); teamMembers = teamMembers.filter(m => m.id !== memberId); renderTeamSkills(); } } function handleProficiencyChange(e) { if (e.target.classList.contains('proficiency-select')) { const select = e.target; const level = parseInt(select.value); select.className = `proficiency-select prof-${level} no-print`; if (select.dataset.type === 'skill-level') { const memberId = parseInt(select.dataset.memberId); const skillId = parseInt(select.dataset.skillId); const member = teamMembers.find(m => m.id === memberId); if (member) member.skills[skillId] = level; } else if (select.dataset.type === 'target-level') { const skillId = parseInt(select.dataset.skillId); const skill = requiredSkills.find(s => s.id === skillId); if (skill) skill.target = level; } } } function generatePdf() { const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content'); const pdfTitleEl = document.getElementById('pdf-title'); if (!pdfContent || downloadPdfBtn.disabled) return; pdfTitleEl.textContent = 'Team Skill Gap Analysis'; html2canvas(pdfContent, { scale: 2, useCORS: true, logging: false }) .then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const ratio = canvas.width / canvas.height; let imgWidth = pdfWidth - 20; let imgHeight = imgWidth / ratio; if (imgHeight > pdfHeight - 20) { imgHeight = pdfHeight - 20; imgWidth = imgHeight * ratio; } pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); pdf.save('Skill-Gap-Analysis.pdf'); pdfTitleEl.textContent = ''; }); } // --- EVENT LISTENERS --- function addEventListeners() { tabButtons.forEach(button => { button.addEventListener('click', () => { const tab = button.dataset.tab; tabButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tab)); tabContents.forEach(content => content.classList.toggle('active', content.id.startsWith(tab))); }); }); addSkillForm.addEventListener('submit', handleAddSkill); skillListBody.addEventListener('click', handleDeleteSkill); skillListBody.addEventListener('change', handleProficiencyChange); addMemberForm.addEventListener('submit', handleAddMember); teamSkillsContainer.addEventListener('click', handleDeleteMember); teamSkillsContainer.addEventListener('change', handleProficiencyChange); generateAnalysisBtn.addEventListener('click', renderAnalysis); downloadPdfBtn.addEventListener('click', generatePdf); } initialize(); });