A Project Report on

RESUME BUILDER
WEB AAPLICATOIN

Based on the course-

“JAVASCRIPT ESSENTIALS”
Through
CISCO- NETACAD

Submitted in partial fulfillment of award of

BACHELOR OF TECHNOLOGY
Degree
In
Computer Science and Engineering
by-

Anuj Singh (2000820100024)

Himanshu Singh (2000820100056)

Under the Guidance of

Mr. Anurag Malik
(Assoc. Professor, CS&E)
Mr. Sanjeev Gupta
(Asst. Professor, CS&E)

DEPARTMENTOF COMPUTER SCIENCEAND ENGINEERING

MORADABAD INSTITUTE OF TECHNOLOGY, MORADABAD (U.P.)
SESSION 2022-23
 2

CERTIFICATES

1.

2.
 3

ABSTRACT

This report showcases the skills and knowledge acquired by us during our 12

week course titled, ‘Introduction to machine learning’ offered through

NPTEL.

The course was about javascript, its various paradigms and extensions its

practical applications and modern day uses. The course covered theoretical

concepts and gave practical idea on implementation and use of JS.

The chosen project, resume builder uses ReactJS to deploy a free resume

building web application with various attractive templates.

A resume is a document used by individuals to present their background and

skill sets. A resume also spelled resume or resume also called curriculum

vitae or CV. A document that has a brief summary or listing about relevant

education and experience

 4

ACKNOWLEDGEMENT

We want to express our sincere gratitude and thanks to Mr. Manish

Gupta (H.O.D., CSE), Moradabad Institute of technology, Moradabad for

granting us permission for our industrial training in field of “JavaScript”.

We express our sincere thanks to Mr. Anurag Malik and Mr. Sanjeev Gupta

for their cooperative attitude and consistence guidance, due to which we were

able to complete our training successfully.

Finally, we pay our thankful regards and gratitude to the team members

and technicians of Cisco – Netacad for their valuable help, support and

guidance.

Anuj Singh Himanshu Singh

(2000820100024) (2000820100056)
 5

TABLES OF CONTENTS

Content Page No.

Abstract……………………………………………….……..……………iii
Table of contents……………………………………………………..……v
List Of Figures……………………………………………………..……..vi
1.1 Overview………………………………………………………………7
1.2 History of JavaScript………………………………….…………........8
1.3 Features of JavaScript………………………………...………….…....9
1.4 HTML & CSS…………………………………….…….….…………10
CHAPTER 2. REQUIREMENT SPECIFICATION …….……..….....11
2.1 Outline……………………………………………….……………..…11
2.2 Purpose…………………………………………….……….................12
2.3 Future Scope………………………………….……….………………12
CHAPTER 3. METHODOLOGY………………………...…………....13
CHAPTER 4. SOURCE CODE…………………………….……….….14
CHAPTER 5. TESTING AND RESULT DISCUSSION…….…….....34
REFERENCES……………………………………………….……...….37
 6

LIST OF FIGURES

Content Page No.

Figure 5.1 Interface of website……………………………………………34

Figure 5.2 Fields for entering data……..…….……………………………35

Figure 5.3 Entered data in fields………….…..…..………………….……35

Figure 5.4 Prepared Resume…………………...…………………….…...36

 7

CHAPTER 1
INTRODUCTION

1.1 OVERVIEW

JavaScript (js) is a light-weight object-oriented programming language which is used by

several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other graphical web
browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses js to provide several
forms of interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name was
suggested and provided in the times when Java was gaining popularity in the market. In
addition to web browsers, databases such as CouchDB and MongoDB uses JavaScript as
their scripting and query language.

JS, is a programming language that is one of the core technologies of the World Wide
Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client
side for webpage behavior, often incorporating third-party libraries. All major web
browsers have a dedicated JavaScript engine to execute the code on users' devices.

JavaScript is a high-level, often just-in-time compiled language that conforms to the

ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-
class functions. It is multi-paradigm, supporting event-driven, functional, and imperative
programming styles. It has application programming interfaces (APIs) for working with
text, dates, regular expressions, standard data structures, and the Document Object Model
(DOM).
 8

The ECMAScript standard does not include any input/output (I/O), such as networking,
storage, or graphics facilities. In practice, the web browser or other runtime system
provides JavaScript APIs for I/O.

JavaScript engines were originally used only in web browsers, but are now core
components of some servers and a variety of applications. The most popular runtime
system for this usage is Node.js.

Although Java and JavaScript are similar in name, syntax, and respective standard
libraries, the two languages are distinct and differ greatly in design.

1.2 HISTORY OF JAVA SCRIPT

