Y. B.

PATIL POLYTECHNIC, AKURDI

PUNE

SUBMITTED TO
MAHARASHTRA BOARD OF TECHNICAL EDUCATION

Client Side
Scripting

(22519)

Report On
Job Boarding Website (ApnaJob)

Under Guidance Of
Mrs. Maheshwari S Mali

Diploma in Computer Engineering

2024 – 2025 (Semester – 5)

Y. B. Patil Polytechnic, Akurdi, Pune

Third Year, Department of Computer Engineering

 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

CERTIFICATE

This is to certify that Aryan Kailash Mohade, Vikas Jalindar Jogdand, Sakshi

Bhosale Roll. No. Y-B3329, Y-B3313, Y-B3357 ,Y-B of Fifth Semester Diploma

in Computer Engineering Section B in Y. B. Patil Polytechnic, Akurdi has

completed the Micro Project satisfactory in Subject Client Side Scripting for the

academic Year 2024 – 2025 as prescribed in the MSBTE Curriculum.

Subject Teacher HOD Principal

Mrs Maheshwari S Mali Mrs. Pooja Ahuja Dr. A. S. Kondekar
 ACKNOWLEDGEMENT

We would like to express our special thanks of gratitude to Mrs Maheshwari S

Mali who gave us a golden opportunity to showcase and let us learn more about
our topic i. e. “Job Boarding Website(ApnaJob)” and also taught us the way to
work in team. We would also like to Underscore dynamic efforts of the team work,
and their experts advice to complete this project in time.

Date Place :- Akurdi, Pune

 INDEX

Sr. No. Content Page. No.

01 Introduction 1

02 Landing Page 2

03 Job Category Section 3

04 ] Company Showcase: How It 4

Works Section

05 Testimonials Section 5

06 Latest News Section 06

07 Footer Design 14

08 Conclusion 16

09 Reference 17
 INTRODUCTION

Overview of the Website’s Purpose and Target Audience

The website is a job board platform designed to help users find startup jobs easily
and quickly. It serves as a one-stop solution for job seekers to search for positions
across multiple industries, while also enabling companies to post vacancies. The
primary goal is to connect top talent with companies that are actively hiring,
especially within the startup ecosystem. This platform focuses on providing an
intuitive user interface where users can search for jobs by category, location, or
specific company, and upload their resumes for instant applications.

The target audience includes:

1. Job Seekers: Primarily individuals looking for employment opportunities in

startups or growing companies. They range from recent graduates to
experienced professionals looking to transition into exciting new roles.
2. Recruiters and Employers: Companies looking to hire fresh talent. Startups,
in particular, can benefit from accessing a pool of motivated job seekers.
3. Freelancers: Individuals seeking short-term or freelance opportunities,
especially in creative fields like design, writing, and development.

Importance of a Job Board Platform

Job board platforms have become essential in the modern recruitment landscape as
they offer seamless access to a broad range of employment opportunities. For
employers, it simplifies the recruitment process by giving them access to an active
talent pool.

Page | 1
 LANDING PAGE

Code Overview (HTML/CSS/JavaScript)

The landing page was developed using HTML, CSS, and JavaScript to create an
engaging, user-friendly interface that grabs attention and guides visitors toward key
actions, such as searching for jobs or uploading resumes.

The landing page was designed with the following key features to ensure it effectively captures
user attention:

1. Hero Section:
o The hero section is the most prominent element on the page. It uses a
full-width background image that represents the professionalism and
ambition of the job-seeking audience. The main heading (“Find Your
Dream Job”) is large, centered, and designed to immediately
communicate the website's purpose.
2. Search Bar:
o Positioned below the hero text, the search bar allows users to input job
titles, skills, or companies and quickly start their job search. This bar is
designed to be simple and actionable with a bold call-to-action button
labeled “Search Jobs,” encouraging immediate interaction.

Page | 2
 3. Call-to-Action (CTA):
