SHREEYASH PRATISHTHAN’S

SHREEYASH COLLEGE OF ENGINEERING AND TECHNOLOGY

(POLYTECHNIC), CHH. SAMBHAJINAGAR

MICRO-PROJECT REPORT

NAME OF DEPARTMENT: -
ACADEMIC YEAR: - 2024-25
SEMESTER: - 5TH SEMESTER

COURSE NAME:- Client side scripting

COURSE CODE:-22519

MICRO-PROJECT TITLE:-

PREPARED BY:-

UNDER THE GUIDANCE OF: -

 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI
CERTIFICATE
This is to certify that Mr./ Ms. Of 5th Semester of Diploma in Shreeyash College of
Polytechnic has successfully completed Micro-Project Work in Course of client side scripting for the
academic year 2024-25 as prescribed in the
I- Scheme Curriculum.

Date:- Enrollment No:-

Place:-Chh. Sambhajinagar Exam Seat No.:-

Signature Signature Signature

Guide HOD Principal

Seal of Institute
 ACKNOWLEDGEMENT
We wish to express our profound gratitude to our guide who guided us endlessly in framing
and completion of Micro-Project. He / She guided us on all the main points in that Micro-
Project. We are indebted to his / her constant encouragement, cooperation and help. It was
his / her enthusiastic support that helped us in overcoming of various obstacles in the Micro-
Project. We are also thankful to our Principal, HOD, Faculty Members and classmates for
extending their support and motivation in the completion of this Micro-Project.

1) EN.NO.
 • Micro-Project Proposal

Title of Micro-Project:- Interactive tabs

1.0 Aims/Benefits of the Micro-Project

Is to enhance user engagement and streamline navigation within digital interfaces. By
incorporating interactive tabs, users can quickly access relevant sections of content without
leaving the main page, reducing the need for excessive scrolling or loading multiple pages.
This improves the user experience by making information more accessible and organized,
ultimately allowing users to find what they need more efficiently. Additionally, this project
offers a scalable solution for developers, as interactive tabs can be implemented across
various platforms and applications, making it a versatile feature for any digital environment.

2.0 Course Outcomes Addressed:-

Interactive tabs offer a versatile tool for improving user experience by allowing users to
navigate different sections of content seamlessly within the same page. This feature aligns
well with several core course outcomes, particularly in web design and development courses.
First, students will develop a foundational understanding of front-end technologies, as
creating interactive tabs requires proficiency in HTML, CSS, and JavaScript. Through this
process, they will refine their problem-solving and coding skills by implementing
functionality that responds to user actions, enhancing both their technical and logical
thinking abilities. Additionally, working with interactive tabs helps students apply principles
of user interface (UI) and user experience (UX) design, emphasizing the creation of engaging,
intuitive interfaces that prioritize user convenience and accessibility. By focusing on
accessibility, students will also learn to make web components usable for all individuals,
including those with disabilities, thus building a more inclusive approach to design. Overall,
implementing interactive tabs helps students meet key course outcomes related to technical
proficiency, design sensibility, and an understanding of responsive, user-centered design.
2.0 Proposed Methodology :-

The proposed methodology for implementing interactive tabs involves a structured approach
to designing, developing, and testing this dynamic feature within a web application. Initially,
we start by defining the purpose and content structure for the tabs, ensuring each section has
distinct and relevant content that benefits from being grouped under a tabbed interface. Next,
we will implement the tabs using HTML to set up the structure, CSS for styling, and
JavaScript to handle the interactivity. JavaScript will be used to detect clicks on each tab and
display the corresponding content section while hiding others, providing a smooth and
responsive user experience without reloading the page.
To enhance usability and accessibility, we will adhere to best practices by including keyboard
navigability and ARIA (Accessible Rich Internet Applications) attributes, enabling screen
readers to interpret the tabs correctly. Additionally, we will perform cross-browser and device
testing to ensure the tabs function consistently across various environments. Finally, feedback
from user testing will be incorporated to refine the interaction and design, resulting in a
polished, accessible, and user-friendly tabbed interface that enhances the overall navigation
experience on the website. This methodology emphasizes not only the technical
implementation but also the importance of accessibility, user experience, and continuous
testing and improvement
4.0 Action Plan :-

