Horje
Dynamic Resume Creator using HTML CSS and JavaScript

Creating a well-designed and professional resume can be a challenging and time-consuming task for job seekers. Many individuals struggle with formatting, organizing information, and ensuring their resume stands out among others. To address this problem, a Resume Creator project was developed to simplify the resume-building process and provide users with a user-friendly interface to generate effective resumes effortlessly.

Prerequisites:

Approach:

  • Create an HTML form with input fields for resume information.
  • Use JavaScript to toggle between the input form and resume preview.
  • Retrieve user input from the form and dynamically populate the preview.
  • Include a button for printing the resume.
  • 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

HTML 
<!-- index.html  -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resume Creator</title>
    <!-- style link here -->
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- input container starts here -->
    <section class="resume-builder">
        <div class="container">
            <h1>Resume Creator</h1>
            <div class="resume_container">
                <form class="inputField">
                    <input type="text" 
                           name="name" 
                           placeholder="Your Name" 
                           title="Enter Your Name" />
                    <input type="text" 
                           name="title" 
                           placeholder="Title/Sub Heading" 
                           title="Enter Title/Sub Heading" />
                    <textarea name="work_experience" 
                              placeholder="Work Experience" 
                              cols="40" rows="3"
                              title="Enter Your Work Experience">
                    </textarea>
                    <textarea name="academic_details" 
                              placeholder="Academic Details" 
                              cols="40" rows="3"
                              title="Enter Your Academic Details">
                    </textarea>
                    <input type="text" placeholder="Objective" 
                           title="Enter Your Objective" 
                           name="objective" />
                    <textarea name="skills" 
                              title="Enter Your Skills" 
                              placeholder="Skills" cols="40"
                              rows="3">
                    </textarea>
                    <textarea name="projects" 
                              title="Enter Your Projects" 
                              placeholder="Projects" 
                              cols="40"
                              rows="3">
                    </textarea>
                    <textarea name="achievements" 
                              placeholder="Achievements" 
                              cols="40" rows="3"
                              title="Enter Your Achievements">
                    </textarea>
                    <textarea name="contact" 
                              placeholder="Contact Information" 
                              cols="40" rows="3"
                              title="Enter Your Contact Information">
                    </textarea>
                </form>
            </div>
            <p class="credit">
                Created by
                <a href=
"https://auth.horje.org/user/lunatic1/articles" 
                   target="_blank">
                      lunatic1
                </a>
            </p>
            <p class="tip">
                **You can use markup in the text area for text decoration**
            </p>
        </div>
    </section>
    <!-- input container ends here -->

    <!-- output container starts here -->
    <div class="output_container"></div>
    <!-- output container ends here -->

    <!-- preview button -->
    <button onclick="hide()">
          Generate / Edit
      </button>

    <!-- script link here -->
    <script src="script.js"></script>
</body>

</html>
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 */
JavaScript 
// 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:


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript BaseX Converter: Converting Numbers Between Different Bases JavaScript BaseX Converter: Converting Numbers Between Different Bases
Scrollspy using HTML CSS and JavaScript Scrollspy using HTML CSS and JavaScript
JavaScript Program to Match Single Character with Multiple Possibilities JavaScript Program to Match Single Character with Multiple Possibilities
Star Rating using HTML CSS and JavaScript Star Rating using HTML CSS and JavaScript
JavaScript Pair Game JavaScript Pair Game

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 10



 

Horje