LATTHE EDUCATION SOCITY’S POLYTECHNIC, SANGLI

DEPARTMENT OF COMPUTER ENGINEERING

MICRO PROJECT REPORT

SUBJECT: Client Side Scripting

TITLE: Linkedin Clone

SUBMITTED BY:

Roll Number Name Enrollment Number

243226 Prasad Somnath Digole 2200430313
 RATIONALE

A LinkedIn clone website, built using HTML, CSS, and JavaScript, will give practical
experience in web development along with simulating a full-fledged professional
networking platform. This clone is a rudimentary version of LinkedIn, with core
functionalities such as user profiles, connections, job postings, and news feeds. The
reason for doing this project is very much based on the following points:

Improved Web Development Skills

HTML will be used to give structure to the content of the website and build up a
skeleton or outline for the website.

The aesthetic part of the web page is styled using CSS, which includes making the
website responsive on the devices.

JavaScript is used in order to add interactivity such as updating the content

dynamically, profile interactions, and form validations. These result in putting into
action a hands-on process that makes up a user-centric, responsive, and interactive
website.

User Experience and Interface Design:

I can, by building a LinkedIn clone, focus my concentration on intuitive, user-friendly
interface designs. The user experience will be one fantastic dimension through which
the users would easily navigate various sections of the site to create profiles, search for
jobs, connect with others, and more.

Real World Application Understanding Developing:

this clone helps in understanding the core concepts of building a large-scale
professional platform. It will be including the prime web features in action, such as
data handling, security practices (such as the form validations), and session
management but in a much simpler form compared to what is used on a real LinkedIn
site.
 Aim of the Microproject

The objective of this project is to create a LinkedIn clone website using HTML, CSS,
and JavaScript. In general, this project tries to reproduce main functionalities of a
professional networking platform. This project aims at enhancing practical web
development skills, where a fully responsive, interactive website is produced.
The aim is to ensure they get a really hands-on feel for building real-world web
applications focused on UI design, UX, and application of front-end technologies.

Course Outcomes Achieved

 Create interactive web pages using program flow control structure.

 Create Event based web forms using Javascript.
 Create interactive webpage using Regular Expression for Validation.

Resources Required

Sr No. Name of Specifications Remark

resource/material
1 Computer System Intel Core i5 and RAM 1
8GB Windows 11
2 Software Visual Studio Code 1
3 And other resources used Laser Printer HP 1
LaserJetPro P1566
Printer
 Actual Methodology Followed

1. Requirement Analysis

 Objective Setting: The main objective was to build a LinkedIn-like platform

where users can:
 Sign up for an account.
 Log in to access their profile page.
 View and edit their profile details.

 Feature Identification:
 Signup Page (for new users to create an account).
 Login Page (for existing users to access their profile).
 Profile Page (where users can view and update their information, such as name,
job title, experience, and skills).

2. Planning and Design

 Wireframe Design:
 Created simple wireframes to visualize the layout of each page.
 Signup Page: A form for user registration, capturing details like name, email,
password, job title, and profile picture (optional).
 Login Page: A form with fields for email and password for user authentication.
 Profile Page: Displays user information, such as name, job title, experience, and
skills, with an option to edit these details.
 User Flow Design:
 The user flow was planned to ensure a smooth transition between the signup,
login, and profile pages.

3. Front-End Development
 HTML Structure Development:
Designed various HTML pages for the Signup, Login, and Profile.
 Signup Page: Contains contact name, email, password, and job title with "Sign
Up" button.

 Login page: It has fields where you put in input names for both the e-mail and
the password and a "Login" button.

 Profile page: That is structured to have information such as name, profile

picture, job title, skills, amongst others with an update of information section.
 Source CODE

Login code:-

function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var errorMessage = document.getElementById("error-message");

// Username validation: lowercase letters a-z only

var usernameRegex = /^[a-z]+$/;

// Simplified Password validation:

// Must contain at least one letter, one number, and be at least 8 characters long
var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

// Clear any previous error message

errorMessage.textContent = "";

if (!usernameRegex.test(username)) {
errorMessage.textContent = "Username must contain only lowercase letters a-z.";
return false;
}

if (!passwordRegex.test(password)) {
errorMessage.textContent = "Password must be at least 8 characters long and
include at least one letter and one number.";
return false;
}

// If both validations pass

alert("Login successful!");
return true;
}
function checkInput() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var loginButton = document.getElementById("loginButton");

// Enable the login button only if both fields are filled with valid input
if (username && password) {
// Check if the inputs are valid before enabling the button
var usernameRegex = /^[a-z]+$/;
var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

if (usernameRegex.test(username) && passwordRegex.test(password)) {

loginButton.disabled = false;
} else {
loginButton.disabled = true;
}
} else {
loginButton.disabled = true;
}
}
 Source CODE

Signup Code:-

function validateForm() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;

// Password match validation

if (password !== confirmPassword) {
alert("Passwords do not match!");
return false;
}
// Password length validation
if (password.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
// Email validation
var email = document.getElementById("email").value;
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
// If all validations pass, show the account creation message
alert("Account successfully created!");
return true;
}

function checkInput() {
// Get all input fields
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
var createAccountButton = document.getElementById("createAccountButton");

// Enable the button only if all fields are filled

if (firstName && lastName && email && password && confirmPassword) {
createAccountButton.disabled = false;
} else {
createAccountButton.disabled = true;
}
}
Output:
Login Page:-
Signup Page:
 Learning Outcomes of this Project

 Front-End Web Development - In-Depth Understanding:

Acquired ability to work with HTML for structuring the content of web
pages, CSS for styling, and JavaScript for adding interactivity. Skilled in the
development of an easily accessible, fully operational working web site and a
professional-looking design identical to the real-world applications.

 Design and Implement User Authentication System:
 Learn how to implement a simple user authentication system in the
application, encompassing basic functionality such as Signup and Login. For
this, I should be aware of how:
 Validate user input (username, password, etc.) using JavaScript.
 Simulate application behaviour for storing and retrieving user information
for session purposes, such as how applications would make use of local
storage or JavaScript objects.

 Form Handling and Validation

 Developed skills in creating and handling forms for user registration and login,
using proper validation techniques to ensure secure and correct user inputs:
 Username validation using regular expressions.
 Password validation with simplified rules, ensuring that passwords meet minimum
security requirements (length, letter, number).

 JavaScript-Based Dynamic Content

 Improved knowledge of JavaScript for managing dynamic content on web pages.
For example:
 Real-time form validation (enabling/disabling login buttons based on input).
 Handling form submission for signup and login and dynamically updating
the profile page content
 Future Scope
 Profile Customization

 Profile Picture Upload: Add the ability for users to upload and update their
profile pictures, which will be stored and displayed on their profile page.
 Customizable Profile Fields: Allow users to add or edit additional fields such
as skills, experience, education, and projects to provide a more comprehensive
professional profile.

 Backend Integration and Database Implementation

 Database Connection:

 Implement a proper backend using technologies like Node.js, PHP, or Python

(Flask/Django), along with a database such as MySQL, MongoDB, or Firebase
to store user data securely.
 Store user profiles, login credentials, and activity logs in the database for
persistence across sessions.

 Notifications System

 Real-time Notifications:

 Introduce a notification system to inform users about new connection requests,

messages, profile views, and updates from their network.

 Email Notifications:

 Implement email notifications for activities like connection requests, messages,

or when someone views or endorses a user’s profile

Reference Links

 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
 https://www.w3schools.com
 https://www.javatpoint.com/javascript-form-validation
 https://www.tutorialspoint.com/javascript/