AJAY KUMAR GARG ENGINEERING COLLEGE

27 KM STONE DELHI HAPUR BYPASS ROAD, P.O. ADHYATMIC

NAGAR GHAZIABAD-201009

AN
INTERNSHIP TRAINING REPORT
ON
WEB DEVELOPMENT

SUBMITTED BY: SUBMITTED TO:

AMIT KUMAR Dr SONAM GUPTA
(2100270120015)
 AJAY KUMAR GARG ENGINEERING COLLEGE
27 KM STONE DELHI HAPUR BYPASS ROAD, P.O. ADHYATMIC
NAGAR GHAZIABAD-201009

CERTIFICATE

This is to certify that Amit Kumar student of Ajay Kumar Garg Engineering College
B.Tech 3rd year CS Branch, has undergone Internship Training in FREE CODE CAMP with
Struts from 26th August to 19th October(7 weeks).

Dr Sonam Gupta Dr. RAJESH

PRASHAD
Faculty Internship Assessment Lab H.O.D., CSE
 ABSTRACT
A resume builder website is an online resume-building tool that provides
different resume templates to which you can add your information. The
builder then uses this information to develop a resume that you can save
and use to apply for jobs. resume builder is an online tool that you can
use to quickly create a resume. Resume builders allow you to pick a pre-
formatted resume template, fill in your contact and background
information, and select pre-written work history bullet points — saving
you a lot of time.
 ACKNOWLEDGEMENT

I extend my sincere gratitude to Dr. Sonam Gupta Mam, for providing

me with the right guidance and advice at the crucial junctures and for
showing me the right way. Most importantly, I’m grateful to our
respected Head of the Department Dr. Anu Chaudhary Sir for
allowing me to use the facilities available.
I would also like to express my appreciation to my colleagues and the
staff at for their warm welcome and assistance during my internship. It
was a pleasure to work with such a talented and supportive team.
[Free Codecamp]

Amit Kumar
(2100270120015)
 CONTENTS

Topic Page No.

Internship Topic Name i

Internship Certificate ii

Abstract iii

Acknowledgement iv

List of Figures v

Chapter 1: Introduction to Organisation 1

Chapter 2: Software Traning Work Undertaken 2

Chapter 3: Internship Training Work Undertaken 3

Chapter 4; Project Work 5

Chapter 5: Results and Declarations 14

Chapter 6: Conclusion 15

REFERENCES 16
 CHAPTER 1
INTRODUCTION TO ORGANISATION

This internship work has been undertaken as a requirement for 7 weeks (300 hours) of
industrial training at Ajay Kumar Garg Engineering College, Ghaziabad for the award of a
degree of B.Tech.(Computer Science).

Ajay Kumar Garg Engineering college was set up in Ghaziabad, Uttar Pradesh in the year 1998.
AKGEC is affiliated with Dr A.P.J. Abdul Kalam Technical University offers B.Tech.,
M.Tech. and MCA programs in several specializations. The college is ISO certified by British
Standards Institution, UK, and offers programs that are approved by AICTE.

The organization’s vision is to introduce undergraduate and postgraduate courses for all
engineering branches and award of PhD degree to be one of the best engineering colleges in
the country and to be a deemed university.

The organization’s mission statement is to provide and maintain academic environments

and systems, enabling maximum learning to produce competent professionals.

I chose this organization because I find its mission to be important and relevant to my career
goals.
 CHAPTER 2
SOFTWARE TRAINING WORK UNDERTAKEN

2.1. Background of the Training:

The training is covering Web Development technology and struts which are used for a web
application. Java Servlets pages HTML,CSS,Javascript is a technology for developing web
pages that support dynamic content. This helps developers insert Javascript code in HTML
pages by making use of special JS tags. Reactjs is a popular and mature web application
framework based on JavaScript. At the end of the course, students are required to do mini
projects based on this technology. The internship covers JS framework.

