Skip to content

Commit e186796

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1090 from dev-AshishRanjan/ashish-dev
ADD : Resume Creator
2 parents dfefd77 + 99139ab commit e186796

8 files changed

Lines changed: 418 additions & 0 deletions

File tree

‎Projects/Resume Creator/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Resume Creator
2+
This project uses Basic HTML, CSS, JavaScript to create a basic Resume Creator, where you can create your resume and most important download the created Resume.
3+
4+
# Screenshots
5+
6+
|Edit view |Download View|
7+
|----- |----- |
8+
|![Edit](./Screenshot_20221224_150710.png)| ![Download](./Screenshot_20221224_150727.png)|

‎Projects/Resume Creator/Screenshot_20221224_150710.png‎

186 KB
Loading

‎Projects/Resume Creator/Screenshot_20221224_150727.png‎

128 KB
Loading

‎Projects/Resume Creator/app.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const form = document.querySelector("form");
2+
form.addEventListener("submit", handleSubmit);
3+
const name = document.getElementById("name");
4+
const email = document.getElementById("email");
5+
const phone = document.getElementById("phone");
6+
const github = document.getElementById("github");
7+
const linkedin = document.getElementById("linkedin");
8+
const degree = document.getElementById("degree");
9+
const college = document.getElementById("college");
10+
const Syear = document.getElementById("Syear");
11+
const Pyear = document.getElementById("Pyear");
12+
const cgpa = document.getElementById("cgpa");
13+
const skill = document.getElementById("skill");
14+
const project = document.getElementById("project");
15+
const project_description = document.getElementById("project_description");
16+
const link = document.getElementById("link");
17+
const company = document.getElementById("company");
18+
const designation = document.getElementById("designation");
19+
const duration = document.getElementById("duration");
20+
const company_description = document.getElementById("company_description");
21+
22+
function handleSubmit(e) {
23+
e.preventDefault();
24+
const name_resume = document.getElementById("name_resume");
25+
const email_resume = document.getElementById("email_resume");
26+
const phone_resume = document.getElementById("phone_resume");
27+
const github_resume = document.getElementById("github_resume");
28+
const linkedin_resume = document.getElementById("linkedin_resume");
29+
const degree_resume = document.getElementById("degree_resume");
30+
const college_resume = document.getElementById("college_resume");
31+
const Syear_resume = document.getElementById("Syear_resume");
32+
const Pyear_resume = document.getElementById("Pyear_resume");
33+
const cgpa_resume = document.getElementById("cgpa_resume");
34+
const skill_resume = document.getElementById("skill_resume");
35+
const project_resume = document.getElementById("project_resume");
36+
const project_description_resume = document.getElementById(
37+
"project_description_resume"
38+
);
39+
const link_resume = document.getElementById("link_resume");
40+
const company_resume = document.getElementById("company_resume");
41+
const designation_resume = document.getElementById("designation_resume");
42+
const duration_resume = document.getElementById("duration_resume");
43+
const company_description_resume = document.getElementById(
44+
"company_description_resume"
45+
);
46+
47+
name_resume.innerHTML = name.value;
48+
email_resume.innerHTML = email.value;
49+
phone_resume.innerHTML = phone.value;
50+
github_resume.innerHTML = github.value;
51+
linkedin_resume.innerHTML = linkedin.value;
52+
degree_resume.innerHTML = degree.value;
53+
college_resume.innerHTML = college.value;
54+
Syear_resume.innerHTML = Syear.value;
55+
Pyear_resume.innerHTML = Pyear.value;
56+
cgpa_resume.innerHTML = cgpa.value;
57+
skill_resume.innerHTML = skill.value;
58+
project_resume.innerHTML = project.value;
59+
project_description_resume.innerHTML = project_description.value;
60+
link_resume.innerHTML = "Link - " + link.value;
61+
company_resume.innerHTML = company.value;
62+
designation_resume.innerHTML = designation.value;
63+
duration_resume.innerHTML = duration.value;
64+
company_description_resume.innerHTML = company_description.value;
65+
}
66+
67+
function handleLeft() {
68+
const left = document.querySelector(".left");
69+
left.style.display = "none";
70+
const right = document.querySelector(".right");
71+
right.style.overflowY = "visible";
72+
right.style.width = "100%";
73+
const print = document.querySelector(".print");
74+
print.style.display = "block";
75+
}
76+
function handlePrint() {
77+
const right = document.querySelector(".right");
78+
window.print();
79+
const left = document.querySelector(".left");
80+
left.style.display = "flex";
81+
right.style.width = "70%";
82+
right.style.overflowY = "auto";
83+
const print = document.querySelector(".print");
84+
print.style.display = "none";
85+
}

