VISVESVARAYATECHNOLOGICAL UNIVERSITY

“JNANASANGAMA”, BELAGAVI -590018,

KARNATAKA

JAVA SCRIPT & JQUERY

Mini-Project Report
On

“FREELANCE WEBSITE”
A Mini-project report submitted in partial fulfillment of the requirements for the award of the degree
of Bachelor of Engineering in Computer Science and Design Engineering of Visvesvaraya
Technological University, Belgaum.

Submitted by:

KOMAL S(1AT22CG042)
&
ACHYUTH GOWDA H S(1AT22CG004)

Under the Guidance of:

Ms. NIRANJANI M
(Asst. Prof. Dept. of CSE)

Department of Computer Science and Engineering

ATRIA INSTITUTE OF TECHNOLOGY
BANGALORE- 560024
 ATRIA INSTITUTE OF TECHNOLOGY
DEPARTMENT OF COMPUTE SCIENCE & ENGINEERING
BANGALORE-560024

CERTIFICATE

Certified that the project work entitled “CREATING A SIMPLE BLOG”, carried out by
KOMAL S(1AT22CG042) & ACHYUTH GOWDA H S(1AT22CG004), are bonafide
students of Atria Institute of Technology, Bangalore, in partial fulfillment for
the award of Bachelor of Engineering in Computer Science & Design Engineering of
Visvesvaraya Technological University, Belgaum during the academic year 2023- 2024.
It is certified that all corrections/suggestions indicated for Internal Assessment have
been incorporated in the Report deposited in the departmental library.
The project report has been approved as it satisfies requirement in respect of
project work prescribed for the said degree.

Signature of Guide Signature of HOD

Prof. NIRANJANI M Dr. Devi Kannan

 DECLARATION
We KOMAL S(1AT22CG042) , ACHYUTH GOWDA H S(1AT22CG004)student of IV
semester B.E in Computer Science & Design Engineering at AtriaInstitute of Technology,
hereby declare that the project work entitled “FREELANCE WEBSITE” has been
carried out under the supervision of Prof. Niranjani M, Assistant Professor, Dept. of
CS&E,Atria Institute of Technology and submitted in partial fulfillment of the course
requirements for the award of degree in B.E in Computer Science & Design Engineering
of Visvesvaraya Technological University, Belagavi during the year 2023-2024. We
furtherdeclare that the report has not been submitted to any other University for the
award of anyother degree.

Place: Bangalore Signature of the students

Date:

NAME: KOMAL S
USN :(1AT22CG042)

NAME: ACHYUTH GOWDA H S

USN: (1AT22CG004)
 ABSTRACT

Project Title: FREELANCE WEBSITE

The "Creating a Simple Blog using jQuery" project aims to develop a user-friendly, interactive blogging
platform leveraging the power of jQuery. This project is designed to provide a seamless and dynamic user
experience by utilizing jQuery for front-end development, enhancing the responsiveness and functionality
of the blog.

The project encompasses the following key components:

User Interface Design: Crafting an intuitive and visually appealing interface that allows users to easily
navigate through the blog, create new posts, and read existing ones.

Dynamic Content Management: Implementing features that enable real-time updates to the blog content
without requiring page reloads. This includes adding new posts, editing existing ones, and deleting entries
using AJAX calls.

Interactive Elements: Incorporating interactive elements such as animations, form validations, and user
feedback to improve user engagement and ensure a smooth blogging experience.

Data Handling: Integrating a simple back-end to store and manage blog posts. This can be achieved
through a lightweight server-side technology, ensuring that the front-end remains the primary focus of the
project.

Responsive Design: Ensuring the blog is accessible and functional across various devices and screen sizes,
enhancing usability for all users.

By leveraging jQuery, this project demonstrates how to create a simple yet powerful blogging platform that
emphasizes real-time interactions and a seamless user experience. The resulting blog will serve as an
example of effective use of jQuery in modern web development, providing a foundation for further
enhancements and features in the future.
 ACKNOWLADGEMENT

We express gratitude to our institution and management for providing us with good
infrastructure, laboratory, facilities and inspiring staff, and whose gratitude was of
immense help in completion of this project successfully.

We express our sincere gratitude to Dr Rajesha S , Principal, Atria Institute of Technology,

for providing us the required environment and for his valuable suggestion.

