Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
Ali Asghar authored Nov 9, 2024
0 parents commit f357a5c
Show file tree
Hide file tree
Showing 4 changed files with 263 additions and 0 deletions.
55 changes: 55 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable Resume Builder</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="form-container" class="form-container">
<form id="resume-form">
<h2>Create Your Resume</h2>

<div>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Name" required>
</div>

<div>
<label for="email">Email</label>
<input type="email" id="email" placeholder="ali@example.com" required>
</div>

<div id="education-section">
<h3>Education</h3>
<input type="text" placeholder="Degree" required>
<input type="text" placeholder="Institution" required>
<input type="text" placeholder="Graduation Year" required>
</div>
<button type="button" id="add-education">Add Education</button>

<div id="experience-section">
<h3>Work Experience</h3>
<input type="text" placeholder="Job Title" required>
<input type="text" placeholder="Company" required>
<input type="text" placeholder="Duration" required>
</div>
<button type="button" id="add-experience">Add Experience</button>

<div>
<label for="skills">Skills (comma separated)</label>
<input type="text" id="skills" placeholder="HTML, CSS, JavaScript" required>
</div>

<button type="button" id="generate-resume">Generate Resume</button>
</form>
</div>

<div id="resume-display" class="resume-display">
<div id="resume-content"></div>
</div>