In 1993, Mosaic, the first popular web browser, came into existence. In the year 1994,
Netscape was founded by Marc Andreessen. He realized that the web needed to become
more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web
designing easy for designers and part-time programmers. Consequently, in 1995, the
company recruited Brendan Eich intending to implement and embed Scheme programming
language to the browser. But, before Brendan could start, the company merged with Sun
Microsystems for adding Java into its Navigator so that it could compete with Microsoft
over the web technologies and platforms. Now, two languages were there: Java and the
scripting language. Further, Netscape decided to give a similar name to the scripting
language as Java's. It led to 'Javascript'. Finally, in May 1995, Marc Andreessen coined the
first code of Javascript named 'Mocha'. Later, the marketing team replaced the name with
'LiveScript'. But, due to trademark reasons and certain other reasons, in December 1995,
the language was finally renamed to 'JavaScript'. From then, JavaScript came into
existence.

Microsoft debuted Internet Explorer in 1995, leading to a browser war with Netscape. On
the JavaScript front, Microsoft reverse-engineered the Navigator interpreter to create its
own, called JScript.

JScript was first released in 1996, alongside initial support for CSS and extensions to
HTML. Each of these implementations was noticeably different from their counterparts in
Navigator. These differences made it difficult for developers to make their websites work
 9

well in both browsers, leading to widespread use of "best viewed in Netscape" and "best
viewed in Internet Explorer" logos for several years.

In November 1996, Netscape submitted JavaScript to Ecma International, as the starting

point for a standard specification that all browser vendors could conform to. This led to the
official release of the first ECMAScript language specification in June 1997

The standards process continued for a few years, with the release of ECMAScript 2 in June
1998 and ECMAScript 3 in December 1999. Work on ECMAScript 4 began in 2000.

Meanwhile, Microsoft gained an increasingly dominant position in the browser market. By

the early 2000s, Internet Explorer's market share reached 95%. This meant that JScript
became the de facto standard for client-side scripting on the Web.

Microsoft initially participated in the standards process and implemented some proposals
in its JScript language, but eventually it stopped collaborating on Ecma work. Thus
ECMAScript 4 was mothballed.

1.3 FEATURES OF JAVASCRIPT

There are following features of JavaScript:

 All popular web browsers support JavaScript as they provide built-in execution
environments.
 JavaScript follows the syntax and structure of the C programming language. Thus,
it is a structured programming language.
 JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
 JavaScript is an object-oriented programming language that uses prototypes rather
than using classes for inheritance.
 It is a light-weighted and interpreted language.
 It is a case-sensitive language.
 JavaScript is supportable in several operating systems including, Windows, macOS,
etc.
 It provides good control to the users over the web browsers.
 10

1.4 HTML & CSS

HTML is the markup language that we use to structure and give meaning to our web
content, for example defining paragraphs, headings, and data tables, or embedding images
and videos in the page.

CSS is a language of style rules that we use to apply styling to our HTML content, for
example setting background colors and fonts, and laying out our content in multiple
columns.
 11

CHAPTER 2
REQUIREMENT SPECIFICATION

2.1 OUTLINE

A resume is a document used by individuals to present their background and skill sets.
A resume also spelled resume or resume also called curriculum vitae or CV. A
document that has a brief summary or listing about relevant education and experience.
The resume or CV is typically the first item that a potential user encounters regarding
the job seeker and is mostly used for screening an applicant’s which is often followed
by an interview, while seeking employment in the job search process and well-
designed resume. The Resume Builder will help user build his/her personal
advertisement through Resume Builder system develop a resume builder with job
placement system. Many large employers use electronic resume processing systems to
handle large number of resumes. Job portal advertisement may direct applicants to
email his resume to their company or visit their website and submit a resume in
electronic format. Online jobs search through most popular websites is beneficial as
they have served for so many years as a prominent search tool for job seekers and
employers alike. In spite of their valuable utility in linking employers with the potential
employees, the searching process and technology used by job searching websites have
not kept pace with the rapid changes in computing capability and machine intelligence.
The Information and data retrieval techniques are used by these websites primarily
depends on manually entered search queries with some advanced similarity metrics for
ranking search result.

2.2 PURPOSE

The increased number of jobless youths and graduates has become one of the serious
issue existing both in the developing and developed countries, today. The Internet has
changed the way of looking for an employment, through the development of online job
 12

portals. A job portal is a type of web portal that provides an efficient way for searching
the Internet or the web for vacant job positions available. This research will go through
various types of web/job portals but will, in exact look, at job portals as a knowledge
management system based on a standard framework. This project will mainly focus on
the data and information on available jobs, as needed by unemployed or job seekers.
The web portals have become more important than ever because of the need to get
access to find information and to gain knowledge, using the Internet. Existing portals
and websites are deeply studied to conclude with the conceptual framework for the web
portal to be developed in this project. Our proposed system is beneficial to everyone
for better Services in Placement.

