Job Board Platform: Ayush Singh (2310990394), Baltej Randhawa (2310990395), Yasir Naseem (2310990393)

Group/Team no: G5/T17
JOB BOARD PLATFORM
A MINI PROJECT REPORT
Submitted by
Group/Team No: G5/T17
Ayush Singh (2310990394),

Baltej Randhawa (2310990395),
Yasir Naseem (2310990393)
in partial fulfillment for the award of the
degree of
BACHELEOR OF ENGINEERING
in
COMPUTER SCIENCE & ENGINEERING
CHITKARA UNIVERSITY
CHANDIGARH-PATIALA NATIONAL HIGHWAY

RAJPURA (PATIALA) PUNJAB-140401 (INDIA)
October 2023
TABLE OF CONTENTS
Sr.no Section Page

No.
1. Introduction 3
2. Problem 4
Statement
3. Technical 6
Details
4. Key 7
Features
5. Project 8
Advantages
6. Results 10- 16
7. Conclusion 17
8. References 18
Introduction
1. Project introduction:
The project’s name is JOB BOARDING PLATFORM. As the name suggests it is a project
where we can advertise jobs and search for resumes. In a world where the demand for
streamlined job connections is ever growing, our platform emerges as a great solution.
Beyond its sleek design and powerful functionality, our Job Board Platform redefines the
job - searching experience.
HTML structures the foundation of our content, CSS ensures a visually engaging and
responsive layout, while JavaScript injects dynamism, creating a user friendly interface that
goes beyond the ordinary. From intuitive user profiles to advanced search capabilities and
real- time job notifications, our platform is crafted to meet the diverse needs of both job
seekers and employers.
Join us on this transformative journey as we unveil the future of employment connectivity.

Explore how our innovative use of HTML, CSS, and JavaScript sets a new standard for online
recruitment, providing a platform that not only simplifies but elevates the job-searching
experience. Welcome to a revolution in the world of employment opportunities!
2. Team Introduction:
This Project is allocated to Team no. 17 of Group 5. The team comprises of 3 members-
 Ayush Singh (2310990394)
 Baltej Randhawa (2310990395)
 Yasir Naseem (2310990393)
The trio is led by Ayush Singh (2310990394).
Problem Statement
Job Boarding Platform.
Several challenges exist in the process of connecting job seekers with employers. These
challenges significantly impact the efficiency, accessibility, and overall effectiveness of the job
search and recruitment process. Here are some problems faced when job board platforms were
not invented:
1. Limited Access to Job Opportunities:
 Localized Opportunities: Job opportunities were often limited to local

newspapers andcommunity bulletin boards, restricting access to a broader range
of jobs.
 Geographic Barriers: Job seekers were confined to job openings within their
immediategeographic area, limiting their chances of finding suitable
employment.
2. Inefficient Job Search Process:
 Time-Consuming Searches: Job seekers had to manually search through

newspapers or visitvarious companies to find job openings, which was time-
consuming and inefficient.
 Limited Information: Job listings in newspapers provided limited information
about the job,making it difficult for candidates to assess the suitability of the
position.
3. Lack of Specialization:
 Industry-specific Jobs: Finding industry-specific or niche jobs was challenging

since there wereno specialized platforms catering to diverse sectors.
 Skill Matching: Employers had difficulty finding candidates with specific skills, and
job seekersstruggled to find positions matching their expertise.
4. Inequality and Bias:
 Limited Access for Disadvantaged Groups: Certain demographics, such as people

with disabilities or those from marginalized communities, faced barriers accessing job
information andopportunities.
 Prevalence of Bias: Traditional methods allowed for inherent biases in
hiring processes,impacting candidates based on gender, race, or other factors.
5. Lack of Transparency:
 Limited Company Information: Job seekers had limited access to information

about prospective employers, making it challenging to evaluate the company
culture and values.
 Salary Transparency: Salary information was often undisclosed, making it
difficult forcandidates to negotiate fair compensation.
6. Ineffective Communication:
 Slow Communication: Communication between employers and candidates

was slower,primarily relying on postal mail and phone calls, leading to delays
in the hiring process.
7. Higher Costs for Employers:
 Advertising Expenses: Employers had to invest significant amounts in

newspaper advertisements and other traditional forms of job postings, which could
be costly, especially forsmall businesses.
8. Difficulty in Skill Development:
 Limited Training Resources: Job seekers had limited access to resources for skill
