MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

GOVERNMENT POLYTECHNIC, BEED

[Institute Code: 0032]

MICROPROJECT

Course & Code: - Client Side Scripting (22519)

Title of Micro project: -

“ SOCIAL MEDIA ICONS ”

Subject Teacher Head of Department Principal

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

CERTIFICATE OF MICROPROJECT

This is to certify the following students of CM5I of Diploma in COMPUTER

TECHNOLOGY of the institute GOVERNMENT POLYTECHNIC BEED,
Institute code:0032, have satisfactorily completed MICROPROJECT work in
subject/Course for academic year 2024-25 as prescribed in the curriculum.

Roll Enrollment Name of student Title of

No. Number Microproject

1725 2200320303 Sonawane Anjali Vasant “Social Media Icons ”

Place: - Beed
Date:

Subject Teacher Head of Department Principal

 Teacher Evaluation Sheet

Name of Student: - Sonawane Anjali Vasant Enrollment No: - 2200320303

Programme: Computer Technology Semester: - CM5I
Course Title & Code: - Client side scripting (22519) Roll no: - 1725

Title of the Micro-Project: -

“ SOCIAL MEDIA ICONS ”

Course Outcomes: -
CO1. Create interactive webpages using program flow control structure.
CO2. Implement Function in javaScript.
CO3. Create event Based web forms in javaScript.

Evaluation as per Suggested Rubric for Assessment of Micro Project

Sr.
Characteristic to be assessed Poor Average Good Excellent
No. ( Marks 1 - 3 ) ( Marks 4 - 5 ) ( Marks 6 - 8 ) ( Marks 9- 10 )

[A] Process and Product Assessment (Convert total marks out of 06)
1 Relevance to the course
2 Literature Review/information
collection
3 Completion of the Target as per
project proposal
4 Analysis and data representation
5 Quality of Prototype/Model
6 Report Preparation
Total Marks Out of (6)

[B] Individual Presentation/Viva (Convert total marks out of 04)

1 Presentation
2 Viva
Total Marks Out of (4)

Micro-Project Evaluation Sheet

Process and Product Assessment Total Marks
(6 marks) Individual Presentation/Viva 10
(Note: The total marks taken from the above Rubrics (4 marks)
is to be converted in proportion of ‘6’ marks)

Name and designation of the Teacher: (Lecturer in CM)

Dated Signature…………………………………………………………………………
3
 Annexure –I
Part – A Micro-Project Proposal
(Format for Micro-Project Proposal A about 2-3 pages)

Title of Micro-Project:

“ SOCIAL MEDIA ICONS ”

1.0 Aims/Benefits of the Micro-Project:

The aim of social media icons is to provide users with easy access to social media profiles, enhance
website engagement, promote brand visibility, and ensure a consistent, responsive design across
devices. These icons encourage interaction, drive traffic, and improve user experience by offering a
simple, intuitive way to connect with social platforms..

2.0 Course Outcomes Addressed:

CO1. Create interactive webpages using program flow control structure.

CO2. Implement Function in javaScript.
CO3. Create event Based web forms in javaScript.

3.0 Proposed Methodology

1.First of all, we will study about the topic of project.

2.Then we will collect information about icons.

3.Then I also seek guidance from the subject teacher to collect and understand information.

4.After all I will make report.

5.0 Action Plan

Name of
Sr. Planned Start Planned Responsible
Details of activity date Finish date
No. Team Members
1 Collecting Information about javascript 20/07/2024 09/08/2024 Sonawane Anjali

2 Collecting information about social media 10/08/2024 30/08/2024 Sonawane Anjali

icons
3 Write code and Compile it 31/08/2024 20/09/2024 Sonawane Anjali

Print the Report

21/09/2024 22/09/2024
Sonawane Anjali
4

4
6.0 Resources Required

S.
Name of Resource/material Specifications Qty Remarks
No.

1 Computer, Laptop Processor: i5 , Ram:8GB 01

_
2 Internet, websites -
3 Books - -
4 IDE Visual Studio 01

Names of Team Members with Roll Nos.

Roll No. Name of student

1725 Sonawane Anjali Vasant

5
 Annexure – II

Part – B Micro-Project Report

(Outcomes after Execution) Format for Micro-Project Report (Minimum 6 pages)

Title of Micro-Project:

“Social Media Icons”

1.0 Rational

The rationale behind the social media icons application is to improve user engagement by providing
quick and easy access to social media profiles. It enhances the user experience with recognizable,
consistent icons that encourage interaction and boost visibility across platforms. Additionally, the
responsive, customizable design ensures the icons look great on all devices, supporting brand
consistency and increasing social media traffic.

2.0 Aims/Benefits of the Micro-Project

1. Provide Easy Access: Enable users to quickly navigate to social media profiles via clickable
icons.
2. Boost Engagement: Encourage interaction with social media accounts, potentially increasing
followers and traffic.
3. Enhance User Interface: Offer a clean, consistent, and visually appealing design with
interactive effects.
4. Ensure Customization: Allow flexible styling and behavior adjustments to match the
website's branding.
5. Promote Cross-Platform Compatibility: Ensure the icons are responsive and look great on
all devices.