2.2. Introduction:
JavaScript is a scripting language used to develop web pages. Developed in
Netscape, JS allows developers to create a dynamic and interactive web page
to interact with visitors and execute complex actions. It also enables users to
load content into a document without reloading the entire page.
JavaScript is a multi-paradigm, dynamic language with types and operators, standard built-in
objects, and methods. Its syntax is based on the Java and C languages — many structures from
those languages apply to JavaScript as well.
How to write JavaScript-
1. Use Arrow Functions. Using Arrow functions is a shorthand way for creating functions in
JavaScript.
2.Use Descriptive Variable Names.
3.Use Functional Programming.
4.Avoid Nesting Code.
5.Use Default Parameters.
6.Use Destructuring.
7.Use Promises. ...
8.Use Array Methods.

CHAPTER 3
INTERNSHIP TRAINING WORK UNDERTAKEN

3.1 Overview:
A resume builder website is an online resume-building tool that provides
different resume templates to which you can add your information. The
builder then uses this information to develop a resume that you can save
and use to apply for jobs. resume builder is an online tool that you can
use to quickly create a resume. Resume builders allow you to pick a pre-
formatted resume template, fill in your contact and background
information, and select pre-written work history bullet points — saving
you a lot of time.
3.2 Aims and Objective:
The aim of a resume building website is to provide users with a platform to create and manage
their resumes with ease. These websites typically offer customizable templates, career-specific
writing guides, and advanced features like keyword search and matching. They aim to help job
seekers showcase their skills and experience in a professional and visually appealing manner,
ultimately enhancing their chances of getting noticed by potential employers.

3.3 Technologies Used:

● HTML, CSS
● JavaScript
 CHAPTER 4
PROJECT WORK

HTML Code-

<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Resume/CV Builder</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet"

integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxl
pbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/
all.min.css" />
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div class="nav">
<button id="cmd" onclick="printpdf()" class="navbtn"><i
class="fas fa-download"></i></button>
<form>
<input type="hidden" id="custinfo" name="custinfo">
<button class="navbtn"><i class="fas fa-save"></i></button>
</form>
<button class="navbtn" href=""><i class="fas fa-
home"></i></button>
</div>

<div class="resume" id="resume">

<section id="print">
<div class="head">
<div class="main">
 <span class="name" contenteditable="true">YOUR</span>
<span contenteditable="true">NAME</span>
<div class="post" contenteditable="true">YOUR JOB
PROFILE</div>
</div>
<div class="contacts">
<span contenteditable="true" class="content">231-
3212-2132</span><span class="symbol"> <i
class="fas fa-phone"></i></span><br>
<span contenteditable="true"
class="content">[email protected]</span><span class="symbol"> <i
class="fas fa-envelope"></i></span><br>
<span contenteditable="true"
class="content">linkedin/username.com</span><span class="symbol"> <i
class="fab fa-linkedin"></i></span><br>
<span contenteditable="true" class="content">sample
street-India</span><span class="symbol"> <i
class="fas fa-map-marker-alt"></i></i></span>
</div>
</div>

<div class="line"></div>
<div class="mainbody">
<div class="leftside">
<span class="title">MY SKILLS</span><br><br>
<div>
<div class="skill"><span><input type="checkbox"
class="input-checkbox"></span><span><i
class="fas fa-chevron-circle-
right"></i></span> <span contenteditable="true">write
your skill here</span></div>
<div id="skills"></div>
<button id="skilladd" type="button" class="btn
btn-success" onclick="addskill()"><i
class="fas fa-plus-circle"></i>
Skill</button>
<button id="skillrem" type="button" class="btn
btn-danger" onclick="remskill(event)"><i
class="fas fa-minus-circle"></i>
Skill</button>
</div>
<br><br><span class="title">LANGUAGES</span><br><br>
<div>
<div class="language"><span><input
type="checkbox" class="input-checkbox"></span><span
 contenteditable="true">LANGNAME</span> -