developmentand training, hindering their ability to qualify for a broader range of
jobs.
The introduction of job board platforms revolutionized the job market by addressing these
challenges. These platforms provided a centralized, accessible, and efficient way for job
seekers to find opportunities and for employers to connect with qualified candidates,
significantly improving the overall employment ecosystem.
Addressing these problems have become very necessary in modern-day society. We can solve
this problem by making a Job Board Platform website, where job seekers can share their
resume, and employers can easily find them, based on their eligibility.
TECHNICAL DETAILS
HTML
HTML, or Hyper Text Markup Language, is the standard language used to create and design
websites and web applications. It is a markup language that defines the structure and layout of
content on the internet. HTML consists of a series of elements, represented by tags, which define
the different components of a web page, such as headings, paragraphs, links, images, forms, and
more. These tags are mentioned below:
 <!DOCTYPE html >: Defines the document type and version of HTML
 <html>: Represents the root element of an HTML document.
 <head>: Contains meta-information about the HTML document.
 <title>: Sets the title of the HTML document.
 <body>: Contains the content of the HTML document.
 <h1> to <h2>: Used for headings
 <p>: Defines a paragraph.
 <br>: Represents a line break.
 <strong>: Represents strong importance.
 <em>: Represents emphasized text.
 <span>: Provides a way to apply styles to inline elements.
 <a>: Defines a hyperlink.
 <nav>: Represents a navigation menu.
Lists:
 <ul>: Represents an unordered (bulleted) list.
 <ol>: Represents an ordered (numbered) list.
 <li>: Represents a list item.
Tables:
 <table>: Represents a table.
 <tr>: Represents a table row.
 <td>: Represents a table cell (data).
 <th>: Represents a table header cell.
Forms:
 <form>: Represents an HTML form.
 <input>: Represents an input field.
 <select>: Represents a drop down list.
 <textarea>: Represents a multi - line text input.
 <button>: Represents a clickable button.
Semantic HTML5 Elements:
 <header>: Represents a header section.
 <footer>: Represents a footer section.
 <article>: Represents an article.
 <section>: Represents a generic section.
 <aside>: Represents content aside from the content it is placed in.
Comments:
 : Represents a comment in the HTML code.
Multimedia:
 <img>: Represents an image.
 <audio>: Represents audio content.
 <video>: Represents video content.
CSS
CSS, or Cascading Style Sheets, is a stylesheet language used to control the visual presentation
of web pages. It enables web developers to define the layout, colors, fonts, and other visual
aspects of a website independently of its structure and content.CSS consists of selectors and
properties which are mentioned below:
 Universal Selector: * - Selects all elements on the page.

 element - Selects all instances of the specified element.
 .class - Selects all elements with the specified class.
 #id - Selects a single element with the specified ID.
Pseudo-classes:
 :hover - Selects and styles an element when the mouse is over it.
 :active - Selects and styles the active link.
 :focus - Selects and styles the element that has focus.

Pseudo-elements:
 ::before - Inserts content before an element's actual content.
 ::after - Inserts content after an element's actual content.
 ::first-line - Styles the first line of text in an element.
 ::first-letter - Styles the first letter of text in an element.
Properties:
 color: Sets the text color.
 background-color: Sets the background color.
 font-family: Sets the font family.
 font-size: Sets the font size.
 font-weight: Sets the font thickness (boldness).
 line-height: Sets the height of a line of text.
 width: Sets the width of an element.
 height: Sets the height of an element.
 margin: Sets the margin around an element.
 padding: Sets the padding inside an element.
 display: Defines how an element is displayed.
 position: Sets the positioning method.
 border: Sets the border of an element.
 border-radius: Sets the rounded corners of an element.
 flex: Specifies the ability for a flex item to grow.
 grid-template-columns:Defines the columns grid layout.
 grid-template-rows: Defines the rows in a grid layout.
 @media: Applies styles based on media conditions (e.g., screen size).
 transform: Applies a 2D or 3D transformation to an element.
 transition: Specifies the transition properties.
 box-sizing: Defines how the total width and height of an element are calculated.
 outline: Sets the width, style, and color of the outline.
Group/Team no:
JAVASCRIPT
JavaScript is a scripting language that is used to add interactivity and dynamic behavior to web
pages. Unlike HTML and CSS, JavaScript does not have tags in the traditional sense. Instead,
JavaScript is written using statements, functions, and objects. However, there are certain elements
and concepts associated with JavaScript. Here are some of them:
 var, let, const: Used to declare variables.

