Dynamic Resume Creator using HTML CSS and JavaScript (original) (raw)

Last Updated : 23 May, 2025

Creating a well-structured and professional resume can be time-consuming and difficult for many job seekers. Challenges like formatting, organizing details, and making the resume stand out are common.

To solve this issue, a **Resume Creator project was developed to simplify the process by offering an easy-to-use interface that helps users build effective resumes quickly. Today, over **75% of job applicants prefer using resume-building tools to save time and improve presentation.

**Prerequisites:

• **HTML
• **CSS
• **JavaScript

Step By Step Guide for Resume Creator Project

• **Step1: Create an HTML form with input fields for resume information.
• **Step2: Use JavaScript to toggle between the input form and resume preview.
• **Step3: Retrieve user input from the form and dynamically populate the preview.
• **Step4: Include a button for printing the resume.
• **Step5 : Style the elements using CSS for the desired layout and design.

**Example: In this example, we will illustrate the Dynamic Resume Creator using HTML, CSS, and JavaScript

index.html `

<!-- preview button -->
<button onclick="hide()">
      Generate / Edit
  </button>
<!-- script link here -->
<script src="script.js"></script>

style.css

/* style.css */

• { margin: 0; padding: 0; box-sizing: border-box; } body { background-image: linear-gradient(rgb(30, 30, 30), rgb(80, 80, 80)); background-attachment: fixed; font-family: Arial, Helvetica, sans-serif; } .resume-builder { padding: 27px 100px; } .container { padding: 10px 30px; background: rgb(240, 240, 240); border-radius: 10px; height: auto; width: 60%; margin: auto; } .container h1 { text-align: center; background-color: rgb(50, 50, 50); padding: 10px; color: white; margin-bottom: 20px; } input, textarea { background-color: transparent; margin: 10px 0; padding: 5px; outline: none; border: none; border-bottom: 2px solid black; display: block; width: 100%; } button { border: none; background-color: white; padding: 15px; border-radius: 7px; font-weight: bold; cursor: pointer; display: block; margin: auto; margin-bottom: 20px; } button:hover { font-size: medium; } .output-container { display: none; width: 60%; margin: 10px auto; } .output { background-color: white; border: 2px solid white; margin-bottom: 10px; } .heading { padding: 20px 10px; text-align: center; color: white; background-color: rgb(50, 50, 50); text-transform: uppercase; } .heading h4 { color: rgb(200, 200, 200); padding-top: 9px; } .info { display: flex; padding: 20px; } .left { width: 40%; border-right: 2px dashed black; display: flex; flex-direction: column; justify-content: space-evenly; } .right { width: 60%; padding-left: 20px; display: flex; flex-direction: column; justify-content: space-evenly; } .box { margin: 10px 0; padding: 5px 10px; height: auto; overflow-wrap: break-word; } .box h2, .box p { margin-bottom: 5px; } .tip { font-size: small; color: gray; text-align: center; } .credit { text-align: center; font-weight: bold; padding: 10px 3px; color: rgb(80, 80, 80); } a { color: black; } a:hover { color: rgb(247, 28, 12); font-weight: bold; } /* media queries begin */ @media screen and (max-width: 920px) { .container { width: 100%; }

  .output-container { width: 87%; }

}

@media screen and (max-width: 600px) { .resume-builder { padding: 10px 30px; }

h1 {
    font-size: 160%;
}

.info {
    flex-direction: column;
}

.left {
    border-right: none;
    width: 100%;
}

.right {
    padding-left: 0;
    width: 100%;
}

}

/* media queries end here */

` script.js ``

// script.js // Taking elements from HTML const inputField = document.querySelector(".inputField"); const main = document.querySelector(".resume-builder"); const outputContainer = document.querySelector(".output_container"); let isHidden = true; // Function to toggle between input form and resume preview function hide() { if (isHidden) {

    // Hide the input form and show the resume preview
    main.style.display = "none";
    isHidden = false;

    outputContainer.style.display = "block";
    outputContainer.innerHTML = `
        <div class="output">
            <div class="heading">
                <h1>${inputField["name"].value}</h1>
                <h4>${inputField["title"].value}</h4>
            </div>
            <div class="info">
                <div class="left">
                    <div class="box">
                        <h2>Objective</h2>
                        <p>${inputField["objective"].value}</p>
                    </div>
                    <div class="box">
                        <h2>Skills</h2>
                        <p>${inputField["skills"].value}</p>
                    </div>
                    <div class="box">
                        <h2>Academic Details</h2>
                        <p>${inputField["academic_details"].value}</p>
                    </div>
                    <div class="box">
                        <h2>Contact</h2>
                        <p>${inputField["contact"].value}</p>
                    </div>
                </div>
                <div class="right">
                    <div class="box">
                        <h2>Work Experience</h2>
                        <p>${inputField["work_experience"].value}</p>
                    </div>
                    <div class="box">
                        <h2>Achievements</h2>
                        <p>${inputField["achievements"].value}</p>
                    </div>
                    <div class="box">
                        <h2>Projects</h2>
                        <p>${inputField["projects"].value}</p>
                    </div>
                </div>
            </div>
        </div>
        <button onclick="print()">Print Resume</button>
    `;
} else {
    // Show the input form and hide the resume preview
    main.style.display = "block";
    isHidden = true;

    outputContainer.style.display = "none";
    outputContainer.innerHTML = "";
}

}

``

**Output: