Mahavir Polytechnic, Nashik

(Year: 2024-2025)
Micro Project

Program: Informa on Technology

Semester: IF5I

Course: Client Side Scrip ng Language

Course Code: 22517

Title of the Project: Interac ve Buyer Informa on Form

Members of the Group

Name: Shubham Gorakh Chaudhari Enrollment No: 23611220508

1
 Mahavir Polytechnic

Vision

We strive to educate students to become industry ready engineers having professional a tude and
groomed personality.

Mission

· To provide well defined system to ensure quality educa on by strengthening teaching learning
processes through innova ve prac ces

· To provide a pla orm where students are exposed to the industry, up bridged with the industry
standards and requirements.

· To train students by teaching them leadership and teamwork skills.

· To groom students enriching their personality and social values

IT Department

Vision
IT Department strives to educate students to become Industry ready Engineers having Professional
a tude and groomed personality.

Mission
.To provides well defined system to ensure quality educa on by strengthening teaching learning
processes through innova ve prac ces.

.To provides a pla orm where students are exposed to the Industry, up bridged with the industry
standards and requirements.

.To train students by teaching them leadership and teamwork skills.

.To groom students enriching their personality and social values.

2
 PART A
1.0 Brief Introduc on

The "Interac ve Buyer Informa on Form" is a web-based tool designed to collect essen al data from
customers efficiently. This form is developed using HTML, CSS, and JavaScript, leveraging the
func onality of client-side scrip ng to provide real- me valida on and feedback to users. Such forms
are integral to e-commerce and other web applica ons, where accurate and mely data collec on is
crucial. By using JavaScript, this project aims to create a more interac ve and user-friendly experience,
reducing input errors and enhancing the overall usability of web forms. The project demonstrates how
forms can be made dynamic and responsive with minimal server load. The project also highlights best
prac ces in form design and valida on for secure and reliable data handling..

2.0 Aim/Benefits of the Micro – Project

The primary aim of the project is to design an interac ve form that captures buyer informa on
accurately and in real- me using client-side valida on with JavaScript. This approach helps ensure that
users input correct and properly forma ed data before submission. The benefits include an improved
user experience, reduc on of form submission errors, and a streamlined data collec on process. It also
reduces the need for server-side valida on, thereby lowering the server’s workload. Furthermore, this
microproject offers insights into effec ve client-side scrip ng techniques. Overall, it improves the
efficiency and func onality of web forms for future web developers.

3.0 Course Outcomes Addressed

CO 1: Create interac ve web pages using program flow control structure: The project uses JavaScript
to control the flow between form steps with "Next" bu ons, which is part of program flow control.

CO 2: Implement Arrays and func ons in JavaScript: If you're using arrays to store form data
temporarily or func ons to validate inputs, this CO applies.

CO 3: Create event-based web forms using JavaScript: The form is event-driven as user inputs and
bu on clicks trigger JavaScript ac ons like valida on and moving between steps.

CO 5: Create interac ve web pages using regular expressions for valida ons: You planned to
implement valida ons, and regular expressions can be used for valida ng form inputs like email
addresses or phone numbers.

3
4.0 Proposed Methodology
The proposed methodology for this project involves several steps, star ng with the crea on of the form
structure using HTML. Once the form layout is defined, CSS will be used to style the form for a
professional look and be er user experience. JavaScript will then be implemented to handle client-side
valida on, ensuring that user inputs such as name, email, and contact informa on meet predefined
criteria. Event handling will be used to provide real- me feedback to users. Tes ng will be conducted
across different browsers to ensure compa bility. Finally, any issues will be debugged using browser
developer tools, and the form will be fine-tuned for op mal performance.
The methodology begins by designing the form structure with HTML, followed by applying CSS for visual
appeal. JavaScript is used for form valida on, ensuring that users input correct data in fields such as
email and phone numbers. Event handling will provide immediate feedback to users. The form will be
tested across different browsers to ensure compa bility. Any issues will be debugged and corrected
using browser tools. The final form
will be op mized for performance and func onality.

4
 Progress Report / Weekly Report
Week Dura on Sign of the
Date Work / Ac vity Performed
No in Hrs. Faculty
1 1hr Topic Selec on

2 1hr Finalizing Topic

3 1hr Informa on Search

4 1hr Program Execu on

5 1hr Making Report

6 1hr Project Submission

5.0 Resources Required (major resources such as PC, some machining facility, So ware etc.)

Name Of
Sr. No Specifica ons Quan ty Remarks
Resource/Material

1 Computer i-3, Windows 10 1

Sign of Course Teacher

5
 MICROPROJECT REPORT
1.0 Ra onale

The ra onale behind developing the "Interac ve Buyer Informa on Form" is to demonstrate the
prac cal applica on of JavaScript in crea ng user-friendly forms that capture data effec vely.
Interac ve forms are essen al for modern e-commerce websites as they streamline the data entry
process for users and ensure real- me valida on of input. This project allows for the integra on of
JavaScript func onali es such as event handling, valida on, and interac vity. By crea ng this form, the
project explores the client-side scrip ng that enhances the user experience on web pages. It also
emphasizes the importance of structured and secure data collec on for businesses.

2.0 Aim/Benefits of the Micro – Project

This Micro - Project aims at:

The main aim of this microproject is to develop an interac ve form that collects buyer informa on in
an efficient, user-friendly manner using JavaScript. The form will implement real- me input valida on
and event handling to provide immediate feedback to users. One of the key benefits is reducing errors
during data submission, which improves overall data quality. Addi onally, it enhances the user
experience by providing a smoother, interac ve process. The project also aims to build an
understanding of how client-side scrip ng can influence web applica on development and improve
form usability.
COs addressed by the Micro Project:

Create interac ve web pages using program flow control structure: The project uses
CO 1: JavaScript to control the flow between form steps with "Next" bu ons, which is part
of program flow control.
Implement Arrays and func ons in JavaScript: If you're using arrays to store form
CO 2:
data temporarily or func ons to validate inputs, this CO applies.
Create event-based web forms using JavaScript: The form is event-driven as user
CO 3: inputs and bu on clicks trigger JavaScript ac ons like valida on and moving between
steps.
Create interac ve web pages using regular expressions for valida ons: You planned
to implement valida ons, and regular expressions can be used for valida ng form
CO 5:
inputs like email addresses or phone numbers.

6
 3.0 Literature Review
JavaScript, since its incep on, has been a cornerstone in web development, par cularly in handling
client-side tasks such as form valida on and user interac vity. Studies and web development resources
emphasize the significance of JavaScript in enhancing user experience by reducing server load through
real- me form valida on and data processing on the client side. Ar cles and textbooks on modern
JavaScript frameworks and libraries highlight how essen al JavaScript has become in crea ng dynamic
and responsive web applica ons. This project draws from these principles, using JavaScript for DOM
manipula on and event handling to make forms more responsive and error-proof.

4.0 Actual Methodology

The project follows a structured approach to design and implement the "Interac ve Buyer Informa on
Form" using HTML, CSS, and JavaScript. First, the layout of the form is created using HTML, ensuring
that all necessary fields such as name, contact, and address are included. CSS is then applied to style
the form and make it visually appealing. JavaScript is implemented to handle form valida on, checking
for empty fields, valid email formats, and correct phone numbers. Event listeners are used for real- me
valida on, and form submission is only allowed when all fields meet the valida on criteria. This ensures
a smooth user experience.

5.0 Actual Resources Used

The development of the "Interac ve Buyer Informa on Form" required a combina on of web
development tools and technologies. The resources used include a code editor such as Visual Studio
Code for wri ng HTML, CSS, and JavaScript. The project also involved u lizing browsers like Google
Chrome for tes ng the interac ve features and debugging tools like Chrome Developer Tools to inspect
and resolve any errors. Online resources such as MDN Web Docs were used for referencing JavaScript
func ons and valida on techniques. The knowledge gained from previous coursework and web
development tutorials also played a crucial role in the comple on of the project.

Name Of
Sr. No Specifica ons Quan ty Remarks
Resource/Material

1 Computer i-3, Windows 10 1

7
6.0 Outputs of the Micro-Projects

Source Code Of The Project:

HTML:

<!DOCTYPE html> </div>

<html lang="en" dir="ltr"> <div class="check fas fa-check"></div>
<head> </div>
<meta charset="u -8"> </div>
< tle>Buyer Informa on Form</ tle> <div class="form-outer">
<link rel="stylesheet" href="style.css"> <form ac on="#">
</head> <div class="page slide-page">
<body> <div class=" tle">
<div class="container"> Basic Info:
<header>Buyer Informa on Form</header> </div>
<div class="progress-bar"> <div class="field">
<div class="step"> <div class="label">
<p> First Name
Name </div>
</p> <input type="text">
<div class="bullet"> </div>
<span>1</span> <div class="field">
</div> <div class="label">
<div class="check fas fa-check"></div> Last Name
</div> </div>
<div class="step"> <input type="text">
<p> </div>
Contact <div class="field">
</p> <bu on class="firstNext
<div class="bullet"> next">Next</bu on>
<span>2</span> </div>
</div> </div>
<div class="check fas fa-check"></div> <div class="page">
</div> <div class=" tle">
<div class="step"> Contact Info:
<p> </div>
Bill <div class="field">
</p> <div class="label">
<div class="bullet"> Email Address
<span>3</span> </div>
</div> <input type="text">
<div class="check fas fa-check"></div> </div>
</div> <div class="field">
<div class="step"> <div class="label">
<p> Phone Number
Submit </div>
</p> <input type="Number">
<div class="bullet"> </div>
<span>4</span> <div class="field btn

8
s">
<bu on class="prev-1 prev">Previous</bu on>
<bu on class="next-1 next">Next</bu on>
</div>
</div>
<div class="page">
<div class=" tle">
Payment Method
</div>
<div class="field">
<div class="label">
UPI ID
</div>
<input type="text">
</div>
<div class="field">
<div class="label">
Password
</div>
<input type="text">
</div>
<div class="field btns">
<bu on class="prev-2 prev">Previous</bu on>
<bu on class="next-2 next">Next</bu on>
</div>
</div>
<div class="page">
<div class=" tle">
Login Details:
</div>
<div class="field">
<div class="label">
Username
</div>
<input type="text">
</div>
<div class="field">
<div class="label">
Password
</div>
<input type="password">
</div>
<div class="field btns">
<bu on class="prev-3 prev">Previous</bu on>
<bu on class="submit">Submit</bu on>
</div>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
9
CSS:
@import url('h ps://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
jus fy-content: center;
min-height: 100vh;
overflow: hidden;
background: url("bg.png"), -webkit-linear-gradient(bo om, #0250c5, #d43f8d);
}
::selec on{
color: #fff;
background: #d43f8d;
}
.container{
width: 330px;
background: #fff;
text-align: center;
border-radius: 5px;
padding: 50px 35px 10px 35px;
}
.container header{
font-size: 35px;
font-weight: 600;
margin: 0 0 30px 0;
}
.container .form-outer{
width: 100%;
overflow: hidden;
}
.container .form-outer form{
display: flex;
width: 400%;
}
.form-outer form .page{
width: 25%;
transi on: margin-le 0.3s ease-in-out;
}
.form-outer form .page . tle{
text-align: le ;
font-size: 25px;
font-weight: 500;

}
10
.form-outer form .page .field{
width: 330px; transi on: 0.5s ease; posi on: rela ve;
height: 45px; } transi on: 0.2s;
margin: 45px 0; form .page .field bu on:hover{ font-weight: 500;
display: flex; background: #000; font-size: 17px;
posi on: rela ve; } line-height: 25px;
} form .page .btns bu on{ }
form .page .field .label{ margin-top: -20px!important; .progress-bar .step
posi on: absolute; } .bullet.ac ve{
top: -30px; form .page .btns bu on.prev{ border-color: #d43f8d;
font-weight: 500; margin-right: 3px; background: #d43f8d;
} font-size: 17px; }
form .page .field input{ } .progress-bar .step .bullet span{
height: 100%; form .page .btns bu on.next{ posi on: absolute;
width: 100%; margin-le : 3px; le : 50%;
border: 1px solid lightgrey; } transform: translateX(-50%);
border-radius: 5px; .container .progress-bar{ }
padding-le : 15px; display: flex; .progress-bar .step
font-size: 18px; margin: 40px 0; .bullet.ac ve span{
} user-select: none; display: none;
form .page .field select{ } }
width: 100%; .container .progress-bar .step{ .progress-bar .step
padding-le : 10px; text-align: center; .bullet:before,
font-size: 17px; width: 100%; .progress-bar .step
font-weight: 500; posi on: rela ve; .bullet:a er{
} } posi on: absolute;
form .page .field bu on{ .container .progress-bar .step content: '';
width: 100%; p{ bo om: 11px;
height: calc(100% + 5px); font-weight: 500; right: -51px;
border: none; font-size: 18px; height: 3px;
background: #d33f8d; color: #000; width: 44px;
margin-top: -20px; margin-bo om: 8px; background: #262626;
border-radius: 5px; } }
color: #fff; .progress-bar .step .bullet{ .progress-bar .step
cursor: pointer; height: 25px; .bullet.ac ve:a er{
font-size: 18px; width: 25px; background: #d43f8d;
font-weight: 500; border: 2px solid #000; transform: scaleX(0);
le er-spacing: 1px; display: inline-block;
text-transform: uppercase; border-radius: 50%;
transform-origin: le ; .progress-bar .step:last-child font-size: 15px;
anima on: animate 0.3s linear .bullet:a er{ transform: translate(-50%, -
forwards; display: none; 50%);
} } display: none;
@keyframes animate { .progress-bar .step p.ac ve{ }
100%{ color: #d43f8d; .progress-bar .step
transform: scaleX(1); transi on: 0.2s linear; .check.ac ve{
} } display: block;
} .progress-bar .step .check{ color: #fff;
.progress-bar .step:last-child posi on: absolute; }
.bullet:before, le : 50%;
top: 70%;