Our sincere thanks to Dr. Devi Kannan, Head of the Dept. Computer Science and
Engineering, Atria Institute of Technology, for her valuable support and for rendering us
resources for this project work.

We express our gratitude to Prof. Niranjani M Assistant Professor, Dept. of Computer

Science and Engineering, Atria Institute of Technology, who guided us with valuable
suggestions in completing this project at every stage.

Last but not the least, the project would not have been a success without the support of our
parents and friends. Our sincere thanks should be rendered to everyone who helpedus in
all possible ways.

KOMAL S(1AT22CG042)

ACHYUTH GOWDA H S(1AT22CG004)

 TABLE OF CONTENTS

DECLARATION i
ABSTRACT ii
ACKNOWLEDGMENT iii

INTRODUCTION 01

PROJECT OVERVIEW 02

SOURCE CODE 04

OUTPUT 05

CONCLUSION 06

REFERENCES 07
 INTRODUCTION
In today’s fast-paced and digitally driven world, freelancing has emerged as a
popular mode of employment, offering flexibility and autonomy to both
service providers and clients. With the rise of the gig economy, there is an
increasing demand for platforms that connect freelancers with potential
clients in a seamless and efficient manner. Recognizing this need, we
embarked on a project to create "WorkFlex Network," a freelance website
designed to bridge the gap between skilled professionals and those seeking
their services.

"WorkFlex Network" is an intuitive and user-friendly platform developed

using HTML, CSS, and JavaScript, with the aim of providing a robust and
reliable environment for freelancers to showcase their talents and for clients
to find the right expertise for their projects. Our website caters to a wide
range of professional services, including web development, graphic design,
content writing, digital marketing, and more, ensuring that clients can easily
connect with freelancers across various industries.

The development process of "WorkFlex Network" involved careful

consideration of user experience, accessibility, and security. We focused on
creating a responsive design that adapts to various devices, ensuring that
users can access the platform seamlessly from desktops, tablets, or
smartphones. Additionally, our project emphasizes the importance of
transparency and trust between freelancers and clients by incorporating
features such as user ratings, reviews, and secure payment gateways.

Through this project, our goal was not only to create a functional freelance
platform but also to gain practical experience in web development, project
management, and teamwork. The "WorkFlex Network" project allowed us to
apply our knowledge of HTML and related technologies to solve real-world
problems, enhancing our skills and preparing us for future challenges in the
field of web development.

As we move forward, we envision "WorkFlex Network" evolving into a

comprehensive solution for freelancers and clients alike, continuously
improving based on user feedback and technological advancements.

Dept. of CS&D, AIT 2023-2024

 PROJECT OVERVIEW

Project Title:
WorkFlex Network - A Freelance Website

Project Description:
The "WorkFlex Network" project is designed to create a comprehensive and user-friendly
platform for freelancers and clients. Developed using HTML, CSS, and JavaScript, this
website aims to streamline the process of connecting skilled professionals with potential
clients. The platform will feature a homepage showcasing available freelance services,
individual freelancer profiles, and a client interface for managing project postings and
communication. The use of responsive design ensures accessibility across various devices,
while additional features like user ratings, secure payment gateways, and messaging
systems enhance user interaction and trust.

Objectives:
Objectives for "WorkFlex Network" Project

User Interface Development: Design an intuitive and appealing user interface for
freelancers and clients to navigate and manage their profiles and projects efficiently.

Service Management: Enable freelancers to create and edit their service listings, and
allow clients to post and manage project requirements securely.

Dynamic Interactivity: Incorporate interactive elements using JavaScript to enhance user

experience, including form validations, real-time notifications, and smooth transitions.

Responsive Design: Ensure that the website is fully responsive, providing a seamless
experience on desktops, tablets, and mobile devices.

Chatbot Integration: Develop and integrate a chatbot to assist users in navigating the
platform, answering frequently asked questions, and providing real-time support.
Key Features:

Home Page with Recent Posts:

Display the most recent blog posts on the home page for easy access.

Individual Post View:

Allow users to view full details of each post, including title, content, and publication date.

Comment Section:
Enable users to read and submit comments on individual blog posts.

Dept. of CS&D, AIT 2023-2024

Admin Dashboard
 Provide a secure admin interface for creating, editing, and deleting blog posts.

Real-time Form Validation

 Implement jQuery-based form validation to ensure data integrity and enhance user experience.