<span contenteditable="true">level u
know</span></div>
<div id="languages"></div>
<button id="langadd" type="button" class="btn
btn-success" onclick="addLang()"><i
class="fas fa-plus-circle"></i>
Language</button>

<button id="langrem" type="button" class="btn

btn-danger" onclick="remLang(event)"><i
class="fas fa-minus-circle"></i>
Language</button>
</div>
<br><br><span
class="title">ACHIEVEMENTS</span><br><br>
<div>
<div class="achieve"><span><input type="checkbox"
class="input-checkbox"></span><span
contenteditable="true">Write your
achievement</span></div>
<div id="achievement"></div>
<button id="achadd" type="button" class="btn btn-
success" onclick="addAch()"><i
class="fas fa-plus-circle"></i>
Achievement</button>

<button id="achrem" type="button" class="btn btn-

danger" onclick="remAch(event)"
style="margin-top: 0;"><i class="fas fa-
minus-circle"></i> Achievement</button>
</div>
<br><br><span class="title">INTERESTS</span><br><br>
<div>
<div class="achieve"><span><input type="checkbox"
class="input-checkbox"></span><span
contenteditable="true">Write
interest</span></div>
<div id="interest"></div>
<button id="Intadd" type="button" class="btn btn-
success" onclick="addInt()"><i
class="fas fa-plus-circle"></i>
Interest</button>

<button id="Intrem" type="button" class="btn btn-

danger" onclick="remInt(event)"><i
 class="fas fa-minus-circle"></i>
Interest</button>
</div>
</div>

<div class="border"></div>
<div class="rightside">
<span class="title">PROFILE</span><br><br>
<div contenteditable="true">
Here u can write the basic information about your
career like your forte, something about
yourself that
you want your interviewer to know. Try to keep it
brief and only provide necessary information.
Do not include information which is
already written in your resume in some other
section.</div>
<br><br><span class="title">EDUCATION</span><br><br>
<div>
<div id="education">
<div class="edublock">
<span><input type="checkbox"
class="input-checkbox"></span>
<span class="education-head"
contenteditable="true">YOUR DEGREE</span>
<div><span
contenteditable="true">Institute name</span> - <span
contenteditable="true">Passing
Year</span></div>
</div>
</div>

<button id="eduadd" type="button" class="btn btn-

success" onclick="addedu()"><i
class="fas fa-plus-circle"></i>
Education</button>

<button id="edurem" type="button" class="btn btn-

danger" onclick="remedu(event)"><i
class="fas fa-minus-circle"></i>
Education</button>
</div>
<br><br>
<div class="new-section-div">
<div><span><input type="checkbox" class="input-
checkbox"></span><span class="title"
 contenteditable="true">NEW
SECTION</span><br><br>
<div contenteditable="true">
This is the description part of your new
section. Try to stay within limit and write
something which has less
than 400 characters. The spaces and
symbols you use will also be included so use them
for an indentation effect.</div>
</div>

<div id="newsec"></div>
<button id="secadd" type="button" class="btn btn-
success" onclick="addsec()"><i
class="fas fa-plus-circle"></i>
Section</button>

<button id="secrem" type="button" class="btn btn-

danger" onclick="remsec(event)"><i
class="fas fa-minus-circle"></i>
Section</button>
</div>
</div>
</section>
</div>
</body>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bu
ndle.min.js"></script>
<script src="script.js"></script>

</html>