Course Outcomes Achieved

CO1. Create interactive webpages using program flow control structure.

CO2. Implement arrays and Function in javaScript.
CO3. Create event Based web forms in javaScript.

3.0 Literature Review

Websites:
1) https://www.geeksforgeeks.org/javascript-calculator/
2) https://www.programiz.com/javascript/examples/social media icon
3) https://chatgpt.com/

6
 4.0 Actual Methodology Followed.

Step 1: Study the micro project.

First of all, I derived the micro project list form the project guide and went through the topics. After the topic
will be finalized. The guide had helped to clear the doubts and problem in project making.

Step 2: Collecting information from internet, books.

Then the work distributed as per time limits and particular dates. The preliminary search was collection of
different formats required for microproject. this responsibility was given to Miss. Vaishnavi Bhandari and she
made search of welding form different websites, books, magazines etc. For this we took help of teachers, parents,
neighbors and visited some places also and the collection was done by them.

Step 3: Finalizing the formats in collaboration.

By help of all guidance I will go through sample collected, everyone’s expressed their views on making of
requirement of data. After one hour discussion on it all members finalized the annexure A, B.

Step 4: Finalizing the topic.

After finalizing the format, the topic will be discussed. the different field were discussed by the members.
Among that it was decided to prepare micro project on topic “SIMPLE CALCULATOR”. the topic will be
discussed unanimously and as per the availability of material. And everyone was given deadline for that.

Step 5: Listing the stationary items required for project along with budget.
I prepare stationary list required for report writing and information collection and keep ready budget for it.

Step 6: Discussion of budget in group and finalize the amount.

In the next me and my guidance people discussed their views and budget was finalized.

Step 7: Collection of photos and information/contents.

I had collected the data from different website, books and from personal visit to industry and gave it to project
guide for proof reading. After proof reading the data along with photo were be finalized and every group member
started their job. Information collected and included in this report.

Step 8: Printing/Drawing.
I decided to make report in print format, I took printout of report.

Step 9: Explanation/Preparation.
I collected good information for presentation and I did good preparation of micro-project which was needed for
viva /oral

7
5.0 Actual Resources Used

S. No. Name of Resource/material Specifications Qty Remarks

Processor: i5
1 Computer, Laptop Ram:8GB 01

_
2 -
Internet, Websites
_
3 Reference books -

Visual Studio
4 IDE -

6.0 Skill Developed / Learning outcome of this Micro-Project

Through this microproject the following things are learnt and the skill developed by the group
1. The concept of project understood.
2. The structure and requirement of proposal and report understood.
3. We understood javaScript.
4. We understood programming.
5. The importance of time management and good communication skill is understood.
6. How to search information and use of different online tools came to know.
7. The writing in English skill is developed.
8. The new words are collected.
9. The computer access skill is developed.
10. Able to tackle and solve the problem raised due to miscommunication and misunderstanding.
11. The decision-making ability is developed but needed good cooperation.

9.0 Applications of this Micro-Project

1. HTML: Provides the structure with clickable social media links.

2. CSS: Styles the icons with size, hover effects, and platform-specific colors.
3. JavaScript: Adds an optional click effect that changes the color of the icons when clicked.

8
 PROGRAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Icons</title>
<!-- Link to Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="social-container">
<h1>Follow Us on Social Media</h1>
<div class="social-icons">
<!-- Facebook Icon -->
<a href="https://www.facebook.com" target="_blank" class="social-icon" id="facebook">
<i class="fab fa-facebook-square"></i>
</a>

<!-- Twitter Icon -->

<a href="https://www.twitter.com" target="_blank" class="social-icon" id="twitter">
<i class="fab fa-twitter-square"></i>
</a>

<!-- Instagram Icon -->

<a href="https://www.instagram.com" target="_blank" class="social-icon" id="instagram">
<i class="fab fa-instagram-square"></i>
</a>

<!-- LinkedIn Icon -->

<a href="https://www.linkedin.com" target="_blank" class="social-icon" id="linkedin">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

9
<style>
/* General body and container styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.social-container {
text-align: center;
}

h1 {
margin-bottom: 20px;
font-size: 24px;
}

.social-icons {
display: flex;
justify-content: center;
gap: 30px;
}

.social-icon {
font-size: 50px;
color: #333;
transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
transform: scale(1.1); /* Enlarge icon on hover */
color: #007bff; /* Change color on hover */
}

.social-icon:active {
transform: scale(0.9); /* Slight shrink effect when clicked */
}

.social-icon i {
transition: color 0.3s ease;
}

</style>

10
<script>
// Adding click event listeners to each social icon
document.getElementById('facebook').addEventListener('click', function () {
console.log('Facebook Icon Clicked!');
});

document.getElementById('twitter').addEventListener('click', function () {
console.log('Twitter Icon Clicked!');
});

document.getElementById('instagram').addEventListener('click', function () {
console.log('Instagram Icon Clicked!');
});

document.getElementById('linkedin').addEventListener('click', function () {
console.log('LinkedIn Icon Clicked!');
});

</script>

11
12