11
JavaScript:

const slidePage = document.querySelector(".slide-page");

const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
let current = 1;

nextBtnFirst.addEventListener("click", func on(event){

event.preventDefault();
slidePage.style.marginLe = "-25%";
bullet[current - 1].classList.add("ac ve");
progressCheck[current - 1].classList.add("ac ve");
progressText[current - 1].classList.add("ac ve");
current += 1;
});
nextBtnSec.addEventListener("click", func on(event){
event.preventDefault();
slidePage.style.marginLe = "-50%";
bullet[current - 1].classList.add("ac ve");
progressCheck[current - 1].classList.add("ac ve");
progressText[current - 1].classList.add("ac ve");
current += 1;
});
nextBtnThird.addEventListener("click", func on(event){
event.preventDefault();
slidePage.style.marginLe = "-75%";
bullet[current - 1].classList.add("ac ve");
progressCheck[current - 1].classList.add("ac ve");
progressText[current - 1].classList.add("ac ve");
current += 1;
});
submitBtn.addEventListener("click", func on(){
bullet[current - 1].classList.add("ac ve");
progressCheck[current - 1].classList.add("ac ve");
progressText[current - 1].classList.add("ac ve");
current += 1;
setTimeout(func on(){
alert("Your Form Successfully Signed up");
loca on.reload();
},800);
});

prevBtnSec.addEventListener("click", func on(event){

12
 event.preventDefault();
slidePage.style.marginLe = "0%";
bullet[current - 2].classList.remove("ac ve");
progressCheck[current - 2].classList.remove("ac ve");
progressText[current - 2].classList.remove("ac ve");
current -= 1;
});
prevBtnThird.addEventListener("click", func on(event){
event.preventDefault();
slidePage.style.marginLe = "-25%";
bullet[current - 2].classList.remove("ac ve");
progressCheck[current - 2].classList.remove("ac ve");
progressText[current - 2].classList.remove("ac ve");
current -= 1;
});
prevBtnFourth.addEventListener("click", func on(event){
event.preventDefault();
slidePage.style.marginLe = "-50%";
bullet[current - 2].classList.remove("ac ve");
progressCheck[current - 2].classList.remove("ac ve");
progressText[current - 2].classList.remove("ac ve");
current -= 1;
});

13
Outputs:

Step 1) Basic Informa on

Step 2) Contact Informa on

14
Step 3) Payment Method

step 4) Username & Password

15
 Teacher Evalua on Sheet for Micro Project

Rubrics for Assessment of Micro-Project

Poor Average Good Excellent

Characteris c to be
Sr. No
Assessed (Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10)

1. Relevance to course

2. Literature survey

3. Project proposal

4. Comple on of target
Analysis &
5.
representa onof data
Quality of
6.
Prototype/Model
7. Report prepara on

8. Presenta on

9. Defense

Marks:-

Marks obtained
Marks for by the Total
Enrollment
Name Of Student Group Work individual Marks
No:
(06) based on viva (10)
(04)
23611220508 Shubham Chaudhari

Name and designa on of Faculty Member_______________________________________

Signature: ________________________________________________

16
 Maharashtra State Board of Technical Educa on, Mumbai

CERTIFICATE

This is to cer fy that Mr. Shubham Gorakh Chaudhari Roll No. 48 of 5th Semester of

Diploma in Informa on Technology of Mahavir Polytechnic has completed the Micro

Project sa sfactorily in course Client Side Scrip ng Language (22519) for the

academic year 2024-2025 as prescribed in the curriculum.

Place: Nashik Enrolment No : 23611220508

Date _______________ Exam Seat No _______________________

Mr. O.V.Khute Ms. S.A.Pagare Dr. S.V.Sagare

Course Coordinator HOD Principal

Ins tute Seal

17