2.3 FUTURE SCOPE

Resume Building is a very analytically hectic and detailed process it is going to be fairly
easy to make resumes using the proposed web service but some areas of improvement
could be:

 Use of AI to point out more readable an aesthetically pleasing resumes

 Use of Data analytics to filter out resumes with better selection probability and thus
provide the user with the quality of the resume.
 13

CHAPTER 3

METHODOLOGY

Compared with an application form, job applicants can choose what information to include
in their resumes. Some of the options for categories to include are:

(a) personal information;

(b) personal opening, job objective, career objective, and summary of qualifications;

(c) education;

(d) work experience;

(e) references;

(f) scholarships, awards, and honors;

(g) hobbies, interests, and extracurricular activities; and

(h) willingness to relocate and travel.

Each template is chosen after doing ample research so that it delivers the best experience
for the user and includes all the necessary headings and labels to make the resume top
notch.
 14

CHAPTER 4
SOURCE CODE

Header JS

import React from "react";

import resumeSvg from "../../assets/resume.svg";

import styles from "./Header.module.css";

function Header() {

return (

<div className={styles.container}>

<div className={styles.left}>

<p className={styles.heading}>

A <span>Resume</span> that stands out!

</p>

<p className={styles.heading}>

Make your own resume. <span>It's free</span>

 15

</p>

</div>

<div className={styles.right}>

<img src={resumeSvg} alt="Resume" />

</div>

</div>

);

export default Header;

Header CSS

Header.js

Yesterday

Sun 11:52 PM

You edited an item

Javascript

Header.js

Sun 11:52 PM

You uploaded an item

 16

Javascript

Header.js

.container {

padding: 50px 30px;

text-align: center;

width: 100%;

display: flex;

align-items: center;

justify-content: space-evenly;

gap: 30px;

background-color: rgb(238, 252, 255);

min-height: 85vh;

.heading {

margin: 0 auto;

max-width: 500px;

color: #000;

font-size: 3.1rem;

line-height: 4.1rem;

font-weight: bold;
 17

letter-spacing: 1px;

.heading span {

background-clip: text;

background-image: linear-gradient(to right, #239ce2, #1369b9);

color: transparent;

.right img {

width: 400px;

Body JS

Body.js

Yesterday

Sun 11:52 PM

You edited an item

Javascript

Body.js
 18

Sun 11:52 PM

You uploaded an item

Javascript

Body.js

import React, { useRef, useState } from "react";

import ReactToPrint from "react-to-print";

import { ArrowDown } from "react-feather";

import Editor from "../Editor/Editor";

import Resume from "../Resume/Resume";

import styles from "./Body.module.css";

function Body() {

const colors = ["#239ce2", "#48bb78", "#0bc5ea", "#a0aec0", "#ed8936"];

const sections = {

basicInfo: "Basic Info",

workExp: "Work Experience",

project: "Projects",

education: "Education",
 19

achievement: "Achievements",

summary: "Summary",

other: "Other",

};

const resumeRef = useRef();

const [activeColor, setActiveColor] = useState(colors[0]);

const [resumeInformation, setResumeInformation] = useState({

[sections.basicInfo]: {

id: sections.basicInfo,

sectionTitle: sections.basicInfo,

detail: {},

},

[sections.workExp]: {

id: sections.workExp,

sectionTitle: sections.workExp,

details: [],

},

[sections.project]: {

id: sections.project,

sectionTitle: sections.project,
 20

details: [],

},

[sections.education]: {

id: sections.education,

sectionTitle: sections.education,

details: [],

},

[sections.achievement]: {

id: sections.achievement,

sectionTitle: sections.achievement,

points: [],

},

[sections.summary]: {

id: sections.summary,

sectionTitle: sections.summary,

detail: "",

},

[sections.other]: {

id: sections.other,

sectionTitle: sections.other,

detail: "",
 21

},

});

return (

<div className={styles.container}>

<p className={styles.heading}>Resume Builder</p>

<div className={styles.toolbar}>

<div className={styles.colors}>

{colors.map((item) => (

<span

key={item}

style={{ backgroundColor: item }}

className={`${styles.color} ${

activeColor === item ? styles.active : ""

}`}

onClick={() => setActiveColor(item)}

/>

))}

</div>

<ReactToPrint

trigger={() => {
 22

return (

<button>

Download <ArrowDown />

</button>

);

}}

content={() => resumeRef.current}

/>

</div>

<div className={styles.main}>

<Editor

sections={sections}

information={resumeInformation}

setInformation={setResumeInformation}

/>

<Resume

ref={resumeRef}

sections={sections}

information={resumeInformation}

activeColor={activeColor}

/>
 23

</div>

</div>

);

export default Body;

Body CSS

Body.js

Yesterday

Sun 11:52 PM

You edited an item

Javascript

Body.js

Sun 11:52 PM

You uploaded an item

Javascript

Body.js
 24

.container {

padding: 30px;

display: flex;

flex-direction: column;

align-items: center;

gap: 30px;

padding-top: 0;

.heading {

font-weight: 500;

font-size: 2.1rem;

.toolbar {

width: 100%;

display: flex;

gap: 40px;

justify-content: space-between;

align-items: center;

}
 25

.colors {

display: flex;

gap: 20px;

padding: 0 30px;

.colors .color {

height: 36px;

width: 36px;

border-radius: 50%;

background-color: #239ce2;

.colors .active {

border: 2px solid #000;

.toolbar button {

padding: 8px 16px;

border-radius: 5px;

background-color: #239ce2;
 26

color: #fff;

outline: none;

border: none;

font-weight: 500;

font-size: 1rem;

letter-spacing: 1px;

display: flex;

gap: 5px;

align-items: center;

cursor: pointer;

.toolbar button svg {

height: 20px;

width: 20px;

.main {

display: flex;

flex-direction: column;

gap: 30px;
 27

width: 100%;

Editor CSS

Body.js

Yesterday

Sun 11:52 PM

You edited an item

Javascript

Body.js

Sun 11:52 PM

You uploaded an item

Javascript

Body.js

.container {

min-width: 550px;

min-height: 450px;

max-width: 750px;

display: flex;
 28

flex-direction: column;

gap: 30px;

box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

padding-top: 5px;

height: fit-content;

margin: 0 auto;

.header {

display: flex;

gap: 10px;

overflow-x: auto;

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

.header::-webkit-scrollbar {

height: 7px;

.header::-webkit-scrollbar-thumb {

border-radius: 20px;
 29

background-color: #c7c7c7;

.header .section {

padding: 10px;

border-bottom: 2px solid transparent;

font-weight: 500;

font-size: 1rem;

white-space: nowrap;

cursor: pointer;

.header .active {

border-bottom: 2px solid #239ce2;

color: #239ce2;

.body {

padding: 30px;

display: flex;

flex-direction: column;
 30

gap: 20px;

padding-top: 0;

.detail {

display: flex;

flex-direction: column;

gap: 15px;

.detail .row {

display: flex;

gap: 20px;

.detail .column {

display: flex;

flex-direction: column;

gap: 10px;

.detail .row > div {

flex: 1;
 31

.chips {

display: flex;

flex-wrap: wrap;

align-items: center;

gap: 20px;

.chips .new {

color: #239ce2;

font-weight: bold;

letter-spacing: 1px;

cursor: pointer;

.chip {

display: flex;

gap: 5px;

align-items: center;

padding: 4px 8px;

 32

background-color: #808080;

border-radius: 20px;

cursor: default;

.chip p {

font-weight: 500;

line-height: 1.25rem;

color: #fff;

.chip svg {

color: #fff;

height: 18px;

width: 18px;

cursor: pointer;

.chips .active {

background-color: #239ce2;

}
 33

.body button {

width: fit-content;

padding: 8px 16px;

border-radius: 5px;

background-color: #239ce2;

color: #fff;

outline: none;

border: none;

font-weight: 500;

font-size: 1rem;

letter-spacing: 1px;

display: flex;

gap: 5px;

align-items: center;

cursor: pointer;

transition: 200ms;

.body button:active {

transform: translateY(2px);

}
 34

CHAPTER 5

TESTING AND RESULTS DISCUSSION

The web service is successfully deployed and its functions are working properly

Figure 5.1 Interface of the website

 35

Figure 5.2 Fields for entering information

Figure 5.3 Entered information in fields

 36

Figure 5.4 Prepared Resume

.
 37

REFERENCES

[1]. Catano, V. M., Wiesner, W. H., & Hackett, R. D. (2016). Recruitment and selection in Canada
(6th ed.). Toronto, ON: Nelson Education Ltd.

[2]. Derous, E., & Ryan, A. M. (2012). Documenting the adverse impact of resume screening:
Degree of ethnic identification matters. International Journal of Selection and Assessment, 20,
464-474. https://doi.org/10.1111/ijsa.12009

[3]. “Language-Check 0.8: Python Package Index,” Pypi.python.org. N.p., 2016. Web. 17 Apr. 2016.

[4]. Chen, C., Huang, Y., & Lee, M. (2011). Test of a model linking applicant resume information
and hiring recommendations. International Journal of Selection and Assessment, 19, 374-387