‎Projects/Resume Creator/index.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Resume Creator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<main>
12+
<div class="left">
13+
<form>
14+
<div class="form_rows">
15+
<label for="name">Name : </label>
16+
<input type="text" id="name" placeholder="name">
17+
</div>
18+
<div class="form_rows">
19+
<label for="email">Email : </label>
20+
<input type="email" id="email" placeholder="Email">
21+
</div>
22+
<div class="form_rows">
23+
<label for="phone">Phone : </label>
24+
<input type="text" id="phone" placeholder="Phone">
25+
</div>
26+
<div class="form_rows">
27+
<label for="github">Github : </label>
28+
<input type="text" id="github" placeholder="Github">
29+
</div>
30+
<div class="form_rows">
31+
<label for="linkedin">Linkedin : </label>
32+
<input type="text" id="linkedin" placeholder="Linkedin">
33+
</div>
34+
<fieldset>
35+
<legend>Education</legend>
36+
<div class="form_rows">
37+
<label for="degree">Degree : </label>
38+
<input type="text" id="degree" placeholder="Degree">
39+
</div>
40+
<div class="form_rows">
41+
<label for="college">College : </label>
42+
<input type="text" id="college" placeholder="College">
43+
</div>
44+
<div class="form_rows">
45+
<label for="Syear">Starting Year : </label>
46+
<input type="text" id="Syear" placeholder="Starting Year">
47+
</div>
48+
<div class="form_rows">
49+
<label for="Pyear">Passing Year : </label>
50+
<input type="text" id="Pyear" placeholder="Passing Year">
51+
</div>
52+
<div class="form_rows">
53+
<label for="cgpa">CGPA : </label>
54+
<input type="text" id="cgpa" placeholder="CGPA">
55+
</div>
56+
</fieldset>
57+
<fieldset>
58+
<legend>Skills</legend>
59+
<div class="form_rows">
60+
<label for="skill">Skills : </label>
61+
<textarea name="skill" id="skill" rows="4" cols="20" placeholder="Skills eg. HTML , CSS"></textarea>
62+
</div>
63+
</fieldset>
64+
<fieldset>
65+
<legend>Projects</legend>
66+
<div class="form_rows">
67+
<label for="project">Project : </label>
68+
<input type="text" id="project" placeholder="Project">
69+
</div>
70+
<div class="form_rows">
71+
<label for="description">Description : </label>
72+
<textarea name="description" id="project_description" rows="4" cols="20" placeholder="Write in HTML format"></textarea>
73+
</div>
74+
<div class="form_rows">
75+
<label for="link">Link : </label>
76+
<input type="text" id="link" placeholder="Link">
77+
</div>
78+
</fieldset>
79+
<fieldset>
80+
<legend>Experience</legend>
81+
<div class="form_rows">
82+
<label for="company">Company : </label>
83+
<input type="text" id="company" placeholder="Company">
84+
</div>
85+
<div class="form_rows">
86+
<label for="designation">Designation : </label>
87+
<input type="text" id="designation" placeholder="Designation">
88+
</div>
89+
<div class="form_rows">
90+
<label for="duration">Duration : </label>
91+
<input type="text" id="duration" placeholder="Duration">
92+
</div>
93+
<div class="form_rows">
94+
<label for="description">Description : </label>
95+
<textarea name="description" id="company_description" rows="4" cols="20" placeholder="Write in HTML format"></textarea>
96+
</div>
97+
</fieldset>
98+
<button type="submit" class="btn">submit</button>
99+
<button type="reset" class="btn">reset</button>
100+
<button class="btn" onclick="handleLeft()">View & Print</button>
101+
</form>
102+
</div>
103+
<div class="right">
104+
<div class="block1">
105+
<h1 id="name_resume"></h1>
106+
<div class="Header">
107+
<p id="email_resume"></p>|
108+
<p id="phone_resume"></p>|
109+
<p id="github_resume"></p>|
110+
<p id="linkedin_resume"></p>
111+
</div>
112+
</div>
113+
<div class="block2">
114+
<h2>Education</h2>
115+
<h3 id="college_resume"></h3>
116+
<h4 id="degree_resume"></h4>
117+
<div>
118+
<p id="Syear_resume"></p>-
119+
<p id="Pyear_resume"></p>
120+
</div>
121+
<div>
122+
<p>CGPA : </p>
123+
<h5 id="cgpa_resume"></h5>
124+
</div>
125+
</div>
126+
<div class="block3">
127+
<h2>Skills</h2>
128+
<h3 id="skill_resume"></h3>
129+
</div>
130+
<div class="block4">
131+
<h2>Project</h2>
132+
<h3 id="project_resume"></h3>
133+
<h3 id="project_description_resume"></h3>
134+
<h3 id="link_resume"></h3>
135+
</div>
136+
<div class="block5">
137+
<h2>Experience</h2>
138+
<h3 id="designation_resume"></h3>
139+
<h3 id="company_resume"></h3>
140+
<h3 id="duration_resume"></h3>
141+
<h3 id="company_description_resume"></h3>
142+
</div>
143+
<button class="btn print" onclick="handlePrint()">Print</button>
144+
</div>
145+
</main>
146+
<script src="./app.js"></script>
147+
</body>
148+
</html>

0 commit comments

Comments
 (0)