css-micro_project abhi

INDEX
01 Abstract
02 Introduction
03 User Requirement Analysis
04 Resources used / languages / Frameworks
05 Design
06 Code and Result
07 Useful links
Abstract
Resume Generator is a web-based application developed using JavaScript. The
project is used for generating resume. It contains two forms one is for user to
take input from user after the user takes all the data from the user the first from
will hide and second visible it will contain all the data entered by user in a well-
structured format now the user will also be able to print that format. This is how
to project works basically. It is build using the basic concepts of JavaScript and
the structure this project and proper design we have user HTML5, CSS3 and
Bootstrap 4.
Introduction
It is an application that simplifies the task of creating a resume for individuals.
The system is flexible to be used and reduces the need of thinking and
designing an appropriate resume according to qualifications. The system is
developed to provide an easy means for creating a professional looking resume.
Individuals just must fill up a form that specifies questions from all required
fields such as personal questions, educational, qualities, interest, skills and so
on. The answers provided by the users are stored and the system automatically
generates a well-structured resume. Users have option to create resume in any
format and file.
User Requirement Analysis

We briefly studied before starting our project the user requirements so the basic
requirement of user for the resume generator was basic info (name, phone
number, Address). Social Links (Facebook, Instagram, LinkedIn). Some
professional information for the user which contains objective, work experience
and academic qualifications.
Resources used / Languages and Frameworks

VS-Code Editor
HTML5
CSS3
Bootstrap 4
Design
Desktop View:
Mobile view:
Code & Output
HTML Code:
<!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">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght@300&display=swap" rel="stylesheet">

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65Vohhp
uuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Resume Generator</title>
</head>
<body>
<div class="container" id="cv-form">
<h1 class="text-center my-2">Resume Generator</h1>

<div class="row">
<div class="col-md-6">
<h3>personal information</h3>
<div class="form-group mt-3">
<label for="nameField">* Your Name</label>
<input type="text" id="nameField" class="form-control" placeholder="write
your name..">
</div>
<label for="contactField">* Your Phone no.</label>
<input type="text" id="contactField" class="form-control"
placeholder="91xxxxxxx">
</div>
<label for="addressField">* Your Address</label>
<textarea type="text" id="addressField" class="form-control" rows="5"
placeholder="enter here..."></textarea>
</div>
<p class="text-secondary my-3">Important Links</p>

<label for="fbField">Facebooks</label>
<input type="text" id="fbField" class="form-control" placeholder="fb accoun
here..">
</div>
<label for="instaField">Instagram</label>
<input type="text" id="instaField" class="form-control" placeholder="">
</div>
<label for="linkedField">Linkdin</label>
<input type="text" id="linkedField" class="form-control" placeholder="">
</div>
</div>
<div class="col-md-6">
<h3>Professional information</h3>
<div class="form-group mt-3" id="we">
<label for="">Objective</label>
<textarea type="text" id="objectiveField" class="form-control" rows="5"
<label for="">Work Experince</label>

<textarea type="text" class="form-control weField" rows="3"

<div class="container text-center mt-3 " id="weAddButton">

<button onclick="addNewWEField()" class="btn btn-primary btn-
sm">Add</button>
</div>
</div>
<div class="form-group mt-3 " id="aq">

<label for="">Academic Qulaification</label>
<textarea type="text" class="form-control eqField" rows="3" placeholder="enter
here..."></textarea>
<div class="container text-center mt-3" id="aqAddButton">

<button onclick="addNewAQField()" class="btn btn-primary btn-
sm">Add</button>
</div>
</div>
</div>
</div>
<div class="container text-center my-3">
<button onclick="generateCV()" class="btn btn-primary btn-lg">Generate
CV</button>
</div>
</div>

<div class="container" id="cv-template">
<div class="row">
<div class="col-md-4 text-center py-5 background">

<img src="images/default.jpg" alt="" class="img-fluid myImg">
<div class="container">
<p id="nameT1">Kunal Bandale</p>
<p id="contactT">+91233434343</p>
<p id="addressT">nanded city,India</p>
<hr>
<p><a id="fbT" href="#">facebook</a></p>
<p><a id="instaT" href="#">instagram</a></p>
<p><a id="linkedT" href="#">Linkdin</a></p>
</div>
</div>
<div class="col-md-8 py-5">


<h1 id="nameT2" class="text-center" style="font-weight: 900;">Kunal
bandale</h1>


<div class="card mt-4">
<div class="card-header">
<h3>Objective</h3>
</div>
<div class="card-body">
<p id="objectiveT">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eaque atque et unde!
Suscipit minima
maiores laboriosam a, vitae commodi itaque, ea omnis id voluptates autem,
soluta veritatis
perspiciatis. Magni, aspernatur?</p>
</div>
</div>


