Online Resume Builder
Online Resume Builder
CSS (styles.css)
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 90%;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea, button {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
textarea {
resize: vertical;
height: 100px;
}
button {
background-color: #5cb85c;
color: white;
cursor: pointer;
border: none;
}
button:hover {
background-color: #4cae4c;
}
.resume {
margin-top: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
}
#photo-preview {
max-width: 100px;
max-height: 100px;
margin-bottom: 20px;
}
JavaScript (script.js)
javascript
Copy code
document.getElementById('photo').addEventListener('change', function(event) {
const reader = new FileReader();
reader.onload = function() {
const img = document.createElement('img');
img.id = 'photo-preview';
img.src = reader.result;
document.getElementById('resume').appendChild(img);
};
reader.readAsDataURL(event.target.files[0]);
});
function generateRandomColor() {
const letters = '89ABCDEF'; // Lighter colors only
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 8)];
}
return color;
}
function generateResume() {
const resume = document.getElementById('resume');
resume.innerHTML = '';
resume.style.backgroundColor = generateRandomColor();
const fields = ['name', 'email', 'address', 'education', 'experience', 'hobbies', 'languages', 'disclaimer'];
fields.forEach(field => {
const value = document.getElementById(field).value;
if (value) {
const div = document.createElement('div');
div.className = 'resume-section';
div.innerHTML = `${field.charAt(0).toUpperCase() + field.slice(1)}: ${value}`;
resume.appendChild(div);
}
});
const downloadBtn = document.getElementById('downloadBtn');
downloadBtn.style.display = 'block';
}
function downloadResume() {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
pdf.fromHTML(document.getElementById('resume').innerHTML, 10, 10, {
'width': 180
});
pdf.save('resume.pdf');
'height' : 60,
'width' : 468,
'params' : {}
};
}
