From f357a5c12c4d365c74ed5a336c29d4fde286a8ee Mon Sep 17 00:00:00 2001 From: Ali Asghar Date: Sat, 9 Nov 2024 12:54:24 -0800 Subject: [PATCH] Add files via upload --- index.html | 55 ++++++++++++++++++++++++++++++++++ script.js | 43 ++++++++++++++++++++++++++ script.ts | 77 +++++++++++++++++++++++++++++++++++++++++++++++ style.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 263 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 script.ts create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b60abdb --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + Editable Resume Builder + + + +
+
+

Create Your Resume

+ +
+ + +
+ +
+ + +
+ +
+

Education

+ + + +
+ + +
+

Work Experience

+ + + +
+ + +
+ + +
+ + +
+
+ +
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..53cfcf0 --- /dev/null +++ b/script.js @@ -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 \n \n \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 \n \n \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 = "

Education

"; + var experienceHTML = "

Work Experience

"; + var resumeDisplay = document.getElementById("resume-content"); + resumeDisplay.innerHTML = "\n

".concat(name || "Your Name", "

\n

Email: ").concat(email || "your.email@example.com", "

\n

Skills

\n

").concat(skills || "Your skills here", "

\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); diff --git a/script.ts b/script.ts new file mode 100644 index 0000000..1a360d2 --- /dev/null +++ b/script.ts @@ -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 = ` + + + + `; + + 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 = ` + + + + `; + + 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 = "

Education

"; + + let experienceHTML = "

Work Experience

"; + + const resumeDisplay = document.getElementById("resume-content") as HTMLDivElement; + resumeDisplay.innerHTML = ` +

${name || "Your Name"}

+

Email: ${email || "your.email@example.com"}

+

Skills

+

${skills || "Your skills here"}

+ ${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); diff --git a/style.css b/style.css new file mode 100644 index 0000000..d656b3e --- /dev/null +++ b/style.css @@ -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; + } +}