<h3>Work Experince</h3>
</div>
<ul id="weT">
<li>lorem isum</li>
<li>lorem isum</li>
<li>lorem isum</li>
<li>lorem isum</li>
<li>lorem isum</li>
</ul>
</div>
</div>


<h3>Work Experince</h3>
</div>
<ul id="aqT">
<li>lorem isum</li>
<li>lorem isum</li>
<li>lorem isum</li>
<li>lorem isum</li>
<li>lorem isum</li>
</ul>
</div>
</div>
<div class="container mt-3 text-center">

<button onclick="printCV()" class="btn background">Print CV</button>
</div>
</div>
</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
<script src="index.js"></script>
</body>
</html>
CSS CODE:
/* #cv-form {
display: none;
} */
/* cv template */
#cv-template {
display: none;
}
.myImg {
border-radius: 50%;
width: 200px;
}
.background {
background-color: aqua;
}
h3 {
text-decoration:underline;
color:blueviolet;
}
h1 {
color: cornflowerblue;
font-weight: bolder;
}
JS CODE:
function addNewWEField() {
let newNode = document.createElement("textarea");
newNode.classList.add("form-control");
newNode.classList.add("weField");
newNode.classList.add("mt-3");
newNode.setAttribute("placeholder", "Enter here..");
newNode.setAttribute("rows", 3);
let weOb = document.getElementById("we");

let weAddButtonOb = document.getElementById("weAddButton");
weOb.insertBefore(newNode, weAddButtonOb);
}
function addNewAQField() {
let newNode = document.createElement("textarea");
newNode.classList.add("form-control");
newNode.classList.add("eqField");
newNode.classList.add("mt-3");
newNode.setAttribute("placeholder", "Enter here..");
newNode.setAttribute("rows", 3);
let aqOb = document.getElementById("aq");

let aqAddButtonOb = document.getElementById("aqAddButton");
aqOb.insertBefore(newNode, aqAddButtonOb);
}
// generating CV
function generateCV() {
let nameField = document.getElementById("nameField").value;
let nameT1 = document.getElementById("nameT1");
nameT1.innerHTML = nameField
// direct
document.getElementById("nameT2").innerHTML = nameField;
// contact
document.getElementById("contactT").innerHTML =
document.getElementById("contactField").value;
// address
document.getElementById("addressT").innerHTML =
document.getElementById("addressField").value;
// links
document.getElementById("fbT").innerHTML =
document.getElementById("fbField").value;
document.getElementById("instaT").innerHTML =
document.getElementById("instaField").value;
document.getElementById("linkedT").innerHTML =
document.getElementById("linkedField").value;
// objective
document.getElementById("objectiveT").innerHTML =
document.getElementById("objectiveField").value;
// work exp..
let wes = document.getElementsByClassName("weField");
let str = "";
for (let e of wes) {

str = str + `<li> ${e.value} </li>`;
}
document.getElementById("weT").innerHTML = str;
// acdemic qulaification
let aqs = document.getElementsByClassName("eqField");
let str1 = "";
for (let e of aqs) {

str1 += `<li> ${e.value} <li>`;
}
document.getElementById("aqT").innerHTML = str1;
// -------------
if (nameField == "" || addressT == "") {

alert("Fill the Fields which are Marked");
return false;
}
var ph = /^\d{10}$/;
if((contactField.value.match(ph))) {
document.getElementById("cv-template").style.display = "block";
document.getElementById("cv-form").style.display = "none";
return true
} else {
alert("Please Enter a valid Phone Number");
}
// printcv
function printCV() {
window.print();
}
OUTPUT:
Useful Links
View snapshots on web

https://i.imgur.com/rxla34V.png
https://i.imgur.com/hcpDouQ.png
https://i.imgur.com/kwZTA0u.png
https://i.imgur.com/GAHh38N.png
https://i.imgur.com/mkEilIG.png
Project Code
https://github.com/kunalbandale/cv-generator
View Website on Web

https://kunalbandale.github.io/cv-generator/

css-micro_project abhi

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

css-micro_project abhi

Uploaded by

Copyright:

Available Formats

INDEX

03 User Requirement Analysis

04 Resources used / languages / Frameworks

06 Code and Result

User Requirement Analysis

Resources used / Languages and Frameworks

<p class="text-secondary my-3">Important Links</p>

<label for="">Work Experince</label>

<div class="container text-center mt-3 " id="weAddButton">

<div class="form-group mt-3 " id="aq">

<div class="container text-center mt-3" id="aqAddButton">

<div class="col-md-8 py-5">

<div class="container mt-3 text-center">

let weOb = document.getElementById("we");

let aqOb = document.getElementById("aq");

let nameT1 = document.getElementById("nameT1");

for (let e of wes) {

for (let e of aqs) {

if (nameField == "" || addressT == "") {

View snapshots on web

View Website on Web

You might also like