A

MICRO PROJECT REPORT ON

"Create a webpage with a slideshow of six images in one section and
another section for additional content."
Program & Program code : CO-5-I

Course : Client Side Scripting

Course code : 22519

Submitted by

Name of students Enrollment No Program

1. Manoj Hanumant Waghmare 2214640040 CO -5-I
2. Sandhya Hanumant Waghmare 2214640050 CO -5-I
Under the Guidance of

Prof.
In partial fulfillment of requirement for the award of Diploma in
Computer Engineering

MSBTE, Mumbai.

Academic Year: 2024-25

DEPARTMENT OF COMPUTER ENGINEERING

S.S.M. ADSUL POLYTECHNIC COLLEGE, CHAS,
AHMEDNAGAR-414 005(M.S)
 DEPARTMENT OF COMPUTER ENGINEERING

S.S.M. ADSUL POLYTECHNIC COLLEGE,

CHAS, AHMEDNAGAR-414 005(M.S)

CERTIFICATE
This is to certify that the micro project report entitled

"Create a webpage with a slideshow of six images in one section

and another section for additional content."
Submitted by

Name of student Enrollment No program

1. Manoj Hanumant Waghmare 2214640040 CO-5-I

2. Sandhya Hanumant Waghmare 2214640050 CO-5-I

of semester V institute, Sau. Sundarabai Manik Adsul Polytechnic, Chas, Ahmednagar (code:
1464) has completed the micro project satisfactorily in course (22519) for the Academic year 2024-
25as prescribed in the MSBTE curriculum.

Place: Ahmednagar
Date: / /2024.

Prof. Prof. Hole P.P. Prof. Gadakh.R.S

(Micro Project guide) (Head of Dept.) (Principal)

 ACKNOWLEDGEMENT

I take this opportunity to acknowledge the constant encouragement and continuous help given to me
by my guide I convey my sincere thanks to his valuable timely suggestion. I would also like to
thanks principal Prof. Gadakh R.S. and Head of Computer Department Prof. Hole.P.P I would also
like to thank teaching staff of Computer Department for helping us to achieve this goal.
I am also thankful to those who directly or indirectly helped me for completing this micro project. I
would like to thank my parents without whose supports; the completion of the micro project would
not have been possible.
Sr.no Topic Page no

Part A

1.0 Introduction

2.0 Aim of Project

3.0 Action Plan

4.0 Course Outcome Integrated

5.0 Learning Outcomes

6.0 Device Specifications

Part B

1.0 Step 1

2.0 Step 2

3.0 Step 3

4.0 Step 4

5.0 Step 5

6.0 Output

7.0 References

8.0 Conclusion
 PART – A
 Introduction–
In the ever-evolving world of web development, creating
interactive and engaging web content is paramount. One
way to captivate your audience is through the use of
slideshows. Slideshows are a versatile tool, useful for
displaying images, promoting products, or sharing
information in a dynamic manner. In this project, we have
embarked on the journey to build a simple yet effective
JavaScript-based slideshow, designed to showcase six
unique images, embedded within a carefully crafted
webpage.

 Aim of Micro Project –

The aim of this project is to enable participants to build a
simple but effective slideshow using JavaScript while
offering a practical learning experience and enhancing web
interactivity and user engagement. By accomplishing this
aim, participants will improve their web development skills
and be better prepared for creating dynamic web content in
their future projects.

 Resources Required
Sr.no Name of resource Specification Quantity

1 Operating system Windows 11 1

2 Computer system AMD Ryzen 7, 1

5000 series, 8GB RAM

3 Development software MS Word 1

1.Action Plan 1

Sr. no Detail of Activity Plan start date Plan finish date Group member name

1) Analysis of program Vaishnavi Vijay Dhanode

2) Show project to Guide and Vaishnavi Vijay Dhanode

modifications

3) Deciding role and responsibility Ayush Paresh Surve

of every group member

4) Preparation and collection of Paresh Chaudhari

information required for project

5) Designing of project Sameer Pradeep Jadhav

6) Making final project Sameer Pradeep Jadhav

2.Device Specifications:
Device name - Sameer
Processor - AMD Ryzen 7 5825U with Radeon Graphics 2.00 GHz Installed RAM -
8.00 GB (7.35 GB usable)
Device ID - 1FFF6026-F1DE-4530-B014-7015685AEB64xx
Product ID - 00342-42606-12044-AAOEMxx
System type - 64-bit operating system, x64-based processor
Pen and touch - No pen or touch input is available for this display
 3.Brief Explanation –