Data Types:
 String: Represents textual data.
 Number: Represents numeric data.
 Boolean: Represents true or false values.
 Undefined : represents undefined value
 Null: represents null i.e. no value at all
 Array: Represents an ordered list of values.
 Object: Represents a collection of key-value pairs.
Operators:
 Arithmetic Operators: Comparison Operators:
 +
Assignment Addition
Operator: Bitwise Is equal to
== Operators:
=- Subtraction
Assign &=== Identical
Bitwise AND
* Multiplication | != Not equal
Bitwise ORto
+= Add and assign
/ Division Not Identical
-= Subtract and assign ^!== Bitwise XOR
% Modulus (Remainder) > Greater than
*= Multiply and assign ~ Bitwise NOT
++ Increment >= GreaterLeft
than or equal to
<< Bitwise Shift
/=-- Divide and assign
Decrement < Less than
>> Bitwise Right Shift
%= Modulus and assign
>>> Bitwise Right Shift with
<= Less than or equal to Zero
Group/Team no:
 Logical Operators:
&& Logical AND
|| Logical OR
! Logical Not
 if, else if, else: Conditional statements.

 switch, case, default: Switch statement.
Loops:
 for: Executes a block of code a specified number of times.
 while: Executes a block of code while a specified condition is true.
 do...while: Executes a block of code once, and then repeats the loop as long as a specified
condition is true.
 for...in: Iterates over the properties of an object.
 for...of: Iterates over iterable objects (arrays, strings, etc.).
Functions and events:

 function: Declares a function.
 return: Specifies the value to be returned by a function.
 onclick , onmouseover, onmouseout, etc.: Event attributes in HTML elements.
 addEventListener(): Method to attach an event handler to an element.
DOM (Document Object Model) Manipulation:

 document.getElementById(): Gets an element by its ID.
 document.getElementsByClassName(): Gets elements by class name.
 document.getElementsByTagName(): Gets elements by tag name.
 document.querySelector(), document.querySelectorAll(): Select elements using CSS
selectors.
Group/Team no:
 innerHTML: Gets or sets the HTML content of an element.

 innerText, textContent: Gets or sets the text content of an element.
 createElement(): Creates a new element.
 appendChild(): Appends a child node to an element.
 removeChild(): Removes a child node from an element.
 try, catch, finally: Handles exceptions.
 JSON.parse(): Parses a JSON string, converting it to a JavaScript object.
 JSON.stringify(): Converts a JavaScript object into a JSON string.
Timers:
 setTimeout(): Executes a function after a specified delay.
 setInterval(): Executes a function repeatedly with a fixed time delay between each call.
 clearTimeout(), clearInterval(): Cancels a timeout or interval.
Group/Team no:
Key Features
Some of Key Features of These projects are:
 Interlinking of multiple web pages: The project consists of one main web page and
other multiple designed login and register web pages.
 Multiple themes: This project has some pre -designed icons and modules for login and
browsing the website.
 Use of foundational web development languages: The project will utilize HTML, CSS
and JavaScript which are the foundational languages for web development.
 Incorporation of libraries and tools: The project will use tools and libraries such as a
text editor (Visual Studio Code), web browser for testing.
 Attractive Design: Create an appealing and visually pleasing design for the login page
and other pages that beautify the website's branding and style. Use CSS to enhance the
visual presentation of the pages and make it visually appealing.
 Branding and image: It can help to showcase the theme, purpose, and highlights of
several jobs, which can enhance the branding and image of the jobs and employers.
 Innovation and creativity: It can help to demonstrate innovation and creativity in the
design, which can differentiate the people from others and create a competitive edge.
 Excitement: It can help to create a sense of urgency and excitement for the event, which
can motivate the participants to prepare and participate actively.
 Memorability and impression: It can help to use the countdown timer to create a
memorable and lasting impression of a special event.
 Engagement and interaction: It can help to enhance the engagement and interaction of
the employees and employers by creating a sense of community and excitement.
Group/Team no:
Project Advantages
The project has several advantages, a few of them are:
A job board platform website offers several advantages to both job seekers and employers,
making it a popular choice in the modern job market. Here are some key advantages of a
job board platform:
For Job Seekers:
1. Wide Range of Job Opportunities: Job board platforms aggregate job openings
from various industries and locations, providing job seekers with a diverse range of
employment opportunities.
2. Convenience: Job seekers can search and apply for jobs from the comfort of their
homes. They can also set up job alerts to receive notifications about relevant job
postings.
3. Time-Saving: Job board platforms streamline the application process by allowing

