#30🛑 Javascript Project 3, Part(2) | Resume Generator using Javascript | JavaScript Stuff to Generate Resume Dynamically |
Adarsh Tripathi edited this page Aug 10, 2021
·
2 revisions
<!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">
<title>Lecture 30 | Javascript Project 3 | Resume Generator using Javascript |</title>
<!---bootsrap css v5.1 link goes here -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!---custom css link goes here-->
<link rel="stylesheet" href="lecture30_style.css">
</head>
<body>
<!------Html code goes here------>
<!--CV GENERATOR FORM-->
<div class="container" id="cv-form">
<h1 class="text-center my-3">Resume Generator</h1>
<p class="text-center">Design and Develop by {Adarsh Tripathi}</p>
<div class="row">
<!---FIRST COLUMN--->
<div class="col-md-6 my-5">
<h3>Personal Information</h3>
<!--name-->
<div class="form-group mt-2"><label for="nameField">Your Name</label>
<input type="text" id="nameField" placeholder="Enter Your Name" class="form-control" />
</div>
<!--mobile number-->
<div class="form-group mt-2"><label for="mobileNoField">Your Mobile Number</label>
<input type="number" id="mobileNoField" placeholder="Enter Your Mobile No" class="form-control" />
</div>
<!--email address-->
<div class="form-group mt-2"><label for="emailField">Your Email Address</label>
<input type="text" id="emailField" placeholder="Enter Your Email Address" class="form-control" />
</div>
<!--address-->
<div class="form-group mt-2"><label for="addressField">Your Address</label>
<textarea rows="5" id="addressField" placeholder="Enter Your Address" class="form-control"></textarea>
</div>
<p class="text-secondary my-3">Social Links</p>
<!--social links linkedin-->
<div class="form-group mt-2"><label for="lkField">Linkedin URL</label>
<input type="text" id="lkField" placeholder="Linkedin URL" class="form-control" />
</div>
<!--social links facebook-->
<div class="form-group mt-2"><label for="fbField">Facebook URL</label>
<input type="text" id="fbField" placeholder="Facebook URL" class="form-control" />
</div>
<!--social links Instagram-->
<div class="form-group mt-2"><label for="instaField">Instagram URL</label>
<input type="text" id="instaField" placeholder="Instagram URL" class="form-control" />
</div>
</div>
<!---SECOND COLUMN--->
<div class="col-md-6 my-5">
<h3>Professionals Information</h3>
<!--objective-->
<div class="form-group mt-2"><label for="objectiveField">Objective</label>
<textarea id="objectiveField" rows="5" placeholder="Your Objective"
class="form-control"></textarea>
</div>
<!--work experience-->
<div class="form-group mt-2" id="workExperienceEle">
<label for="workExpField">Work Experience</label>
<textarea placeholder="Your Work Experience" rows="3" class="form-control workExpField"></textarea>
<!--new text area coming here dynamically using javascript-->
<!---->
<!---->
<div id="workExpAddBtn" class="container mt-3 align-center justify-center text-center">
<button onclick="addNewWorkExpFieFun()" class="btn btn-primary btn-sm">Add</button>
</div>
</div>
<!--academic qualifications-->
<div class="form-group mt-2" id="acadmQualificEle">
<label for="acadeQualiField">Academic Qualifications</label>
<textarea placeholder="Your Academic Qualifications" rows="3" class="form-control acadeQualiField"></textarea>
<!--new text area coming here dynamically using javascript-->
<!---->
<!---->
<div id="acadeQualiAddBtn" class="container mt-3 align-center justify-center text-center">
<button onclick="addNewAcaQuaFieFun()" class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
<div class="container text-center justify-center align-center my-3">
<button onclick="generateCvFun()" class="btn btn-secondary btn-lg-btn">Generate CV</button>
</div>
</div>
<!--CV TEMPLATE-->
<div class="container" id="cv-template">
<div class="row">
<!--First Column-->
<div class="col md-4 text-center py-5 background">
<img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"
class="img-fluid profile-img" alt="profile_image" title="profile_image">
<div class="container">
<p id="nameTempl1">Adarsh Tripathi</p>
<p id="contactTempl">+91 8595432208, +9315523287</p>
<p id="emailTempl">adarsh123@gmail.com</p>
<p id="addressTempl">B-139, Pandav Nagar New Delhi,110092</p>
<hr />
<p><a id="linkedinTempl" href="#">https://linkedin.com/adarshtiwari</a></p>
<p><a id="facebookTempl" href="#">https://facebook.com/adarshtiwari</a></p>
<p><a id="instagramTempl" href="#">https://instagram.com/adarshtiwari</a></p>
</div>
</div>
<!--Second Column-->
<div class="col-md-8 py-5">
<h1 id="nameTempl2" class="text-center font-weight-800">Adarsh Tripathi</h1>
<!--objective card-->
<div class="card">
<div class="card-header background">
<h3>Objective</h3>
</div>
<div class="card-body">
<p id="objectiveTempl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nemo dolorum sequi illum eaque cumque.</p>
</div>
</div>
<!--work experience card-->
<div class="card">
<div class="card-header background">
<h3>Work Experience</h3>
</div>
<div class="card-body">
<ul id="workExpTempl">
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, enim.</li>
<li>Vitae ea, in blanditiis cum fuga veniam nulla soluta corrupti!</li>
<li>In reiciendis velit officia earum? Velit error totam animi labore!</li>
</ul>
</div>
</div>
<!--academic qualifications card-->
<div class="card">
<div class="card-header background">
<h3>Academic Qualification</h3>
</div>
<div class="card-body">
<ul id="acadeQualiTempl">
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, enim.</li>
<li>Vitae ea, in blanditiis cum fuga veniam nulla soluta corrupti!</li>
<li>In reiciendis velit officia earum? Velit error totam animi labore!</li>
</ul>
</div>
</div>
<div class="container mt-3 text-center">
<button onclick="printCvFun()" class="btn btn-secondary">Print CV</button></div>
</div>
</div>
</div>
<!--boostrap js v5.1 link goes here-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<!--custom js link goes here-->
<script src="lecture30.js"></script>
</body>
</html>
FOllow me on Github