The project's core objective is to design and implement a straightforward yet engaging
JavaScript-based slideshow within a two-section webpage. This undertaking aims to
offer a hands-on learning experience in web development, catering to individuals at
various skill levels. The heart of the project is the JavaScript slideshow, showcasing six
distinct images that transition seamlessly, adding a captivating visual element to the
webpage. Structured to maintain a user-centric design, the webpage is divided into two
sections, with the slideshow as the central focus in one section, while the other serves for
supplementary content. Importantly, the project encourages customization, allowing
participants to select their own set of images and exercise their creativity. This creative
liberty, along with the practical application of HTML, CSS, and JavaScript, offers
participants a comprehensive understanding of web development and an opportunity to
enhance user engagement through interactive web content. Ultimately, the project
enables individuals to improve their web development skills while creating an engaging
and visually appealing digital presentation.

4.Course Outcomes Integrated:

Understand HTML Structure: Create
Well-structured HTML documents, including the division of content into sections.
Apply
UtilizeCSS
CSSStyling:
for webpage styling, with the ability to customize the appearance of
elements such as the slideshow and content sections. Develop and implement
Implement
JavaScript code forJavaScript Functionality:
the automatic transition of images within a slideshow, demonstrating
proficiency in manipulating the Document Object Model (DOM).
Promote User-Centric Design:
Apply user-centric design principlesby structuring web content for clarity and ease of
navigation, with a clear focus on the central slideshow.
Enhance User Engagement:
Develop skills to create interactive and engaging web content, in this case, a slideshow,
to capture and maintain user attention.
5.Actual Procedure Followed:
 Set Up Your Project : Create a project folder.
Choose six images for your slideshow.
Create HTML: file with two sections, one for the slideshow and another
for content.
Create CSS: Style your webpage using a CSS file.
•Implement JavaScript: Write JavaScript to display images in a slideshow.
Test Your Project : Open the HTML file in a browser to ensure your
 Slideshow works. buttons, captions, or additional
features.Customize and Refine(optional): Enhance Your project with buttons, captions,
or additional features.
6.Learning outcomes of Micro project:
 HTML Proficiency: Participants will develop proficiency in structuring web content
using HTML, including creating sections and embedding images.
 CSS Styling Skills: Learners will gain the ability to style web elements using CSS,
ensuring a visually appealing and responsive design for the webpage.
 JavaScript Fundamentals: Participants will understand the fundamentals of
JavaScript, focusing on DOM manipulation to create an interactive slideshow.
 User-Centric Design: Students will learn the importance of usercentric design by
structuring web content to enhance user experience, with a clear focus on the slideshow.
 Interactive Web Development: The project emphasizes creating interactive web
content, introducing learners to interactivity and engagement techniques.
 Creative Expression: Participants will have the opportunity to exercise creativity by
selecting and displaying a unique set of images, promoting individuality in web design.
 Real-World Application: This project provides practical, hands-on experience,
allowing learners to apply their skills in a real-world context.

Part - B
Step 1: Set Up Your Project

Create a project folder on your computer to organize your files.

Step 2: Gather Images

Choose six unique images you want to feature in your slideshow. Ensure
they are properly sized and have a consistent aspect ratio for a polished
look.

Step 3: Create HTML Structure

Create an HTML file (e.g., index.html) in your project folder. Structure

it like this:

<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Lorem ipsum dolor sit
amet</div>
</div>
<div class="showSlide fade">
<img src="images/img2.jpg"/>
<div class="content">Lorem ipsum dolor sit
amet</div>
</div>
<div class="showSlide fade">
<img src="images/img3.jpg"/>
<div class="content">Lorem ipsum dolor sit
amet</div>
</div>
 <div class="showSlide fade">
<img src="images/img4.jpg"/>
<div class="content">Lorem ipsum dolor sit
amet</div>
</div>
<!-- Navigation arrows -->
<a class="left" onclick="nextSlide(-1)">?</a>
<a class="right" onclick="nextSlide(1)">?</a>
</div>
</body>

Here, <div class= "slidercontainer"> is the main container for the slider, and <div class=
"showSlide fade"> is the slider images section that is repeating.
Step 4:
Write the JavaScript code. Considering it a small example, I am writing the code in the same
HTML page using <script type= "text/javascript"></script>.
You can create an external JS file in the project path and refer it to the HTML page if
required.
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides =
document.getElementsByClassName("showSlide");
 if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display =