users to upload their resumes and apply to multiple jobs with just a few clicks, saving
time compared to traditional application methods.
4. Access to Resources: Many job boards offer resources such as resume writing tips,
interview advice, and career-related articles, helping job seekers improve their chances
of securing employment.
5. Confidential Job Search: Job seekers can discreetly explore job opportunities
without alerting their current employers, ensuring confidentiality in their job search.
For Employers and Recruiters:
1. Wider Reach: Employers can reach a larger audience of potential candidates,

including passive job seekers who might not actively be looking for a new job but are
open to opportunities.
2. Cost-Effectiveness: Posting jobs on job board platforms is often more cost-effective than
traditional advertising methods, such as print media. Employers can reach a larger pool of
candidates with a smaller budget.
3. Efficient Hiring: Employers can efficiently manage applications, screen candidates,

and schedule interviews using the features provided by job board platforms, making the
hiring process more organized and streamlined.
Group/Team no:
4. Targeted Recruitment: Job boards often allow employers to target specific

demographics or skill sets, ensuring that their job postings are seen by the most
relevant candidates.
5. Brand Exposure: A consistent presence on reputable job boards enhances the

employer's brand visibility, making it more attractive to potential candidates.
6. Data and Analytics: Employers can access data and analytics regarding their job
postings, including the number of views, applications, and applicant
demographics, enabling them to refine their recruitment strategies.
7. Networking: Job board platforms sometimes offer networking opportunities,
allowing employers to connect with other businesses and professionals in their
industry.
In summary, job board platforms provide a mutually beneficial environment for both job seekers
and employers, offering convenience, efficiency, and a wide array of opportunities for successful
employment matches
Group/Team no:
Results:
Main Web
Page:
Main Web Page Source Code:

Group/Team no:
Group/Team no:
TAGS USED:
<a>: Defines a hyperlink.
<nav>: Represents a navigation menu.
<select>: Represents a drop down list.
<button>: Represents a clickable button.
<header>: Represents a header section.
<img>: Represents an image.
universal selector: * - Selects all elements on the page.

:hover - Selects and styles an element when the mouse is over it.
::after - Inserts content after an element's actual content.
color: Sets the text color.
background-color: Sets the background color.
font-family: Sets the font family.
font-size: Sets the font size.
Group/Team no:
font-weight: Sets the font thickness (boldness).

width: Sets the width of an element.
height: Sets the height of an element.
margin: Sets the margin around an
element.
padding: Sets the padding inside an element.
border: Sets the border of an element.
border-radius: Sets the rounded corners of an element.
flex: Specifies the ability for a flex item to grow.
transform: Applies a 2D or 3D transformation to an element.
transition: Specifies the transition properties.
Login Web Page:

Group/Team no:
Login Web Page Source code:

Group/Team no:
TAGS USED:

addEventListener(): Method to attach an event handler to an element.

document.querySelector(): Select elements using CSS selectors.
location.reload(): method to reload the current web page.

Notification.requestPermission(): this method is used to request permission from the user to
show browser notifications.
Register Web Page:

Group/Team no:
Register Web Page Source Code:
;
TAGS USED:


document.querySelector(): Select elements using CSS selectors.
location.reload(): method to reload the current web page.

Notification.requestPermission(): this method is used to request permission from the user to
show browser notifications.
Group/Team no:
Resume Maker Web Page:

Group/Team no:
Resume Maker Source Code:

Group/Team no:
Group/Team no:
Group/Team no:
TAGS USED:

element.

document.getElementById(): Gets an element by its ID.
document.getElementsByClassName(): Gets elements by class name.
document.getElementsByTagName(): Gets elements by tag name.
innerHTML: Gets or sets the HTML content of an element.
Group/Team no:
innerText, textContent: Gets or sets the text content of an element.

Group/Team no:
Jobs Web Page:
Job Web Page Source Code:

Group/Team no:
Group/Team no:
TAGS USED:

Group/Team no:

margin: Sets the margin around an element.
About Us Web Page:

Group/Team no:
About us Web Page Source Code:

Group/Team no:
Group/Team no:
TAGS USED:

element.
Group/Team no:
Conclusion:
So, now concluding our Project- “JOB BOARD PLATFORM”

I would like to highlight the main take ways from the project and
our experience during the project developments:
 The JOB BOARD PLATFORM integrates HTML, CSS, and JavaScript to create a
