No matching careers found. Try selecting different skills or adding more career data in the Configuration tab.
`;
return;
}
recommendations.forEach(rec => {
const card = document.createElement('div');
card.className = 'career-card';
const requiredSkills = rec.requiredSkills.map(id => state.skills.find(s => s.id === id)?.name || '').filter(Boolean);
card.innerHTML = `
${rec.title}
${formatCurrency(rec.salary)} / year
Key Skills:
${requiredSkills.map(skill => `${skill}`).join('')}
`;
elements.advisor.careerResults.appendChild(card);
});
};
// --- CORE LOGIC ---
const handleFindCareer = () => {
if (state.selectedSkillIds.size === 0) {
alert("Please select at least one skill.");
return;
}
const recommendations = state.careers.map(career => {
const matchedSkills = career.requiredSkills.filter(skillId => state.selectedSkillIds.has(skillId));
const matchScore = (matchedSkills.length / career.requiredSkills.length) * 100;
return { ...career, matchScore };
}).filter(c => c.matchScore > 0)
.sort((a, b) => b.matchScore - a.matchScore);
renderRecommendations(recommendations);
};
// --- EVENT HANDLERS ---
elements.advisor.skillSelector.addEventListener('click', (e) => {
if (e.target.classList.contains('skill-tag')) {
const id = parseInt(e.target.dataset.id);
if (state.selectedSkillIds.has(id)) {
state.selectedSkillIds.delete(id);
e.target.classList.remove('selected');
} else {
state.selectedSkillIds.add(id);
e.target.classList.add('selected');
}
}
});
elements.config.addSkillForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = elements.config.skillNameInput.value.trim();
if (name && !state.skills.some(s => s.name.toLowerCase() === name.toLowerCase())) {
state.skills.push({ id: Date.now(), name });
elements.config.skillNameInput.value = '';
renderAll();
}
});
elements.config.addCareerForm.addEventListener('submit', (e) => {
e.preventDefault();
const title = elements.config.careerTitle.value.trim();
const salary = parseFloat(elements.config.careerSalary.value);
const requiredSkills = Array.from(elements.config.careerSkillsSelect.selectedOptions).map(opt => parseInt(opt.value));
if (title && salary && requiredSkills.length > 0) {
state.careers.push({ id: Date.now(), title, salary, requiredSkills });
elements.config.addCareerForm.reset();
alert(`Career "${title}" added!`);
} else {
alert("Please fill all fields and select at least one skill.");
}
});
elements.config.skillList.addEventListener('click', (e) => {
if(e.target.classList.contains('delete-skill')) {
const id = parseInt(e.target.dataset.id);
state.skills = state.skills.filter(s => s.id !== id);
// Also remove from any careers that require it
state.careers.forEach(c => {
c.requiredSkills = c.requiredSkills.filter(skillId => skillId !== id);
});
renderAll();
}
});
const downloadPDF = async () => {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
elements.pdf.pdfHeader.classList.remove('hidden');
const canvas = await html2canvas(pdfContent, { scale: 2 });
elements.pdf.pdfHeader.classList.add('hidden');
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: [canvas.width, canvas.height]
});
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save('career-path-report.pdf');
};
// --- INITIALIZATION ---
const initialize = () => {
Object.keys(elements.tabs).forEach(id => elements.tabs[id].addEventListener('click', () => switchTab(id)));
elements.nav.next.addEventListener('click', () => { const i = tabs.indexOf(currentTab); if (i < tabs.length - 1) switchTab(tabs[i + 1]); });
elements.nav.prev.addEventListener('click', () => { const i = tabs.indexOf(currentTab); if (i > 0) switchTab(tabs[i - 1]); });
elements.advisor.findCareerBtn.addEventListener('click', handleFindCareer);
elements.pdf.downloadBtn.addEventListener('click', downloadPDF);
// Initial Data (USA-centric tech/business roles)
state.skills = [
{ id: 1, name: 'JavaScript' }, { id: 2, name: 'Python' }, { id: 3, name: 'React' },
{ id: 4, name: 'SQL' }, { id: 5, name: 'Project Management' }, { id: 6, name: 'Data Analysis' },
{ id: 7, name: 'Cloud (AWS/Azure)' }, { id: 8, name: 'UI/UX Design' }, { id: 9, name: 'Marketing Strategy'},
{ id: 10, name: 'Financial Modeling'}
];
state.careers = [
{ id: 101, title: 'Frontend Developer', salary: 95000, requiredSkills: [1, 3, 8] },
{ id: 102, title: 'Data Scientist', salary: 125000, requiredSkills: [2, 4, 6] },
{ id: 103, title: 'Product Manager', salary: 115000, requiredSkills: [5, 6, 8, 9] },
{ id: 104, title: 'Cloud Engineer', salary: 120000, requiredSkills: [2, 4, 7] },
{ id: 105, title: 'Digital Marketing Manager', salary: 85000, requiredSkills: [6, 9] },
{ id: 106, title: 'Financial Analyst', salary: 90000, requiredSkills: [4, 6, 10] },
];
updateNavButtons();
renderAll();
};
initialize();
});