"block";
}
</script>
All the above functions are user-defined. We only write some logic to read the slides and
show.
Step 4
Now, it's time to apply CSS to showcase the images in a proper position with some
styles. Below is the final code,
HTML, JavaScript, CSS Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Slider</title>
<style type="text/css"> body {
margin: 0;
background: #e6e6e6;
}
.showSlide {
display: none
}
.showSlide img {
width: 100%;
}
.slidercontainer {
max-width: 1000px;
position: relative;
margin: auto;
}
.left, .right {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px; color: white;
font-weight: bold; font-size: 18px;
transition: 0.6s ease; border-radius: 0 3px 3px 0;
}
.right {
right: 0;
border-radius: 3px 0 0 3px;
}
.left:hover, .right:hover {
background-color: rgba(115, 115, 115,
0.8);
}
.content {
color: #eff5d4;
font-size: 30px;
padding: 8px 12px;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
 animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}

@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}

</style>
</head>
<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Slide1 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img2.jpg" />
 <div class="content">Slide2 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img3.jpg" />
<div class="content">Slide3 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img4.jpg" />
<div class="content">Slide4 heading</div>
</div>
<!-- Navigation arrows -->
<a class="left" onclick="nextSlide(-1)">?</a>
<a class="right" onclick="nextSlide(1)">?</a>
</div>

<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);

function nextSlide(n) {
displaySlides(slide_index += n);
}

function currentSlide(n)
{ displaySlides(slide_index = n);
}

function displaySlides(n)
{ var i;
var slides =
document.getElementsByClassName("showSlide");

if (n > slides.length) { slide_index = 1 }

if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
"block"; slides[slide_index - 1].style.display =
}
</scrip>
</body>
</html>
 Output:
 References:
1- www.javacssscript.com

2- www.featuresofcss.in

3- https://www.geeksforgeeks.org

4- www.getthebestinfoaboutjava.com

5- www.allthebestforyou.com

 Conclusion:

In conclusion, creating a simple slideshow in JavaScript and designing a webpage

with two sections, as outlined in this project, offers a valuable opportunity for web
development enthusiasts to learn and apply fundamental web development skills. By
following the steps provided, individuals can achieve the following:

Proficiency in HTML: Participants will gain the ability to structure web content
effectively, including organizing sections for better user experience.
CSS Styling Skills: The project allows for the application of CSS to create visually
appealing and responsive web designs, maintaining a professional appearance.
JavaScript Fundamentals: Learners will acquire a foundational understanding of
JavaScript, focusing on DOM manipulation, enabling them to create interactive web
elements like the slideshow.
User-Centric Design: The project emphasizes the importance of user-centric design,
promoting a clear focus on the central slideshow to enhance user engagement.
Interactive Web Development: By implementing the slideshow, participants learn how
to make web content interactive and engaging, improving the overall user experience.
Creative Expression: Customization of the project through the selection and display
of unique images encourages individual creativity in web design.
Real-World Application: This project offers practical, hands-on experience in web
development, providing participants with skills applicable in real-world contexts.
Problem-Solving Abilities: Learners will improve their problem-solving skills,
particularly in debugging and troubleshooting code to ensure the functionality of the
slideshow.
Visual Presentation: The project underscores the importance of visual presentation,
including image selection, positioning, and size, for creating aesthetically pleasing
web content.
Documentation and Communication: Participants will enhance their documentation
and communication skills by explaining the project's design, functionality, and
purpose in a clear and coherent manner.
 ANNEXURE II
Evolution Sheet for the Micro Project

Academic Year : 2024-25 Name of Faculty : Prof.

Course : CSS Course Code : 22519 Semester : 5th

Title of the Project : Create a webpage with a slideshow of six images in one section
and another section for additional content

(A) COs addressed by the Micro Project:

A: CO1: Understanding of Client-Side Scripting Languages
Students will demonstrate proficiency in using client-side scripting languages such as JavaScript
To create dynamic web content.

Major learning outcomes achieved by students by doing the Project: (a)Practical

outcomes: Proficiency in Client-Side Scripting:
Students will gain hands-on experience with JavaScript, learning how to control
and enhance webpage functionality, such as creating an image slideshow.

(b) Unit outcomes in Cognitive domain:

Unit 1: Cognitive Domain Outcomes: Knowledge:

Students will recall and understand the basic syntax and functionality of HTML, CSS, and

JavaScript.

2: Comprehension:
Students will explain how client-side scripting enhances web functionality and interactivity,

(c)Outcomes in Affective Domain: Receiving:

Students will show interest and responsiveness to the task of creating a webpage,
engaging with the project requirements and guidelines.

Comments/Suggestion about team work/leadership/inter-personal communication

(if any)
Marks out of 4 for
Marks out of 6 for Total
Roll performance in oral/
Student Name performance(D5 out of
No. presentation (D5
Col. 8) 10
Col.9)
1 Manoj Hanumant Waghmare
2 Sandhya Hanumant Waghmare

(Name & Signature of Faculty)