comprehensive solution for job seekers and employers.
 Successfully completed the project that required a high level of professionalism—

meeting deadlines, fulfilling responsibilities, and maintaining a strong work ethic.
 The project will help job seekers to find right job for them by sharing their
resume and their experience to the recruiters.
 The job seeker no need to worry about resume too, as our platform itself generates
resume with the help of data provided by the job seekers.
 Working within a team was a central aspect of the project. This experience
taught me essential teamwork skills such as effective communication, delegation.
 The project allowed me to put theoretical concepts into practice, reinforcing

my understanding and bridging the gap between classroom learning and real-
world applications.
 The project helps job seekers to find right job for them by sharing their
resume and their experience to the recruiters.
 Concluding with an invitation, users are welcomed to explore the future of

employment connectivity, indicating the platform's commitment to
innovative advancements in the recruitment space.
Thank You
Group/Team no:
References
The following references were used in the completion of the project:
Information:
Platforms:
 Pexels
 Unsplash
 YouTube
Links:
 https://www.pexels.com
 https://www.unsplash.com
 https://www.youtube.com
Background images:
Platforms:
 Pexels
 Unsplash
Links:
 https://www.pexel.com
 https://www.unsplash.com
Icons:
Platforms:
 Font-Awesome
 Ion-icon
Links:
 https://www.ion-icon.com
 https://fontawesome.com
Group/Team no:

Job Board Platform: Ayush Singh (2310990394), Baltej Randhawa (2310990395), Yasir Naseem (2310990393)

Uploaded by

Document Information

Original Description:

Original Title

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

Job Board Platform: Ayush Singh (2310990394), Baltej Randhawa (2310990395), Yasir Naseem (2310990393)

Uploaded by

Copyright:

Available Formats

Group/Team no: G5/T17

JOB BOARD PLATFORM

A MINI PROJECT REPORT

Group/Team No: G5/T17

Ayush Singh (2310990394),

in partial fulfillment for the award of the

COMPUTER SCIENCE & ENGINEERING

CHANDIGARH-PATIALA NATIONAL HIGHWAY

Sr.no Section Page

Join us on this transformative journey as we unveil the future of employment connectivity.

 Localized Opportunities: Job opportunities were often limited to local

2. Inefficient Job Search Process:

 Time-Consuming Searches: Job seekers had to manually search through

 Industry-specific Jobs: Finding industry-specific or niche jobs was challenging

4. Inequality and Bias:

 Limited Access for Disadvantaged Groups: Certain demographics, such as people

 Limited Company Information: Job seekers had limited access to information

 Slow Communication: Communication between employers and candidates

7. Higher Costs for Employers:

 Advertising Expenses: Employers had to invest significant amounts in

8. Difficulty in Skill Development:

 Universal Selector: * - Selects all elements on the page.

 :focus - Selects and styles the element that has focus.

 var, let, const: Used to declare variables.

&& Logical AND

 if, else if, else: Conditional statements.

Functions and events:

DOM (Document Object Model) Manipulation:

 innerHTML: Gets or sets the HTML content of an element.

Some of Key Features of These projects are:

The project has several advantages, a few of them are:

For Job Seekers:

3. Time-Saving: Job board platforms streamline the application process by allowing

For Employers and Recruiters:

1. Wider Reach: Employers can reach a larger audience of potential candidates,

3. Efficient Hiring: Employers can efficiently manage applications, screen candidates,

4. Targeted Recruitment: Job boards often allow employers to target specific

5. Brand Exposure: A consistent presence on reputable job boards enhances the

Main Web Page Source Code:

universal selector: * - Selects all elements on the page.

font-weight: Sets the font thickness (boldness).

Login Web Page:

Login Web Page Source code:

flex: Specifies the ability for a flex item to grow.

addEventListener(): Method to attach an event handler to an element.

location.reload(): method to reload the current web page.

Register Web Page:

Register Web Page Source Code:

flex: Specifies the ability for a flex item to grow.

addEventListener(): Method to attach an event handler to an element.

location.reload(): method to reload the current web page.

Resume Maker Web Page:

Resume Maker Source Code:

universal selector: * - Selects all elements on the page.

addEventListener(): Method to attach an event handler to an element.

innerText, textContent: Gets or sets the text content of an element.

Jobs Web Page:

Job Web Page Source Code:

universal selector: * - Selects all elements on the page.

height: Sets the height of an element.

About Us Web Page:

About us Web Page Source Code: