Resume builder

This code creates a responsive online resume builder tool. It captures user input for various resume fields such as name, email, address, education, experience, hobbies, language spoken, and disclaimer. The resume is styled with colorful elements, and a random

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Online Resume Builder</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f2f2f2;

      margin: 0;

      padding: 20px;

    }

    

    .resume-container {

      background-color: #fff;

      border-radius: 8px;

      padding: 20px;

      margin-bottom: 20px;

      max-width: 800px;

      margin: 0 auto;

      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    }

    

    .resume-container h1 {

      text-align: center;

      color: #333;

    }

    

    .section {

      margin-bottom: 20px;

    }

    

    .section h2 {

      color: #333;

      margin-bottom: 10px;

    }

    

    .section-content {

      display: flex;

      flex-wrap: wrap;

    }

    

    .section-content > div {

      flex: 1 1 300px;

      margin-right: 20px;

    }

    

    .section-content > div:last-child {

      margin-right: 0;

    }

    

    .label {

      font-weight: bold;

    }

    

    .download-button {

      text-align: center;

      margin-top: 20px;

    }

    

    .btn {

      background-color: #4caf50;

      color: #fff;

      border: none;

      padding: 10px 20px;

      border-radius: 4px;

      cursor: pointer;

      font-size: 16px;

    }

  </style>

</head>

<body>

  <div class="resume-container">

    <h1>Online Resume Builder</h1>

    

    <div class="section">

      <h2>Personal Information</h2>

      <div class="section-content">

        <div>

          <span class="label">Name:</span>

          <p id="name"></p>

        </div>

        <div>

          <span class="label">Email:</span>

          <p id="email"></p>

        </div>

        <div>

          <span class="label">Address:</span>

          <p id="address"></p>

        </div>

        <div>

          <span class="label">Photo:</span>

          <div id="photo"></div>

        </div>

      </div>

    </div>

    

    <div class="section">

      <h2>Education</h2>

      <div class="section-content">

        <div>

          <span class="label">School/University:</span>

          <p id="education"></p>

        </div>

      </div>

    </div>

    

    <div class="section">

      <h2>Experience</h2>

      <div class="section-content">

        <div>

          <span class="label">Company:</span>

          <p id="experience"></p>

        </div>

      </div>

    </div>

    

    <div class="section">

      <h2>Hobbies</h2>

      <div class="section-content">

        <div>

          <span class="label">Hobbies:</span>

          <p id="hobbies"></p>

        </div>

      </div>

    </div>

    

    <div class="section">

      <h2>Languages Spoken</h2>

      <div class="section-content">

        <div>

          <span class="label">Languages:</span>

          <p id="languages"></p>

        </div>

      </div>

    </div>

    

    <div class="section">

      <h2>Disclaimer</h2>

      <div class="section-content">

        <div>

          <span class="label">Disclaimer:</span>

          <p id="disclaimer"></p>

        </div>

      </div>

    </div>

    

    <div class="download-button">

      <button class="btn" onclick="generatePDF()">Download Resume</button>

    </div>

  </div>

  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>

  <script>

    function generatePDF() {

      const resumeContainer = document.querySelector('.resume-container');

      const options = {

        margin: [20, 20, 20, 20],

        filename: 'resume.pdf',

        image: { type: 'jpeg', quality: 0.98 },

        html2canvas: { scale: 2 },

        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }

      };

      

      html2pdf().from(resumeContainer).set(options).save();

    }

    

    // Get user input and populate resume fields

    const name = prompt('Enter your name:');

    document.getElementById('name').innerText = name;

    

    const email = prompt('Enter your email:');

    document.getElementById('email').innerText = email;

    

    const address = prompt('Enter your address:');

    document.getElementById('address').innerText = address;

    

    const education = prompt('Enter your education details:');

    document.getElementById('education').innerText = education;

    

    const experience = prompt('Enter your experience details:');

    document.getElementById('experience').innerText = experience;

    

    const hobbies = prompt('Enter your hobbies:');

    document.getElementById('hobbies').innerText = hobbies;

    

    const languages = prompt('Enter the languages you speak:');

    document.getElementById('languages').innerText = languages;

    

    const disclaimer = prompt('Enter your disclaimer:');

    document.getElementById('disclaimer').innerText = disclaimer;

    

    // Random light background color

    const randomColor = () => Math.floor(Math.random() * 200);

    const r = randomColor();

    const g = randomColor();

    const b = randomColor();

    const rgbColor = `rgb(${r}, ${g}, ${b})`;

    document.body.style.backgroundColor = rgbColor;

    

    // Display photo if provided

    const photo = prompt('Enter the URL of your photo (leave blank if none):');

    if (photo) {

      const photoElement = document.getElementById('photo');

      photoElement.style.backgroundImage = `url(${photo})`;

      photoElement.style.backgroundSize = 'cover';

      photoElement.style.width = '150px';

      photoElement.style.height = '150px';

      photoElement.style.borderRadius = '50%';

      photoElement.style.margin = '0 auto';

    }

  </script>

</body>

</html>