Name of
Sr. Planned Planned
Details of activity Responsible
No. Week Start date Finish
Team Members
date
1 1 &2 Discussion & Finalization of ALL
Topic
2 3 Preparation of the Abstract ALL
3 4 Literature Review ALL
4 5 Submission of Microproject ALL
Proposal ( Annexure-I)
5 6 Collection of information ALL
about Topic
6 7 Collection of relevant ALL
content / materials for the
execution of Microproject.
7 8 Discussion and submission ALL
of outline of the
Microproject.
8 9 Analysis / execution of ALL
Collected data / information
and preparation of
Prototypes / drawings /
photos / charts / graphs /
tables / circuits / Models /
programs etc.
9 10 Completion of Contents of ALL
Project Report
10 11 Completion of Weekly ALL
progress Report
11 12 Completion of Project ALL
Report ( Annexure-II)
12 13 Viva voce / Delivery of ALL
Presentation
4.0 Resources Required :-

Sr. Name of Resources / Materials Specification Qty Remarks

No.
1 Computer System Windows 11 1
2 Software Microsoft 1
Word

Names of Team Members with Enrollment No :-

1. EN.NO.

• Micro-Project Report

Title of Micro-Project:- Interactive tabs

1.0 Rational:-
The rationale behind using interactive tabs lies in their ability to streamline content
presentation and improve user experience on web pages. Interactive tabs organize information
into manageable sections, allowing users to easily navigate through related content without
leaving the page or scrolling excessively. This approach reduces cognitive load by presenting
only relevant information at a time, enhancing focus and reducing visual clutter. For
content-rich applications like educational platforms or e-commerce sites, tabs help users find
what they need more efficiently, contributing to a smoother, more intuitive browsing
experience.Additionally, interactive tabs support responsive design, as they adapt well to
different screen sizes, ensuring usability across devices. By integrating accessibility features,
such as ARIA attributes and keyboard navigability, interactive tabs also cater to diverse user
needs, ensuring inclusivity. Overall, interactive tabs are a practical choice for improving both
functionality and aesthetics, aligning with the goals of creating a user-centered, accessible,
and engaging digital experience
.
2.0 Aims/Benefits of the Micro-Project:-
The Is to enhance user engagement and streamline navigation within digital interfaces. By
incorporating interactive tabs, users can quickly access relevant sections of content without
leaving the main page, reducing the need for excessive scrolling or loading multiple pages.
This improves the user experience by making information more accessible and organized,
ultimately allowing users to find what they need more efficiently. Additionally, this project
offers a scalable solution for developers, as interactive tabs can be implemented across
various platforms and applications, making it a versatile feature for any digital environment.

2.0 Course Outcomes Achieved:-

Interactive tabs offer a versatile tool for improving user experience by allowing users to
navigate different sections of content seamlessly within the same page. This feature aligns
well with several core course outcomes, particularly in web design and development courses.
First, students will develop a foundational understanding of front-end technologies, as
creating interactive tabs requires proficiency in HTML, CSS, and JavaScript. Through this
process, they will refine their problem-solving and coding skills by implementing
functionality that responds to user actions, enhancing both their technical and logical
thinking abilities. Additionally, working with interactive tabs helps students apply principles
of user interface (UI) and user experience (UX) design, emphasizing the creation of engaging,
intuitive interfaces that prioritize user convenience and accessibility. By focusing on
accessibility, students will also learn to make web components usable for all individuals,
including those with disabilities, thus building a more inclusive approach to design. Overall,
implementing interactive tabs helps students meet key course outcomes related to technical
proficiency, design sensibility, and an understanding of responsive, user-centered design.
.
3.0 Literature Review:-

• Code

✓ Index file
<!DOCTYPE html>

<html lang="en">

<head>

<title>Navigable Tabs in HTML</title>

<style>