AJAX for Seamless Updates

 Use AJAX to fetch and update data without reloading the page, improving responsiveness and user experience.

Technologies and Tools:

•Front-end: HTML5, CSS3, JavaScript, and modern frameworks such as React or

Angular for building a dynamic and responsive user interface.

•Back-end: Server-side scripting using PHP, Python, or Node.js, with a database

management system like MySQL or PostgreSQL.

•CMS: A robust content management system like WordPress, Drupal, or a custom-

built CMS tailored to the college's specific needs.

•SEO Tools: Tools and techniques for optimizing the website's search engine
ranking, including keyword research, meta tags, and performance optimization.

•Security Measures: SSL/TLS encryption, secure login mechanisms, regular security

audits, and compliance with data protection regulations.

Project Timeline:

•Planning and Requirement Gathering: 2-3 weeks

•Design and Prototyping: 4-6 weeks
•Development and Testing: 8-10 weeks
•Content Integration and SEO Optimization: 3-4 weeks
•Launch and Post-Launch Support: 2-3 weeks

Dept. of CS&D, AIT 2023-2024

 SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WorkFlex Network</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="chat.css">
<script src="chat.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css" integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCF
kKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8
M2HN" crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundl
e.min.js" integrity="sha384-
C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq4
6cDfL" crossorigin="anonymous"></script>

Dept. of CS&D, AIT 2023-2024

link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<!-- Header -->

<script src="https://kit.fontawesome.com/a5cd4c08fe.js"
crossorigin="anonymous"></script>
<div class="header">
<img src="logo.png" alt="logo" class="logo"/>
<h1>WorkFlex Network</h1>
<p>Your Project,Our Passion</p>
</div>
<nav class="navbar navbar-expand-lg bg-body-tertiary" style="height: fit-;">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#" style="font-weight: 500;
color: black; font-size: larger;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html" style="font-weight: 500; color: black; font-
size: larger">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="job.html" style="font-weight: 500; color: black; font-size:
larger">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Services.html" style="font-weight: 500; color: black; font-
size: larger">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="clientpage.html" style="font-weight: 500; color: black; font-
size: larger">Client Page</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-
expanded="false" style="font-weight: 500; color: black; font-size: larger">
More
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="contact.html" style="font-weight: 500; color: black;">Contact
us</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="about.html" style="font-weight: 500; color: black;">About
us</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" style="width:
200px; display: flex;">
<button class="btn" type="submit"><i class="material-icons" id="search">search</i></button>
</form>
<div class="nav-button">
<a href="login.html"><button class="btn btn-outline-primary">Login</button></a>
<a href="register.html"><button class="btn btn-outline-success">Sign up</button></a>
</div>
</div>
</div>
</nav>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

<!-- Indicators/dots -->

<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>

<!-- The slideshow/carousel -->

<div class="carousel-inner">
<div class="carousel-item active">
<img src="freelancing-760x400.webp" alt="Los Angeles" class="d-block" style="width:100%"
height="400px" >

</div>
<div class="carousel-item">
<img src="What-is-Freelance-Work-Social.png" alt="Chicago" class="d-block" style="width:100%" >
</div>
<div class="carousel-item">
<img src="free.jpg" alt="New York" class="d-block" style="width: 100%; background-size: contain; margin-
top: 0px;">

</div>
</div>
<!-- CHAT BAR BLOCK -->
<div class="chatbot">
<div class="chat-bar-collapsible">
<button id="chat-button" type="button" class="collapsible">
<i class="fa-solid fa-robot"></i>
</button>

<div class="content">
<div class="full-chat-block">
<!-- Message Container -->
<div class="outer-container">
<div class="chat-container">
<!-- Messages -->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessage" class="botText"><span>Loading...</span></p>
</div>

<!-- User input box -->

<div class="chat-bar-input-block">
<div id="userInput">
<input id="textInput" class="input-box" type="text" name="msg"
placeholder="Tap 'Enter' to send a message">
<p></p>
</div>

<div class="chat-bar-icons">
<i id="chat-icon" style="color: crimson;" class="fa fa-fw fa-heart"
onclick="heartButton()"></i>
<i id="chat-icon" style="color: #333;" class="fa fa-fw fa-send"
onclick="sendButton()"></i>
</div>
</div>
<div id="chat-bar-bottom">
<p>WorkFlex Network</p>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="chat.js"></script>
</div>
<!-- Footer -->
<hr>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-
target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Services
</button>
 </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul>
<li><h5><a class="dropdown-item" href="DigitalMarketing.html" target="_blank"><i style='font-
size:24px' class='fas'>&#xf105;</i>Digital Marketing</a></h5></li>
<li><h5><a class="dropdown-item" href="Graphic&design.html" target="_blank"><i style='font-
size:24px' class='fas'>&#xf105;</i>Graphic-Designing</a></h5></li>
<li><h5><a class="dropdown-item" href="WritingandTranslation.html" target="_blank"><i style='font-
size:24px' class='fas'>&#xf105;</i>Writing and Translation</a></h5></li>
<li><h5><a class="dropdown-item" href="Photography.html" target="_blank"><i style='font-size:24px'
class='fas'>&#xf105;</i>Photography</a></h5></li>

</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-
target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Contact Us
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Send us a request and we will be in touch with you soon. <br><a href="contact.html">Click Here</a>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-
target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
About Us
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Here is our Team , get to know more.<br><a href="about.html">Click Here</a>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-
target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Community
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Inviting friends can make you and your colleagues more interesting to get to know about
us.</p>
<a href="Invite.html">Invite your Friend</a>
</div>
</div>
</div>
</div>
<hr>
<footer>
<div class="footer-content">
<div class="footer-section about">
<h2>About Us</h2>
<p>Your Project, Our Passion. WorkFlex Where your life make easier than you think
. The OP (The original Programmer)</p>
</div>

<div class="footer-section links">

<h2>Quick Links</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="job.html">Find Jobs</a></li>
<li><a href="client.html">Client page</a></li>
<!-- Add more links as needed -->
</ul>
</div>
<div class="footer-section contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: 9845692110</p>
<p>Address: Madhuranagara 3rd stage varthur bangalore 560087</p>
<!-- Add more contact information as needed -->
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2023 WorkFlex Pvt. Ltd</p>
<div class="social-icons">
<!-- Add your social media icons and links here -->
<a href="https://www.linkedin.com/company/tekkybench/?originalSubdomain=in"
class="fa fa-linkedin"></a>
<a href="https://www.instagram.com/tekkybench/" class="fa fa-instagram"></a>
<a href="https://www.facebook.com/tekkybench" class="fa fa-facebook"></a>
</div>
</div>
</footer>
</body>
</html>
 OUTPUT

Dept. of CS&D, AIT 2023-2024

 CONCLUSION

The creation of WorkFlex Network marks a significant milestone in our

journey to develop a user-friendly, efficient, and effective freelance
platform. Through the integration of HTML, we have successfully
designed a website that not only meets the needs of freelancers and
clients but also incorporates a dynamic chatbot to enhance user
interaction and support.

The project has provided us with invaluable experience in web

development, from the intricacies of HTML coding to the practical
application of creating a responsive and interactive user interface. The
addition of the chatbot demonstrates our commitment to innovation
and improving user experience, making it easier for users to navigate the
platform and access the services they need.

Moving forward, there is potential to expand the functionality of

WorkFlex Network by incorporating more advanced technologies such as
AI-driven features, secure payment gateways, and more robust user
management systems. This project has laid a strong foundation for
future developments, and we are excited about the possibilities it holds
for the freelance community.

Overall, WorkFlex Network represents a collaborative effort to create a

valuable resource for freelancers and employers alike, and we are proud
of the work we have accomplished.

Dept. of CS&D, AIT 2023-2024

 REFERENCES

1. Web Development and Design Books:

• Duckett, J. (2011). HTML and CSS: Design and Build Websites. John Wiley & Sons.
• Freeman, E., & Robson, E. (2014). Head First HTML and CSS. O'Reilly Media.
• Keith, J. (2010). HTML5 for Web Designers. A Book Apart.
• Gasston, P. (2011). The Book of CSS3: A Developer's Guide to the Future of Web
Design. No Starch Press.

2. Content Management Systems :

• WordPress Documentation: https://wordpress.org/support/

• Drupal Documentation: https://www.drupal.org/documentation
• Joomla Documentation: https://docs.joomla.org/Main_Page

HERE IS THE LINK TO ACCESS OUR WEBSITE

• https://workflexnetwork.github.io/

Dept. of CS&D, AIT 2023-2024