o The main CTA (Search Jobs) is placed at the center of the page, making it
easily accessible

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Board Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#jobs">Find Jobs</a></li>
<li><a href="#upload">Upload Resume</a></li>
<li><a href="#companies">Top Companies</a></li>
</ul>
</nav>
</header>

<section class="hero">
<div class="hero-content">
<h1>Find Your Dream Job</h1>
<p>Connecting talent with the right opportunities</p>
<div class="search-bar">
<input type="text" placeholder="Job title, skills, or company">
<button>Search Jobs</button>
</div>
</div>
</section>
<footer>
<p>&copy; 2024 JobBoard. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
<html>

Page | 3
 Job Category Section

Code Overview

The Job Category Section showcases different job roles using visually appealing
CSS cards. This section helps users easily navigate and filter job listings based on
categories such as "Software Development," "Marketing," "Design," and more. Below
is a sample code implementation for this section:

Explanation: Purpose of Categorizing Jobs

The purpose of this section is to provide users with an organized way to explore
various job opportunities. Categorizing jobs into sectors such as Software
Development, Marketing, Design, and Human Resources allows users to quickly
filter listings based on their field of interest. This feature significantly enhances user
experience by eliminating the need to scroll through irrelevant jobs.

Benefits of Job Categorization:

Page | 4
1. Streamlined Navigation: By categorizing jobs, the website improves the
efficiency of the job search process, allowing users to zero in on what they’re
looking for with minimal effort.
2. Specialized Focus: Job seekers can focus on opportunities relevant to their
skills and interests without feeling overwhelmed by unrelated job listings.
3. Easy Access to Information: Icons and short descriptions make the categories
visually recognizable, ensuring that users can quickly identify which jobs are
of interest.

<section id="job-categories">

<h2>Explore Job Categories</h2>

<div class="categories-container">

<!-- Card 1: Software Development -->

<div class="category-card">

<img src="images/software-icon.png" alt="Software Development">

<h3>Software Development</h3>

<p>Find opportunities in web, app, and software development.</p>

</div>

<!-- Card 2: Marketing -->

<div class="category-card">

<img src="images/marketing-icon.png" alt="Marketing">

<h3>Marketing</h3>

<p>Explore roles in digital marketing, branding, and more.</p>

</div>

<!-- Card 3: Design -->

<div class="category-card">

<img src="images/design-icon.png" alt="Design">

<h3>Design</h3>
Page | 5
 <p>Careers in UI/UX, graphic design, and creative roles.</p>

</div>

<!-- Card 4: Human Resources -->

<div class="category-card">

<img src="images/hr-icon.png" alt="Human Resources">

<h3>Human Resources</h3>

<p>Opportunities in HR, recruitment, and employee management.</p>

</div>

</div>

</section>

Page | 6
 Upload Resume Section
Code for Upload Resume Functionality

This section enables users to upload their resumes using an HTML form. The
functionality is enhanced with JavaScript for validation to ensure users upload the
correct file type (PDF or Word) and handle the upload process seamlessly.

Explanation: How Users Can Upload Their Resumes

1. User Interface:

The upload section consists of a file input and a button to upload resumes. Users can
click the "Choose File" button to select their resume file from their computer.

The input field restricts accepted file types to PDF, DOC, and DOCX, ensuring that
users upload compatible files.

Page | 7
 2. JavaScript Validation:
o Upon submission, JavaScript intercepts the form submission to perform
validation.
o It checks if the uploaded file matches the allowed extensions using a
regular expression (allowedExtensions).
o If the validation fails, an error message is displayed, and the input field is
cleared to prompt the user to select a valid file.
o If the validation is successful, a success message is shown to inform the
user that their resume has been uploaded successfully. This message can
be extended to include actual upload logic to a back-end server.
3. Back-End Functionality (Conceptual):
o While the current implementation only handles the front-end validation,
the next step would be to send the file to a back-end server using AJAX
or a form submission to handle file storage.
o The back-end could be developed using technologies such as Node.js,
PHP, or Python, which would handle saving the file to the server or a
cloud storage service.

