Scribd
Upload
6 views5 pages

HTML

The document is an HTML template for a CV builder application that allows users to input personal details, educational background, work experience, skills, and certifications. It includes a form for data entry and a section to display the generated CV output. Additionally, there is functionality for downloading the CV as a PDF file using the html2pdf library.

Uploaded by

dammyabeeb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views5 pages

HTML

The document is an HTML template for a CV builder application that allows users to input personal details, educational background, work experience, skills, and certifications. It includes a form for data entry and a section to display the generated CV output. Additionally, there is functionality for downloading the CV as a PDF file using the html2pdf library.

Uploaded by

dammyabeeb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Practice, Just For You! :)</title>
<style>
@media print {
@oage {size:a4;
margin: 1cm;}
body{
background-color: azure;
color: black;
width: 210mm;
height: 297mm;
}

}
body{
background-color: #333;
color: #FFc67D;
font-family: 'Times New Roman', Times, serif;
width: 800px; ;

}
.input-form{ display: inline;

}
h2{
margin-bottom: 0;
font-weight: 900;
text-decoration: underline;
}
button{
background-color:#FFc67D;
border-radius: 50px;
color: #333;
border: 0px;

}
input{
background-color :azure 250 250 ;
color: #333;
font-family: 'Times New Roman', Times, serif;
width: 180px;
height: 25px;
border-radius: 50px;
padding: 0px 5px;
}
#add-form-btn{
margin-left:5px;
}
.output {
width: 210mm;
height: 297mm;
display: inline-block;
margin-left: 100px;
font-size: 14px;
}

.output-name {
text-align: center;
margin-bottom: -3px;
font-weight: bold;

}
.output-email {
text-align: center;
font-weight: bold;
}
.output-institution, .output-company{
text-align:justify; font-weight: bold;

}
.output-year-graduated{
text-align: justify;
font-weight: bold;
display:inline
}
</style>

</head>

<body>
<body>

<h1>WELCOME TO CV BUILDER</h1>
<form id="cv-form" class="input-form">
<h2>Personal Details</h2>
<input type="name" class="js-full-name" placeholder=" First, Middle & Last
Names" required>
<input type="email" class="js-user-email" placeholder="Email" required>
<input type="Number" class="phone-number" placeholder="Phone Number"
required>
<input class="city-state" placeholder="City, State"></input>

<!--Educational stuff-->
<div id="form-container"><h2>Educational Background</h2>
<input type="text" class="institution" placeholder="School, City,
State"></input>
<input type="text" class="qualification"
placeholder="Qualification/Degree">
<input type="text" class="course" placeholder="Course of Study">
<input type="text" class="grade" placeholder="Grade">
<input type="number" class="year-graduated" placeholder="Year of
Graduation" min="1800" max="2030">
<button type="button" id="add-form-btn">+</button> </div>

<!--Work Experience-->
<h2>Work Experience</h2>
<input type="text" class="company" placeholder="Company's Name">
<input type="text" class="position-held" placeholder="Position Held">
<input class="skill-acquired" placeholder="Skills Acquired"></input>
<input type="text" class="starting" placeholder="Month, Year">
<input type="text" class="ending" placeholder="Month, Year">
<button type="button" id="add-form-btn" >+</button>

<!--Skills-->
<h2>Skills</h2>
<input type="text" class="first-skill" placeholder="Type a Skill">
<input type="text" class="second-skill" placeholder="Type a Skill">
<input type="text" class="third-skill" placeholder="Type a Skill">
<input type="text" class="fourth-skill" placeholder="Type a Skill">

<!--Certificate and Recognitions-->


<h2>Certificate and Recognitions</h2>
<input type="text" class="first-cert" placeholder="Issuer, Title & Year">
<input type="text" class="second-cert" placeholder="Issuer, Title & Year">

<button type="button" class="submit-button" onclick="userData" > Generate


CV </button>

</form>
<!--Output-->

<div id="cv-output" class="output">


<p class="output-name"><span id="js-output-name"></span></p>
<p class="output-email"><span id="js-output-email"></span>||
<span id="js-output-phone"></span>||</span>
<span id="js-output-address">||</span></p>
<!--Education Output-->
<h2>Educational Background</h2><p class= "output-institution"> <span
style="margin-right: 300px;" id="js-output-institution"></span> (<span id="js-
output-year-graduated"> </span>)</p>
<ul> <li class="output-degree"><span id="js-output-degree"></span><span
style="margin-left: 3px;" id="js-output-course"></span></li>
<li class="output-grade"> <span id="js-output-grade"></span> </li></ul>

<!--Work Experience-->
<h2>Work Experience</h2>
<p class="output-company"> <span style="margin-right: 300px;" id="js-
output-company"></span>
(<span id="output-starting"></span>-<span id="output-ending"></span>) </p>
<ul>
<li class="output-position"><span id="js-output-position"></span></li>
<li class="output-skills"> <span id="js-output-skills"></span></li>
</ul>
<!--Skills-->
<h2>Skills</h2>
<ul>
<li class="output-first-skill"><span
id="js-output-first-skill"></span></li>
<li class="output-second-skill"><span
id="js-output-second-skill"></span></li>
<li class="output-third-skill"><span
id="js-output-third-skill"></span></li>
<li class="output-fourth-skill"> <span
id="js-output-fourth-skill"></span></li>
</ul>

<!--Certificates and Recognition-->


<h2>Certificates and Recognition</h2>
<ul>
<li class="output-first-cert"><span id="js-output-first-cert"></span></li>
<li class="output-second-cert"> <span
id="js-output-second-cert"></span></li>
</ul>
</div>
<button
id="js-download-button">Download CV</button>
<script src="script.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.
js"></script>
<style>
document.querySelector('.submit-button').addEventListener ('click', function(event)
{
event.preventDefault();

const name = document.querySelector('.js-full-name').value;


const email = document.querySelector('.js-user-email').value;
const number = document.querySelector('.phone-number').value;
const state = document.querySelector('.city-state').value;
const institution = document.querySelector('.institution').value;
const qualification = document.querySelector('.qualification').value;
const course = document.querySelector('.course').value;
const grade = document.querySelector('.grade').value;
const yearGraduated = document.querySelector('.year-graduated').value;
const company = document.querySelector('.company').value;
const position = document.querySelector('.position-held').value;
const skill = document.querySelector('.skill-acquired').value;
const starting = document.querySelector('.starting').value;
const ending = document.querySelector('.ending').value;
const firstSkill = document.querySelector('.first-skill').value;
const secondSkill = document.querySelector('.second-skill').value;
const thirdSkill = document.querySelector('.third-skill').value;
const fourthSkill = document.querySelector('.fourth-skill').value;
const firstCert = document.querySelector('.first-cert').value;
const secondCert = document.querySelector('.second-skill').value;

//input the data


document.querySelector('#js-output-name').textContent = name;
document.querySelector('#js-output-email').textContent = email;
document.querySelector('#js-output-phone').textContent = number;
document.querySelector('#js-output-address').textContent = state;
document.querySelector('#js-output-institution').textContent = institution;
document.querySelector('#js-output-degree').textContent = qualification;
document.querySelector('#js-output-course').textContent = course;
document.querySelector('#js-output-grade').textContent = grade;
document.querySelector('#js-output-year-graduated').textContent =
yearGraduated;
document.querySelector('#js-output-company').textContent = company;
document.querySelector('#js-output-position').textContent = position;
document.querySelector('#js-output-skills').innerHTML = skill;
document.querySelector('#js-output-second-skill').innerHTML = secondSkill;
document.querySelector('#js-output-third-skill').innerHTML = thirdSkill;
document.querySelector('#js-output-first-skill').innerHTML = firstSkill;
document.querySelector('#js-output-fourth-skill').innerHTML = fourthSkill;
document.querySelector('#js-output-first-cert').innerHTML = firstCert;
document.querySelector('#js-output-second-cert').innerHTML = secondCert;
document.querySelector('#output-starting').innerHTML = starting;
document.querySelector('#output-ending').innerHTML = ending;

});

document.querySelector('.submit-button').addEventListener ('click', function(event)


{
event.preventDefault();

const name = document.querySelector('.js-full-name').value;


document.querySelector('#js-download-button').addEventListener('click', function(){
const element = document.getElementById('cv-output');

html2pdf('#cv-output').from(element).save('CV.pdf');
console.log(document.getElementById('cv-output'))
});
});

</style>
</body>
</html>

You might also like