*{

margin: 0;

padding: 0;

body {

background: white;

.container {

border: 1px solid grey;

margin: 1rem;

}
[data-tab-info] {

display: none;

.active[data-tab-info] {

display: block;

.tab-content {

margin-top: 1rem;

padding-left: 1rem;

font-size: 20px;

font-family: sans-serif;

font-weight: bold;

color: rgb(0, 0, 0);

.tabs {

border-bottom: 1px solid grey;

background-color: rgb(16, 153, 9);

font-size: 25px;

color: rgb(0, 0, 0);

 display: flex;

margin: 0;

.tabs span {

background: rgb(16, 153, 9);

padding: 10px;

border: 1px solid rgb(255, 255, 255);

.tabs span:hover {

background: rgb(55, 219, 46);

cursor: pointer;

color: black;

</style>

</head>

<body>

<!-- Body Container -->

<div class="container">
 <!-- Tabs Detail -->

<div class="tabs">

<span data-tab-
value="#tab_1">Tab 1</span>

<span data-tab-
value="#tab_2">Tab 2</span>

<span data-tab-
value="#tab_3">Tab 3</span>

</div>

<!-- Tab content -->

<div class="tab-content">

<div class="tabs__tab active"

id="tab_1" data-tab-info>

<p>Welcome to
GeeksforGeek.</p>

</div>

<div class="tabs__tab" id="tab_2"

data-tab-info>

<p>Hello Everyone.</p>

</div>

<div class="tabs__tab" id="tab_3"

data-tab-info>
 <p>Learn cool stuff.</p>

</div>

</div>

</div>

<script type="text/javascript">

// function to get each tab details

const tabs =
document.querySelectorAll('[data-tab-
value]')

const tabInfos =
document.querySelectorAll('[data-tab-
info]')

tabs.forEach(tab => {

tab.addEventListener('click', () => {

const target = document

.querySelector(tab.dataset.tabValue);

tabInfos.forEach(tabInfo => {

tabInfo.classList.remove('active')

})

target.classList.add('active');
 })

})

</script>

</body>

</html>
 • BLOCK DIAGRAM

4.0 Actual Methodology Followed:-

Project The actual methodology followed for implementing interactive tabs involved
several key phases: planning, development, testing, and refinement. Here’s a step-by-step
breakdown of each stage in the methodology:
Requirement Gathering:
We began by identifying the primary purpose of the interactive tabs and the content that each
tab would display. This helped ensure the tabs served a clear functional purpose and provided
value to users.
Content Structuring:
Organized the content into sections that were best suited for a
tabbed layout, making it easier for users to access related information without unnecessary
scrolling.
UI/UX Consideration:
In the design phase, emphasis was placed on creating a clean, intuitive user interface that
would be easy to navigate. We considered factors such as readability, visual hierarchy, and the
positioning of tabs for optimal user flow.
 2. Development
HTML Structure:
Developed the HTML framework, creating distinct div elements for
each tab and assigning IDs for JavaScript control. Each tab section was marked up in a
way that allowed for dynamic content switching.
CSS Styling:
Styled the tabs and content areas using CSS to distinguish active inactive
states visually. Key styling features included color changes for active tabs, padding for and to
JavaScript for Interactivity:
Developed a JavaScript function that toggles content visibility based on user selection. The
uses classList manipulation to show or hide specific tab content, providing a seamless and
responsive experience.
Accessibility Implementation:
Included ARIA attributes (like aria-controls and aria-selected and ensured keyboard
navigability. This step was critical to making the tabs accessible to us
who rely on screen readers or keyboard-only navigation.

3. Testing
Cross-Browser Testing:
Tested the tabs on different browsers (Chrome, Firefox, Safari, Edge) to ensure consistent
functionality and styling.
Responsive Design Testing:
Ensured the tabs were responsive by testing them on multiple screen sizes (desktop, tablet, and
mobile) to verify usability on various devices.
User Testing:
Conducted user testing sessions to observe how users interacted with the tabs.Feedback focused
on ease of navigation, clarity of content organization, and visual accessibility.

4. Refinement
Bug Fixes:
Addressed any issues discovered during testing, such as alignment problems on devices or
browser inconsistencies in displaying active states.
Performance Optimization: Optimized the JavaScript code for better performance by
minimizing DOM manipulation and applying CSS transitions for smoother animations.
Final Accessibility Checks: Re-checked accessibility features to ensure compliance with best
practices, making the interactive tabs usable for individuals with disabilities.
Summary
The methodology emphasized a user-centered approach, focusing on both functionality and
accessibility. By following a structured development process and gathering user feedback, we
successfully created an interactive tab system that enhanced the navigation experience, offered
a clean design, and maintained accessibility standards
 • Advantages of Interactive tabs

• Enhanced User Experience: Interactive tabs provide a seamless way for users to access
specific content without leaving the page, reducing navigation complexity and overall
engagement.

• Efficient Content Organization: By grouping related content into tabs, information is

neatly organized, making it easy for users to find what they need quickly and without
overwhelming them with excessive information.

• Space-Saving Layout: Tabs allow multiple sections of content to be displayed within a

limited space, making it ideal for mobile and small-screen devices where space is a premium.

• Improved Aesthetics: Interactive tabs contribute to a clean and professional design by

keeping non-relevant information hidden until needed, reducing visual clutter and enhancing
overall look and feel of the page.

• Accessibility and Usability: When properly designed, interactive tabs support keyboard
navigation and screen readers, ensuring that the feature is accessible to all users, include those
with disabilities.
 • Disadvantages of Interactive tabs

While interactive tabs offer many benefits, there are also some disadvantages to consider:

1. Limited Space for Content : Tabs can restrict the amount of content shown in each section
If there is too much information in a single tab, it can lead to overcrowding and affect
readability, especially on smaller screens.

2. Potential for Poor Accessibility : If not implemented properly, tabs may be difficult for
users relying on screen readers or keyboard navigation, making the content inaccessible
for some users. Additional coding effort is often required to meet accessibility standards.

3. Usability Challenges on Mobile Devices : On small screens, tabs can become cramped,
and users may find it difficult to tap accurately on each tab. Responsive designs are
necessary but may not always provide an optimal experience on all devices.

4. Content Hidden from Search Engines : Content within tabs can sometimes be hidden
from search engine crawlers, particularly if JavaScript is used to load content dynamically.
This can impact SEO if important information is placed inside tabs.

6.0 Actual Resources Used:-

SR Name of Specifications Qty Remarks

NO. Resource/material
1. Computer System Windows 11 1

2. Software Microsoft Word 1

7.0 Outputs of the Micro-Projects:-

The The output of interactive tabs is a dynamic and efficient content navigation system where
users can switch between different sections of content without reloading the page. Each tab
acts as a clickable button, revealing its associated content while hiding others. The active tab
ivs visually highlighted to indicate which section is currently displayed. This interaction
happens instantly, often with smooth transitions, providing a seamless user experience.
Interactive tabs also adapt well to different screen sizes, ensuring accessibility and usability
across devices.
Conclusion:-
In conclusion, the stopwatch micro-project serves as a valuable educational experience that
only reinforces fundamental programming skills but also provides practical insights into the
software development lifecycle. By engaging in the creation of a functional application,
participants gain hands-on experience with key concepts such as time management, us design,
real-time functionalities. The project fosters critical thinking and problem-solving abilities
through the implementation of various features and algorithms, while also emphasizing the
importance of testing, documentation, and user feedback. Furthermore, the outputs of this
including a well-designed application and comprehensive documentation, enhance participant
portfolios and showcase their capabilities to potential employers. Overall, the stopwatch
microproject not only equips learners with essential technical skills but also cultivates a deepe
understanding of the collaborative and iterative nature of software development, preparing the
for future challenges in the field.
 References:-
www.google.com
www.shiksha.com
www.studocu.com

MICRO-PROJECT EVOLUTION SHEET

Name of Student:- En. No

Name of Program:- Semester:-5th
Course Name:- Operating System Course Code:-22519 `
Title of The Micro-Project:-

Sr. Poor Average Good Excellent Sub

No. Characteristic to be (Marks1-3) (Marks4-5) (Marks 6-8) (Marks9-10) Total
assessed
(A) Process and Product Assessment (Convert Below total marks out of 6Marks)

1 Relevance to the course

2 Literature
Review/information
collection
3 Completion of the Target as
Per project proposal
4 Analysis of Data and
representation
5 Quality of Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva(Convert Below total marks out of 4Marks)

7 Presentation
8 Viva
 (A) (B)
Total Marks
Process and Product Individual Presentation/ Viva
10
Assessment (6 marks) (4 marks)

Comm ents/Suggestions about team work/leadership/inter-personal communication (if any)

Name of Course Teacher:-

Dated Signature:-