In summary, the Upload Resume Section provides a user-friendly interface for

uploading resumes, ensuring that users are guided through the process with clear
instructions and validations, enhancing the overall user experience on the job board
platform.

<section id="upload-resume">

<h2>Upload Your Resume</h2>

<form id="resume-upload-form">

<input type="file" id="resume" accept=".pdf, .doc, .docx" required>

<button type="submit">Upload Resume</button>

</form>

<div id="upload-message"></div>

</section>

document.getElementById('resume-upload-form').addEventListener('submit',
function(event) {

Page | 8
 event.preventDefault(); // Prevent form submission

const fileInput = document.getElementById('resume');

const filePath = fileInput.value;

const allowedExtensions = /(\.pdf|\.doc|\.docx)$/i;

if (!allowedExtensions.exec(filePath)) {

document.getElementById('upload-message').innerText = 'Please upload a valid

file format (PDF, DOC, DOCX).';

fileInput.value = ''; // Clear the input

return false;

} else {

document.getElementById('upload-message').innerText = 'Resume uploaded

successfully!';

// Here, you can add further code to handle the file upload to the server

});

Page | 9
 Company Showcase: How It Works Section

Code Overview of CSS Animations

The How It Works section illustrates the job search, application, and hiring process
using engaging CSS animations. The following code implements a visually appealing
layout with animated transitions to guide users through each step.

<section id="how-it-works">
<h2>How the Company Works</h2>
<div class="process-container">
<div class="process-step">
<div class="icon" id="search-icon"></div>
<h3>Search Jobs</h3>
<p>Explore thousands of job listings based on your skills and interests.</p>
</div>
<div class="process-step">
<div class="icon" id="apply-icon"></div>
<h3>Apply Online</h3>
<p>Submit your resume and application easily through our platform.</p>
</div>
<div class="process-step">
<div class="icon" id="interview-icon"></div>
<h3>Get Interviewed</h3>
<p>Get selected for interviews and show your skills to potential
employers.</p>
</div>
<div class="process-step">
<div class="icon" id="hired-icon"></div>
<h3>Land Your Dream Job</h3>
<p>Receive job offers and start your career journey!</p>
</div>
</div>
</section>

Page |
10
 Explanation: Animation Techniques Used

1. Fade-In Animation:
o The fadeIn animation is applied to each step in the process. This
animation gradually changes the opacity of each step from 0 to 1 and
moves it upwards slightly, creating a smooth entrance effect. This draws
the user's attention as they scroll through the section.
2. Hover Effects:
o Each process step has a hover effect where it translates upward slightly
and increases the box shadow. This not only enhances interactivity but
also makes the cards feel responsive and alive when the user hovers over
them.
3. Responsive Flexbox Layout:
o The section uses a flexbox layout to ensure that the steps are evenly
spaced and can wrap as needed on different screen sizes. This design
choice makes the section adaptable to various devices, maintaining its
usability across desktop and mobile formats.
4. Icon Representation:
o Each process step is represented by an icon that conveys the step
visually. This adds a layer of visual storytelling and helps users quickly
understand the processes involved in the job application journey.

In summary, the How It Works section combines engaging animations with clear
messaging to guide users through the job search and application process. By using
CSS animations effectively, this section enhances the user experience while making
the platform more attractive and informative.

Page |
11
 Testimonials Section

Code Overview for Client Testimonials

The Testimonials Section showcases client feedback in a visually appealing, sliding

format. This enhances the credibility of the job board by allowing potential users to
see success stories from others. Below is the implementation for the testimonials
section:

 User Interface:

 The section includes client testimonials, each featuring a profile picture, a

message, and the client's name and job title. This layout provides a personal
touch, making the testimonials more relatable and trustworthy.

 Sliding Functionality:

 The testimonials slide horizontally, displaying one testimonial at a time. Users

can manually navigate between testimonials using the previous and next
buttons.
 The JavaScript code manages the current index and adjusts the position of each
testimonial using CSS transformations to create a sliding effect.

Page |
12
 Auto Slide Feature:

 An automatic slide feature is included, allowing testimonials to rotate every

five seconds. This keeps the section dynamic and engaging without requiring
user interaction.

 Responsive Design:

 The CSS is designed to ensure the testimonials are responsive. The flexbox
layout adapts to different screen sizes, making it accessible on mobile devices,
tablets, and desktops.
 Profile pictures are made circular using border-radius, ensuring a polished
look across all devices.

<section id="testimonials">
<h2>What Our Clients Say</h2>
<div class="testimonial-slider">
<div class="testimonial">
<img src="images/client1.jpg" alt="Client 1">
<p>"This platform helped me land my dream job within weeks! The process
was smooth and easy to navigate."</p>
<h4>John Doe</h4>
<h5>Software Engineer</h5>
</div>
<div class="testimonial">
<img src="images/client2.jpg" alt="Client 2">
<p>"I loved the user-friendly interface and the variety of jobs available.
Highly recommend it!"</p>
<h4>Jane Smith</h4>
<h5>Marketing Manager</h5>
</div>
<div class="testimonial">
<img src="images/client3.jpg" alt="Client 3">
<p>"Thanks to this job board, I found the perfect position in less than a
month!"</p>
<h4>Emily Johnson</h4>
<h5>Graphic Designer</h5>
</div>
<div class="testimonial">
<img src="images/client4.jpg" alt="Client 4">
Page |
13
 <p>"The application process was straightforward, and I received feedback
promptly. Great service!"</p>
<h4>Michael Brown</h4>
<h5>Product Manager</h5>
</div>
</div>
<button id="prev">❮</button>
<button id="next">❯</button>
</section>

Page |
14
 Latest News Section

Code Overview for News Cards

The Latest News Section presents updates about client placements through visually
appealing and responsive cards. This section aims to keep users informed about
successful job placements, enhancing the credibility of the job board. Below is the
implementation for the latest news cards.

Explanation: How the News Section Informs Users About Client

Placements, Designed Using Responsive Cards

1. User Interface:
o The Latest News Section features a series of news cards, each
containing a headline, a brief description, and the publication date. This
structure allows users to quickly grasp the latest updates without
overwhelming them with information.
2. Responsive Design:
o The news cards are designed using a flexbox layout, allowing them to
adapt based on screen size. This ensures that they display neatly on both
mobile and desktop devices, maintaining usability and accessibility.
3. Hover Effects:
o Each card has a subtle hover effect that raises the card slightly when the
user hovers over it. This adds interactivity and encourages users to
engage with the content.
4. Informative Content:
o Each card highlights significant news relevant to job seekers and
employers, such as hiring announcements, new job openings, and
collaborations. This keeps users updated on the dynamic job market,
fostering trust in the platform.
5. Visual Appeal:
o The use of soft colors and card shadows creates a clean and modern
aesthetic. This design choice helps draw users' attention to the news
section, making it a focal point of the website.
6. Encouraging Engagement:
o By providing timely updates about client placements, the section not
only informs users but also encourages them to take action, whether it’s
applying for new jobs or simply staying informed about market trends.

Page |
15
In conclusion, the Latest News Section effectively combines responsive design and
user-friendly layout to present important information about client placements. By
doing so, it enhances user engagement and trust in the job board platform.

Page |
16
 Footer Design

Code Overview of the Footer

The Footer Section of a website is essential for providing users with quick access to
vital information, including social media links, contact details, and legal disclaimers.
Below is the implementation for a well-structured footer.

Explanation: Social Media Integration, Contact Information, Google

Maps, and Legal Information Included

1. Contact Information:
o The footer prominently displays essential contact information, including
email, phone number, and physical address. This ensures users can easily
reach out for support or inquiries.
2. Social Media Integration:
o Social media links are included in the footer, allowing users to connect
with the job board on various platforms. This integration helps increase
engagement and allows users to stay updated on the latest job postings
and news.

3. Google Maps:
Page |
17
 o The inclusion of a Google Maps iframe provides users with an
interactive map to locate the company’s office. This feature enhances
user experience by allowing users to easily find directions to the office.
4. Responsive Design:
o The footer is designed using a flexible layout that adapts to different
screen sizes. This ensures that the footer remains accessible and user-
friendly across various devices, from desktops to mobile phones.
5. Legal Information:
o A copyright statement at the bottom of the footer informs users of the
ownership of the content, reinforcing legal protection and
professionalism.
6. Visual Appeal:
o The use of contrasting colors (dark background with light text) improves
readability and draws attention to the footer content. The overall design
is consistent with the website’s theme, ensuring a cohesive look.

<footer>
<div class="footer-container">
<div class="footer-info">
<h3>Contact Us</h3>
<p>Email: info@jobboard.com</p>
<p>Phone: +91 12345 67890</p>
<p>Address: 123 Job Street, Pune, Maharashtra, India</p>
</div>
<div class="footer-social">
<h3>Follow Us</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
<div class="footer-map">
<h3>Find Us Here</h3>
<iframe

Page |
18
 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153148.123456789!2d74.1
23456!3d18.123456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcf123456789!2
sPune%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1616187200000!5m2!1sen!2sin"
width="300"
height="200"
style="border:0;"
allowfullscreen=""
loading="lazy"></iframe>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 JobBoard. All rights reserved.</p>
</div>
</footer>

footer {
background-color: #333;
color: white;
padding: 20px 0;
}

.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1200px;
margin: 0 auto;
}

