`;
});
}
// Education
if (resumeData.education.length > 0) {
html += '
Education
';
resumeData.education.forEach(edu => {
html += `
${edu.degree || ''} from ${edu.school || ''}
${edu.gradDate || ''}
`;
});
}
// Skills
if (skills) {
html += `
Skills
`;
}
resumePreview.innerHTML = html;
}
function switchTab(tabIndex) {
tabs.forEach((tab, index) => {
tab.classList.toggle('active', index === tabIndex);
tabContents[index].classList.toggle('active', index === tabIndex);
});
addExperienceBtn.style.display = tabIndex === 1 ? 'inline-block' : 'none';
addEducationBtn.style.display = tabIndex === 2 ? 'inline-block' : 'none';
prevBtn.disabled = tabIndex === 0;
nextBtn.disabled = tabIndex === tabs.length - 1;
currentTab = tabIndex;
}
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => switchTab(index));
});
nextBtn.addEventListener('click', () => { if (currentTab < tabs.length - 1) switchTab(currentTab + 1); });
prevBtn.addEventListener('click', () => { if (currentTab > 0) switchTab(currentTab - 1); });
function createDynamicItem(type, index) {
const itemDiv = document.createElement('div');
itemDiv.className = 'list-item';
itemDiv.dataset.index = index;
if (type === 'experience') {
itemDiv.innerHTML = `
`;
} else if (type === 'education') {
itemDiv.innerHTML = `
`;
}
document.getElementById(type).appendChild(itemDiv);
}
addExperienceBtn.addEventListener('click', () => {
const index = resumeData.experience.length;
resumeData.experience.push({});
createDynamicItem('experience', index);
});
addEducationBtn.addEventListener('click', () => {
const index = resumeData.education.length;
resumeData.education.push({});
createDynamicItem('education', index);
});
document.getElementById('resumeForm').addEventListener('input', (e) => {
if (e.target.closest('.list-item')) {
const item = e.target.closest('.list-item');
const index = item.dataset.index;
const type = item.parentElement.id;
if (type === 'experience') {
resumeData.experience[index] = {
title: item.querySelector('.exp-title').value,
company: item.querySelector('.exp-company').value,
startDate: item.querySelector('.exp-startDate').value,
endDate: item.querySelector('.exp-endDate').value,
description: item.querySelector('.exp-description').value,
};
} else if (type === 'education') {
resumeData.education[index] = {
school: item.querySelector('.edu-school').value,
degree: item.querySelector('.edu-degree').value,
gradDate: item.querySelector('.edu-gradDate').value,
};
}
}
updatePreview();
});
document.getElementById('resumeForm').addEventListener('click', (e) => {
if (e.target.classList.contains('remove-item')) {
const index = e.target.dataset.index;
const type = e.target.dataset.type;
resumeData[type].splice(index, 1);
document.getElementById(type).innerHTML = '';
resumeData[type].forEach((item, i) => createDynamicItem(type, i));
// Repopulate data after re-rendering
resumeData[type].forEach((item, i) => {
const itemDiv = document.querySelector(`#${type} .list-item[data-index="${i}"]`);
for (const key in item) {
itemDiv.querySelector(`.exp-${key}, .edu-${key}`).value = item[key];
}
});
updatePreview();
}
});
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const resume = document.getElementById('resumePreviewContainer');
html2canvas(resume, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const ratio = Math.min(pdfWidth / canvasWidth, pdfHeight / canvasHeight);
pdf.addImage(imgData, 'PNG', 0, 0, canvasWidth * ratio, canvasHeight * ratio);
pdf.save('resume.pdf');
});
});
// Initial render
updatePreview();
});
