File size: 7,894 Bytes
50fb52f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
document.addEventListener('DOMContentLoaded', function() {
// Drag and drop functionality
const sections = document.querySelectorAll('.form-section');
let draggedSection = null;
sections.forEach(section => {
section.addEventListener('dragstart', function() {
draggedSection = this;
setTimeout(() => {
this.classList.add('dragging');
}, 0);
});
section.addEventListener('dragend', function() {
this.classList.remove('dragging');
});
});
const form = document.querySelector('.resume-form');
form.addEventListener('dragover', function(e) {
e.preventDefault();
const afterElement = getDragAfterElement(form, e.clientY);
if (afterElement == null) {
form.appendChild(draggedSection);
} else {
form.insertBefore(draggedSection, afterElement);
}
});
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.form-section:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
// Add experience entry
document.getElementById('add-experience').addEventListener('click', function() {
const experienceSection = this.parentElement;
const newEntry = document.createElement('div');
newEntry.className = 'experience-entry';
newEntry.innerHTML = `
<input type="text" class="job-title" placeholder="Job Title">
<input type="text" class="company" placeholder="Company">
<input type="text" class="duration" placeholder="Duration">
<textarea class="description" placeholder="Job Description"></textarea>
<button class="ai-suggest" data-for="experience">Improve with AI</button>
`;
experienceSection.insertBefore(newEntry, this);
});
// Add skills
document.getElementById('add-skill').addEventListener('click', function() {
const skillInput = document.getElementById('skills-input');
const skillsList = document.getElementById('skills-list');
if (skillInput.value.trim() !== '') {
const skillTag = document.createElement('span');
skillTag.className = 'skill-tag';
skillTag.textContent = skillInput.value;
skillsList.appendChild(skillTag);
skillInput.value = '';
}
});
// AI Suggestions
const modal = document.getElementById('ai-modal');
const span = document.getElementsByClassName('close')[0];
const aiSuggestions = document.getElementById('ai-suggestions');
let currentField = '';
document.querySelectorAll('.ai-suggest').forEach(button => {
button.addEventListener('click', function() {
currentField = this.getAttribute('data-for');
const fieldContent = getFieldContent(currentField);
// In a real app, you would call your backend API here
// For now, we'll simulate a response
simulateAIResponse(fieldContent);
modal.style.display = 'block';
});
});
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
document.getElementById('apply-suggestion').addEventListener('click', function() {
// In a real app, you would apply the selected suggestion
alert('Suggestion applied!');
modal.style.display = 'none';
});
function getFieldContent(field) {
switch(field) {
case 'summary':
return document.getElementById('summary').value;
case 'experience':
// Get the last experience entry's description
const experiences = document.querySelectorAll('.experience-entry');
const lastExperience = experiences[experiences.length - 1];
return lastExperience.querySelector('.description').value;
default:
return '';
}
}
function simulateAIResponse(content) {
// This is just a simulation - in a real app, you'd call the OpenAI API
const responses = {
summary: [
"Consider starting with a strong action word and quantifying your achievements.",
"Try to align your summary more closely with the job description keywords.",
"Your summary could benefit from more specific metrics about your impact."
],
experience: [
"Reformat your bullet points to start with action verbs and include measurable results.",
"Consider adding more context about the scale of your projects or responsibilities.",
"This could be strengthened by showing progression or promotion if applicable."
]
};
aiSuggestions.innerHTML = '';
responses[currentField].forEach((suggestion, index) => {
const suggestionDiv = document.createElement('div');
suggestionDiv.className = 'suggestion';
suggestionDiv.innerHTML = `
<input type="radio" id="suggestion-${index}" name="ai-suggestion" value="${index}">
<label for="suggestion-${index}">${suggestion}</label>
`;
aiSuggestions.appendChild(suggestionDiv);
});
}
// Preview Resume
document.getElementById('preview-resume').addEventListener('click', function() {
// In a real app, you would generate a proper preview
const previewContent = document.getElementById('preview-content');
previewContent.innerHTML = `
<h3>${document.getElementById('name').value || 'Your Name'}</h3>
<p>${document.getElementById('email').value || '[email protected]'} |
${document.getElementById('phone').value || '(123) 456-7890'}</p>
<h4>Professional Summary</h4>
<p>${document.getElementById('summary').value || 'Experienced professional seeking new opportunities.'}</p>
<h4>Work Experience</h4>
<div class="preview-experience">
${Array.from(document.querySelectorAll('.experience-entry')).map(exp => `
<h5>${exp.querySelector('.job-title').value || 'Job Title'} at ${exp.querySelector('.company').value || 'Company'}</h5>
<p>${exp.querySelector('.duration').value || 'Duration'}</p>
<p>${exp.querySelector('.description').value || 'Job description and accomplishments.'}</p>
`).join('')}
</div>
`;
});
// Analyze Resume
document.getElementById('analyze-resume').addEventListener('click', function() {
// In a real app, you would call your backend API for analysis
alert('In a complete app, this would analyze your resume for ATS compatibility and suggest improvements.');
});
// Download PDF
document.getElementById('download-pdf').addEventListener('click', function() {
// In a real app, you would generate a PDF
alert('In a complete app, this would generate and download a PDF of your resume.');
});
}); |