.footer-info,
.footer-social,
.footer-map {
margin: 10px;
flex: 1 1 30%;
}

Page |
19
 .footer-social ul {
list-style: none;
padding: 0;
}

.footer-social li {
margin: 5px 0;
}

.footer-social a {
color: #f0f0f0;
text-decoration: none;
}

.footer-map iframe {
width: 100%;
border: 0;
}

.footer-bottom {
text-align: center;
margin-top: 20px;
font-size: 14px;
}

Page |
20
 Conclusion
The development of a job board website encapsulates a thoughtful approach to
creating a user-centric platform designed to connect job seekers with potential
employers. Each section of the website—from the landing page to the footer—was
meticulously crafted to ensure usability, responsiveness, and aesthetic appeal.

The website's purpose is clear: to facilitate the job search process, provide resources
for both job seekers and employers, and create an engaging experience that
encourages users to return. The integration of various features, such as job categories,
resume uploads, and testimonials, enhances the platform's functionality and builds
trust among users.

Key technologies such as HTML, CSS, and JavaScript were employed to bring the
design to life, ensuring compatibility across devices and browsers. Responsive design
principles were implemented throughout, allowing users to access the site seamlessly
on any device, which is increasingly crucial in today's mobile-centric world.

Furthermore, the inclusion of social media links, contact information, and a Google
Maps integration in the footer establishes a strong connection with users, providing
them with essential information and reinforcing the company's credibility.

Page |
21
 References
 Indeed - https://www.indeed.com

 One of the most popular job board platforms, offering job listings, resume
uploads, and company reviews.

 LinkedIn Jobs - https://www.linkedin.com/jobs/

 A platform focused on networking and job opportunities, with features like job
categories and company showcases.

 Glassdoor - https://www.glassdoor.com

 Provides job listings along with company reviews and salary information,
emphasizing transparency for job seekers.

 Naukri - https://www.naukri.com

 A major job portal in India with various features like job category
segmentation, resume upload functionality, and employer feedback.

 Monster - https://www.monster.com

 A well-known job board with diverse job categories and personalized job
recommendations.

 AngelList - https://angel.co/jobs

 A platform that focuses on startup jobs, including a clean interface and intuitive
application process.

 CareerBuilder - https://www.careerbuilder.com

 Offers job searching features, company information, and career advice sections.

 Shine.com - https://www.shine.com

 Another job portal in India that focuses on resume uploads, job listings, and
interview tips.

Page |
22
Page |
23