CSS Code-
@import url('https://fonts.googleapis.com/css2?
family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?
family=Barlow:wght@500&display=swap');

* {
margin: 0%;
padding: 0%;
 font-weight: 500;
font-size: 14px;
}

body {
background: linear-gradient(135deg, #E3E3E3 0%, #9a9a9a 100%);
display: grid;
place-items: center;
font-weight: 450;
opacity: 1;
}

.none {
display: none;
}

.resume {
margin-top: 20px;
width: 800px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1)
0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

#print {
background-color: #fff;
padding: 30px 50px;
height: 1120px;

.head {
display: grid;
grid-template-columns: 3fr 1.5fr;
}

.head .main .name {

font-size: 55px;
font-family: 'Raleway', sans-serif;
}

.head .main span:nth-child(2) {

color: rgb(100, 100, 100);
font-size: 55px;
font-family: 'Raleway', sans-serif;
margin-left: 5px;
}
.head .main .post {
font-family: 'Barlow', sans-serif;
}

.head .contacts {
text-align: right;
padding-top: 7px;
}

.head .contacts .content {

font-weight: 500;
padding-right: 5px;
}

.head .contacts .symbol {

margin-right: 5px;
font-size: 15px;
width: 17px;
height: 17px;
}

.line {
height: 0.5px;
background-color: rgb(87, 87, 87);
margin: 25px 0;
margin-bottom: 50px;
}

.mainbody {
display: grid;
grid-template-columns: 10fr 1fr 17fr;
height: 900px;
}

.mainbody .border {
background-color: rgb(87, 87, 87);
width: 3px;
opacity: 2;
}

.mainbody .rightside {
padding-left: 15px;
}

.title {
 font-weight: 700;
font-size: 18px;
border: none;
padding-bottom: 3px;
border-bottom: 2px greenyellow solid;
}

.skill {
margin-bottom: 6px;
}

button {
margin: 15px 0;
}

.language {
margin-bottom: 6px;
}

.language span:nth-child(odd) {
font-weight: 700;
}

.edublock {
margin-bottom: 10px;
}

.edublock .head {
font-weight: 700;
font-size: 17px;
}

.navbtn {
position: fixed;
top: 40%;
left: 4%;
transform: translate(-40%, -4%);
height: 60px;
width: 60px;
border-radius: 50%;
border: #fff 2px solid;
transition: 300ms ease-in-out;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1)
0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.navbtn:nth-child(2) {
top: 50%;
left: 4.4%;
transform: translate(-50%, -4.4%);
}

.navbtn:nth-child(3) {
top: 60%;
left: 4.8%;
transform: translate(-60%, -4.8%);
}

.navbtn:hover {
background-color: black;
color: #fff;
border: #000 2px solid;
height: 65px;
width: 65px;
}

.input-checkbox {
margin-right: 10px;
}

.education-head {
font-weight: 700;
font-size: 17px;
}

JavaScript Code-
function printpdf() {
var content = document.getElementById("resume");

const allButtons = document.querySelectorAll("#print button");

allButtons.forEach(button => {
button.classList.add("none");
});
let allInputCheckboxes = document.querySelectorAll(".input-
checkbox");
allInputCheckboxes.forEach(input => {
input.classList.add("none");
})

allButtons.forEach(button => {
button.classList.remove("none");
})
 allInputCheckboxes.forEach(input => {
input.classList.remove("none");
})

html2pdf(content, {
html2canvas: { scale: 1, logging: true, dpi: 500 }
});
}

function addedu() {
const head = document.createElement('div');
document.getElementById("education").appendChild(head);
head.innerHTML = ('<div class="edublock"><span><input type="checkbox"
class="input-checkbox"></span><span class="education-head"
contenteditable="true">YOUR DEGREE</span><div ><span
contenteditable="true">Institute name</span> - <span
contenteditable="true">Passing Year</span></div></div>');
saveresume();
}
function remedu(event) {
let val = 0;
let empty = true;
const allInputCheckboxes =
event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the
required field!")
}
saveresume();
}

function addskill() {
const head = document.createElement('div');
document.getElementById("skills").appendChild(head);
 head.innerHTML = ('<div class="skill"><span><input type="checkbox"
class="input-checkbox"></span><span><i class="fas fa-chevron-circle-
right"></i></span> <span contenteditable="true">write your skill
here</span></div>');
saveresume();
}

function remskill(event) {
let val = 0;
const allInputCheckboxes =
event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the
required field!")
}
saveresume();
}

function addLang() {
const head = document.createElement('div');
document.getElementById("languages").appendChild(head);
head.innerHTML = ('<div class="language"><span><input type="checkbox"
class="input-checkbox"></span><span
contenteditable="true">LANGNAME</span> - <span
contenteditable="true">level u know</span></div>');
saveresume();
}
function remLang(event) {
let val = 0;
const allInputCheckboxes =
event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
 }
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the
required field!")
}
saveresume();
}

function addAch() {
const head = document.createElement('div');
document.getElementById("achievement").appendChild(head);
head.innerHTML = ('<div class="achieve" ><span><input type="checkbox"
class="input-checkbox"></span><span contenteditable="true">Write your
achievement</span></div>');
saveresume();
}
function remAch(event) {
let val = 0;
const allInputCheckboxes =
event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the
required field!")
}
saveresume();
}
function addInt() {
const head = document.createElement('div');
document.getElementById("interest").appendChild(head);
head.innerHTML = ('<div class="achieve" ><span><input type="checkbox"
class="input-checkbox"></span><span contenteditable="true">Write
interest</span></div>');
saveresume();
}
function remInt(event) {
let val = 0;
const allInputCheckboxes =
event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the
required field!")
}
saveresume();
}

let maxNewSection = 1;
function addsec() {
if (maxNewSection < 2) {
const head = document.createElement('div');
document.getElementById("newsec").appendChild(head);
if (maxNewSection === 0) {
head.innerHTML = ('<div><span><input type="checkbox"
class="input-checkbox"></span><span class="title"
contenteditable="true">NEW SECTION</span><br><br><div
contenteditable="true">This is the description part of your new section.
Try to stay within limit and write something which has less than 400
characters. The spaces and symbols you use will also be included so use
them for an indentation effect.</div></div>');
}
else {
head.innerHTML = ('<div><br><br><span><input type="checkbox"
class="input-checkbox"></span><span class="title"
contenteditable="true">NEW SECTION</span><br><br><div
contenteditable="true">This is the description part of your new section.
Try to stay within limit and write something which has less than 400
characters. The spaces and symbols you use will also be included so use
them for an indentation effect.</div></div>');
}

maxNewSection = maxNewSection + 1;
}
else {
alert("Atmost 2 NEW SECTION can be added!")

}
saveresume();
}
function remsec(event) {
let val = 0;
const allInputCheckboxes =
event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
maxNewSection = maxNewSection - 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the
required field!")
}
saveresume();
}

function saveresume() {
var sec = document.getElementById("print");
value1 = sec.innerHTML;
var info = document.getElementById("custinfo");
info.value = value1;
}

Output:
 FIG
1.1
 FIG
1.2
 CHAPTER 5
RESULTS AND DISCUSSION

After we completed the project we were sure the problems in the existing system
are overcome. The “Resume Builder Website” process was made computerized
to reduce human error and to increase efficiency. The main focus of this project
is to lessen human efforts. The editing is also made simpler. The user has to just
type in the information.

The problem which existed has been removed to a large extent. And it is expected
that this project will go a long way on satisfying. User’s requirements. The
computerized version of Resume Builder Website will not only improve
efficiency but will also reduce human work thereby indirectly improving
efficiency.
 CHAPTER 6
CONCLUSION

A conclusion resume builder is an online tool that helps users create a professional
and concise summary of their work experience, skills, and achievements. This
section of a resume provides a brief overview of the candidate's qualifications and
interests, and is a crucial part of job applications. Our website provides prompts to
help users write an effective conclusion, including LinkedIn, Indeed Resumes, and
ResumeBuilder.com. It's important to tailor the conclusion to the specific job and
industry to ensure it highlights the most relevant and compelling information to
potential employers.
 REFERENCES

1. W3School
2. CodeWithHarry Youtube Channel
3. Udemy

CERTIFICATE