Interactive Resume Creator JavaScript, HTML, CSS

👤 Sharing: AI
```html
<!DOCTYPE html>
<html>
<head>
<title>Interactive Resume Creator</title>
<style>
body {
  font-family: sans-serif;
  margin: 20px;
}

.container {
  display: flex;
  gap: 20px;
}

.form-section {
  width: 40%;
}

.resume-preview {
  width: 60%;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

h2 {
    margin-top: 20px;
}

ul {
    padding-left: 20px;
}

.hidden {
    display: none;
}
</style>
</head>
<body>

<h1>Interactive Resume Creator</h1>

<div class="container">
  <div class="form-section">
    <h2>Personal Information</h2>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" oninput="updateResume()">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" oninput="updateResume()">

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" oninput="updateResume()">

    <label for="linkedin">LinkedIn:</label>
    <input type="url" id="linkedin" name="linkedin" oninput="updateResume()">

    <label for="github">GitHub:</label>
    <input type="url" id="github" name="github" oninput="updateResume()">

    <h2>Summary</h2>
    <label for="summary">Summary:</label>
    <textarea id="summary" name="summary" rows="4" oninput="updateResume()"></textarea>

    <h2>Experience</h2>
    <div id="experience-section">
      <button type="button" onclick="addExperience()">Add Experience</button>
    </div>

    <h2>Education</h2>
    <div id="education-section">
      <button type="button" onclick="addEducation()">Add Education</button>
    </div>


    <h2>Skills</h2>
    <div id="skills-section">
        <label for="skills">Skills (comma-separated):</label>
        <input type="text" id="skills" name="skills" oninput="updateResume()">
    </div>
  </div>

  <div class="resume-preview">
    <h2>Resume Preview</h2>
    <div id="resume-name"></div>
    <div id="resume-contact"></div>
    <div id="resume-summary"></div>
    <h2>Experience</h2>
    <div id="resume-experience"></div>
    <h2>Education</h2>
    <div id="resume-education"></div>
    <h2>Skills</h2>
    <div id="resume-skills"></div>
  </div>
</div>

<script>
function updateResume() {
  document.getElementById('resume-name').innerText = document.getElementById('name').value;
  document.getElementById('resume-contact').innerText = `Email: ${document.getElementById('email').value} | Phone: ${document.getElementById('phone').value} | LinkedIn: ${document.getElementById('linkedin').value} | GitHub: ${document.getElementById('github').value}`;
  document.getElementById('resume-summary').innerText = document.getElementById('summary').value;

    // Skills Update
    const skillsInput = document.getElementById('skills').value;
    const skillsArray = skillsInput.split(',').map(skill => skill.trim()).filter(skill => skill !== ''); // Split by comma, trim whitespace, remove empty strings
    let skillsHtml = '<ul>';
    skillsArray.forEach(skill => {
        skillsHtml += `<li>${skill}</li>`;
    });
    skillsHtml += '</ul>';
    document.getElementById('resume-skills').innerHTML = skillsHtml;


  // Update Experience
  const experienceDiv = document.getElementById('resume-experience');
  experienceDiv.innerHTML = ''; // Clear existing experience
  const experienceForms = document.querySelectorAll('.experience-form');
  experienceForms.forEach(form => {
    const title = form.querySelector('.experience-title').value;
    const company = form.querySelector('.experience-company').value;
    const dates = form.querySelector('.experience-dates').value;
    const description = form.querySelector('.experience-description').value;

    if (title && company && dates && description) {
      const experienceHTML = `
        <h3>${title}, ${company}</h3>
        <p>${dates}</p>
        <p>${description}</p>
      `;
      experienceDiv.innerHTML += experienceHTML;
    }
  });

  // Update Education
  const educationDiv = document.getElementById('resume-education');
  educationDiv.innerHTML = ''; // Clear existing education
  const educationForms = document.querySelectorAll('.education-form');
  educationForms.forEach(form => {
    const institution = form.querySelector('.education-institution').value;
    const degree = form.querySelector('.education-degree').value;
    const dates = form.querySelector('.education-dates').value;
    const description = form.querySelector('.education-description').value;


    if (institution && degree && dates && description) {
      const educationHTML = `
        <h3>${degree}, ${institution}</h3>
        <p>${dates}</p>
        <p>${description}</p>
      `;
      educationDiv.innerHTML += educationHTML;
    }
  });


}

function addExperience() {
  const experienceSection = document.getElementById('experience-section');
  const experienceForm = document.createElement('div');
  experienceForm.classList.add('experience-form');
  experienceForm.innerHTML = `
    <label>Title:</label>
    <input type="text" class="experience-title" oninput="updateResume()">
    <label>Company:</label>
    <input type="text" class="experience-company" oninput="updateResume()">
    <label>Dates:</label>
    <input type="text" class="experience-dates" oninput="updateResume()">
    <label>Description:</label>
    <textarea class="experience-description" rows="3" oninput="updateResume()"></textarea>
    <button type="button" onclick="removeExperience(this)">Remove</button>
  `;
  experienceSection.appendChild(experienceForm);
  updateResume();
}

function removeExperience(button) {
  button.parentNode.remove();
  updateResume();
}

function addEducation() {
  const educationSection = document.getElementById('education-section');
  const educationForm = document.createElement('div');
  educationForm.classList.add('education-form');
  educationForm.innerHTML = `
    <label>Institution:</label>
    <input type="text" class="education-institution" oninput="updateResume()">
    <label>Degree:</label>
    <input type="text" class="education-degree" oninput="updateResume()">
    <label>Dates:</label>
    <input type="text" class="education-dates" oninput="updateResume()">
    <label>Description:</label>
    <textarea class="education-description" rows="3" oninput="updateResume()"></textarea>
    <button type="button" onclick="removeEducation(this)">Remove</button>
  `;
  educationSection.appendChild(educationForm);
  updateResume();
}


function removeEducation(button) {
  button.parentNode.remove();
  updateResume();
}
</script>

</body>
</html>
```
👁️ Viewed: 9
Interactive Resume Creator JavaScript, HTML, CSS

Comments

Site Statistics