<script src="script.js"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
var _a, _b, _c;
// Function to add new education input fields
function addEducation() {
var educationSection = document.getElementById("education-section");
var newEducationField = document.createElement("div");
newEducationField.innerHTML = "\n <input type=\"text\" placeholder=\"Degree\" required>\n <input type=\"text\" placeholder=\"Institution\" required>\n <input type=\"text\" placeholder=\"Graduation Year\" required>\n ";
educationSection.appendChild(newEducationField);
}
// Function to add new work experience input fields
function addExperience() {
var experienceSection = document.getElementById("experience-section");
var newExperienceField = document.createElement("div");
newExperienceField.innerHTML = "\n <input type=\"text\" placeholder=\"Job Title\" required>\n <input type=\"text\" placeholder=\"Company\" required>\n <input type=\"text\" placeholder=\"Duration\" required>\n ";
experienceSection.appendChild(newExperienceField);
}
// Function to generate the resume
function generateResume() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var skills = document.getElementById("skills").value.split(",").map(function (skill) { return skill.trim(); }).join(", ");
var educationHTML = "<h3>Education</h3><ul>";
var educationInputs = document.querySelectorAll("#education-section input");
for (var i = 0; i < educationInputs.length; i += 3) {
educationHTML += "\n <li><strong>Degree:</strong> ".concat(educationInputs[i].value, "</li>\n <li><strong>Institution:</strong> ").concat(educationInputs[i + 1].value, "</li>\n <li><strong>Graduation Year:</strong> ").concat(educationInputs[i + 2].value, "</li>\n ");
}
educationHTML += "</ul>";
var experienceHTML = "<h3>Work Experience</h3><ul>";
var experienceInputs = document.querySelectorAll("#experience-section input");
for (var i = 0; i < experienceInputs.length; i += 3) {
experienceHTML += "\n <li><strong>Job Title:</strong> ".concat(experienceInputs[i].value, "</li>\n <li><strong>Company:</strong> ").concat(experienceInputs[i + 1].value, "</li>\n <li><strong>Duration:</strong> ").concat(experienceInputs[i + 2].value, "</li>\n ");
}
experienceHTML += "</ul>";
var resumeDisplay = document.getElementById("resume-content");
resumeDisplay.innerHTML = "\n <h2>".concat(name || "Your Name", "</h2>\n <p><strong>Email:</strong> ").concat(email || "your.email@example.com", "</p>\n <h3>Skills</h3>\n <p>").concat(skills || "Your skills here", "</p>\n ").concat(educationHTML, "\n ").concat(experienceHTML, "\n ");
// Show the resume display
var resumeSection = document.getElementById("resume-display");
resumeSection.style.display = "block";
}
// Event listeners for adding new sections
(_a = document.getElementById("add-education")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", addEducation);
(_b = document.getElementById("add-experience")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", addExperience);
// Event listener for generating the resume
(_c = document.getElementById("generate-resume")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", generateResume);
77 changes: 77 additions & 0 deletions script.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
// Function to add new education input fields
function addEducation() {
const educationSection = document.getElementById("education-section") as HTMLDivElement;
const newEducationField = document.createElement("div");

newEducationField.innerHTML = `
<input type="text" placeholder="Degree" required>
<input type="text" placeholder="Institution" required>
<input type="text" placeholder="Graduation Year" required>
`;

educationSection.appendChild(newEducationField);
}

// Function to add new work experience input fields
function addExperience() {
const experienceSection = document.getElementById("experience-section") as HTMLDivElement;
const newExperienceField = document.createElement("div");

newExperienceField.innerHTML = `
<input type="text" placeholder="Job Title" required>
<input type="text" placeholder="Company" required>
<input type="text" placeholder="Duration" required>
`;

experienceSection.appendChild(newExperienceField);
}

// Function to generate the resume
function generateResume() {
const name = (document.getElementById("name") as HTMLInputElement).value;
const email = (document.getElementById("email") as HTMLInputElement).value;
const skills = (document.getElementById("skills") as HTMLInputElement).value.split(",").map(skill => skill.trim()).join(", ");

let educationHTML = "<h3>Education</h3><ul>";
const educationInputs = document.querySelectorAll("#education-section input");
for (let i = 0; i < educationInputs.length; i += 3) {
educationHTML += `
<li><strong>Degree:</strong> ${(educationInputs[i] as HTMLInputElement).value}</li>
<li><strong>Institution:</strong> ${(educationInputs[i+1] as HTMLInputElement).value}</li>
<li><strong>Graduation Year:</strong> ${(educationInputs[i+2] as HTMLInputElement).value}</li>
`;
}
educationHTML += "</ul>";

let experienceHTML = "<h3>Work Experience</h3><ul>";
const experienceInputs = document.querySelectorAll("#experience-section input");
for (let i = 0; i < experienceInputs.length; i += 3) {
experienceHTML += `
<li><strong>Job Title:</strong> ${(experienceInputs[i] as HTMLInputElement).value}</li>
<li><strong>Company:</strong> ${(experienceInputs[i+1] as HTMLInputElement).value}</li>
<li><strong>Duration:</strong> ${(experienceInputs[i+2] as HTMLInputElement).value}</li>
`;
}
experienceHTML += "</ul>";

const resumeDisplay = document.getElementById("resume-content") as HTMLDivElement;
resumeDisplay.innerHTML = `
<h2>${name || "Your Name"}</h2>
<p><strong>Email:</strong> ${email || "your.email@example.com"}</p>
<h3>Skills</h3>
<p>${skills || "Your skills here"}</p>
${educationHTML}
${experienceHTML}
`;

// Show the resume display
const resumeSection = document.getElementById("resume-display") as HTMLDivElement;
resumeSection.style.display = "block";
}

// Event listeners for adding new sections
document.getElementById("add-education")?.addEventListener("click", addEducation);
document.getElementById("add-experience")?.addEventListener("click", addExperience);

// Event listener for generating the resume
document.getElementById("generate-resume")?.addEventListener("click", generateResume);
88 changes: 88 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/* Basic layout */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}

/* Form container styling */
.form-container {
width: 40%;
padding: 20px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
transition: transform 0.5s ease;
margin-right: 20px;
}

/* Resume display styling */
.resume-display {
width: 40%;
padding: 20px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: none;
}

.resume-display h2 {
font-size: 24px;
text-align: left;
}

.resume-display h3 {
font-size: 20px;
margin-bottom: 10px;
text-decoration: underline;
}

.resume-display ul {
list-style-type: square;
margin-left: 20px;
}

/* Input fields */
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

/* Button styling */
button {
padding: 10px 20px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 10px 0;
}

button:hover {
background: #45a049;
}

/* Animations */
.form-container {
border: 2px solid #4CAF50;
animation: borderAnimation 1s infinite alternate;
}

@keyframes borderAnimation {
0% {
border-color: #4CAF50;
}
100% {
border-color: #45a049;
}
}

0 comments on commit f357a5c

Please sign in to comment.