Maharashtra State Board of Technical Education

Mumbai. (M.S.B.T.E)

MICRO PROJECT ON

“automatic slide show”

Submitted by

Tanmay Chatare
Malhar Rudrawar

G.S. Mandal’s
Department of Computer Engineering
Marathwada Institute of Technology,
Polytechnic, Chh.Sambhajinagar.

Academic Year: - 2024-2025

 MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION

CERTIFICATE
This is to certify that : -

Roll Enrollment Exam

Name of Student
No. No. Seat No.
49 Tanmay Chatare 2200660196 382747
29 Malhar Rudrawar 2200660196 382727

have successfully completed “automatic slide show” Micro-project for the

subject Client-sidescripting language as in the enclosed ‘Portfolio’ during his
tenure of Completing the Diploma in Computer Engineering CO5I in Academic
Year 2024-25 from M.I.T. Polytechnic, Chh.Sambhajinagar with Institute Code
0066.

Date:

Prof.V.N.Shahane Prof. A.S.Nagrik

Guide H.O.D.

Principal
Marathwada Institute of Technology,
Polytechnic, Chh.Sambhajinagar
 INDEX
Annexure-IV Micro Project Teacher Evaluation Sheet
Annexure-I “Format for Micro-Project Proposal”
1.0 Aim/Benefits of Micro Project

2.0 Course Outcomes Addressed

3.0 Proposed Methodology

4.0 Action Plan

5.0 Resources required

6.0 Name of team member

Annexure-II “Format for Micro-Project Report”

1.0 Rationale

2.0 Aim/Benefits of Micro Project:

3.0 Course Outcomes Achieved

4.0 Literature Review

5.0 Actual Methodology Followed

6.0 Actual Resources Used

7.0 Outputs of the micro projects

8.0 Skill Developed/Learning outcome of this micro project

9.0 Applications of this micro project

 Annexure-IV
Micro Project Teacher Evaluation Sheet

Name of the student: Malhar Rudrawar Enrollment no: 2200660163

Name of Program: Diploma in Computer Engineering Semester : - 5th
Course Title : Client-side scripting language Code: 22519
Title of Micro Project: automatic slide show
Course Outcomes Achieved:
1. CO (a): Create interactive web pages using program flow control structure
2. CO (b): Select, collect and use required information/knowledge to solve the problem/complete
the task.
3. CO (c): Create event-based web forms using JavaScript:

Sr. Characteristics to be assessed Poor Average Good Excellent Sub

(Marks1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10) total
no.

(A) Process and product assessment (cover above total marks out of six marks)

1 Relevance to the course

2 Literature review /Information

collection

3 Completion of target as per

project proposal

4 Analysis of data and

representation

5 Quality of prototype/model

6 Report preparation

(B)individual presentation / viva (convert above total marks out of 4 marks)

7 Presentation

8 Viva

Comments / Suggestions about work:

Signature of Teacher:

Name and Designation: Prof. V.N.Shahae

of the Teacher
 Annexure-I
Micro-Project Proposal
Title of Micro-Project : automatic slide show
1.0 Aim/Benefits of Micro Project
An automatic slideshow using JavaScript improves user experience by
providing smooth transitions between images without manual interaction.
It efficiently showcases content like products or events, reduces cognitive
load, and saves screen space. With customizable effects and easy
implementation, it enhances engagement, accessibility, and presentation,
making it ideal for marketing, portfolios, and responsive designs.

2.0 Course Outcomes Addressed

a. Create interactive web pages using program flow control structure
b. Select, collect and use required information/knowledge to solve the
problem/complete the task.
3.0 Proposed Methodology

1. Setup the HTML Structure:

o Create a container to hold the slideshow.
o Inside the container, add 4 elements, each containing an image.
2. Apply CSS Styling:
o Style the container to ensure proper display of images (e.g., setting width and
height).
o Initially hide all images so that only the active one is visible.
o Add transition effects (such as fading or sliding) for smooth visual transitions.
3. Track the Current Slide:
o Use a variable to keep track of the current slide.
o Define the logic to hide all images and show the current image based on the
variable.
4. Automate Slide Changes:
o Automatically change the image after a fixed interval (e.g., every 3 seconds).
o Adjust the variable to display the next image, resetting back to the first image
after the last one.
5. Loop Through the Slides:
o Ensure the slideshow loops continuously by resetting the tracking variable
after reaching the last slide.
6. Ensure Responsiveness:
o Make the slideshow adaptable to different screen sizes by adjusting the size
of the container and images.
7. Test the Functionality:
o Test the slideshow to ensure smooth transitions between images, automatic
progression, and correct display of content.

This methodology provides a structured approach to create a simple

automatic slideshow with JavaScript and CSS.

4.0 Action Plan

Sr. Details of Activity Planne Planned Name
No d Start Finish Team
Date Date Memb
ers
1 Select the topic for 12/08/20 13/08/20 Tanma
microproject 24 24 y
2 Understand the 13/08/20 23/08/20 Malhar
requirements 24 24
3 Finding information 24/08/20 28/08/20 Tanma
from 24 24 y
textbook and Internet
4 Discuss the microproject 28/08/20 01/09/20 Malhar
with 24 24
project guide
5 Create a html form 02/09/20 06/09/20 Tanma
24 24 y
6 Applied validation to 06/09/20 08/09/20 Malhar
html 24 24
form
7 Execute and test 08/09/20 09/09/20 Tanma
program 24 24 y
 8 Review and report 09/09/20 10/09/20 Malhar
24 24
9 Prepare a report 11/09/20 13/09/20 Tanma
24 24 y
10 Print report and attach to 14/09/20 14/09/20 Tanma
file 24 24 y and
Malhar

5.0 Resources required

Sr. Name of Resource Category Specification Qt Remar
No y. ks
1 Computer system Hardware 16 GB RAM 1
&
Windows 11 OS
2 Browser Software Chrome 1
16002.60.0
3 Vs code Software 1.6 GHz 1
processor, 1GB
ram

6.0 Names of Team Members with Roll No. : -

Roll No. Name of Student

49 Tanmay Chatare
29 Malhar Rudrawar
 Annexure-II
Micro-Project Report

Title of Micro-Project : - Simple Image Editor

1.0 Rationale
JavaScript is limited featured client-side programming language. JavaScript runs at
the client end through the user's browser without sending messages back and forth
to the server. It is widely used by the web developers to do things such as build
dynamic web pages, respond to events, create interactive forms, validate data that
the visitor enters into a form, control the browser etc. This course helps student to
create highly interactive web pages using these features

2.0 Aim/Benefits of Micro Project:

An automatic slideshow using JavaScript improves user experience by providing
smooth transitions between images without manual interaction. It efficiently
showcases content like products or events, reduces cognitive load, and saves
screen space. With customizable effects and easy implementation, it enhances
engagement, accessibility, and presentation, making it ideal for marketing,
portfolios, and responsive designs.

3.0 Course Outcomes Achieved

1. Create interactive web pages using program flow control structure

2. Select, collect and use required information/knowledge to solve the

problem/complete the task.

3. Create event-based web forms using JavaScript:

4.0 Literature Review : -

4.1 Introduction to To-Do List
A To-Do List is a simple yet effective tool for organizing tasks. It helps users
manage their time by keeping track of activities that need to be done. Whether
it’s a personal project, work assignment, or a shopping list, a To-Do List ensures
that nothing is forgotten and tasks are completed on time.
4.2 JavaScript and To-Do List Applications
JavaScript plays a significant role in building interactive and functional To-Do
List applications. It allows users to add, delete, edit, and mark tasks as complete,
making the list dynamic and user-friendly. Additionally, JavaScript can store
 tasks in the browser's local storage, so they persist even after the page is
refreshed.
4.2.1 Simple Image Editor Features Implementation

To create a functional Simple Image Editor using JavaScript, the

following features are commonly implemented:

• Add Images: A user can input a new Images, which is dynamically

added to the list.
• Editing Tasks: Users can remove completed or unnecessary
Images from the list.
• Edit Image: Tasks can be updated or edited for any changes in the
requirements.
• Mark as Complete: Completed tasks can be marked with a
strikethrough or moved to a separate section.
• Local Storage: The list is stored in the browser’s local storage,
ensuring the tasks are retained even after refreshing the page.

4.2.2 Advantages of a To-Do list

• Task Management: It helps users track tasks efficiently,
ensuring deadlines are met.
• Productivity Boost: Completing tasks from the list gives a sense
of accomplishment, boosting productivity.
• Prioritization: Tasks can be prioritized by importance or
urgency, helping users focus on critical tasks first.
• Accessible Anywhere: Web-based Simple Image Editor are
accessible from multiple devices, making task management seamless.

4.4 References

While developing this project, we referred to the following sources:

1. W3Schools: JavaScript Simple Image Editor

o In this tutorial, we learned how to implement a basic Simple
Image Editor using JavaScript, focusing on adding, deleting,
and marking tasks as completed.
2. GeeksforGeeks: Simple image Editor using JavaScript
o This tutorial provided a detailed guide on building a more
advanced Simple Image Editor, including local storage for
task persistence.
 3. JavaScript.info: Working with DOM
o This resource helped us understand how to manipulate the
DOM using JavaScript to dynamically add and remove tasks
from the list.
4. YouTube Video: JavaScript Simple Image Editor
o This video walks through building a Simple Image Editor
from scratch, using JavaScript for adding tasks, and
managing them effectively.
o
5. YouTube Video: Local Storage with JavaScript
o This video tutorial taught us how to use local storage to save
the Simple Image Editor so that tasks persist even after
refreshing the page.

This structure explains the Simple Image Editor, how to build it using JavaScript, the
advantages, challenges, and best practices, along with references to tutorials and videos.

5.0Actual Methodology Followed for Creating a To-Do List:

1. Setup the HTML Structure:

o Create a container to hold the slideshow.
o Inside the container, add 4 elements, each containing an image.
2. Apply CSS Styling:
o Style the container to ensure proper display of images (e.g., setting width and
height).
o Initially hide all images so that only the active one is visible.
o Add transition effects (such as fading or sliding) for smooth visual transitions.
3. Track the Current Slide:
o Use a variable to keep track of the current slide.
o Define the logic to hide all images and show the current image based on the
variable.
4. Automate Slide Changes:
o Automatically change the image after a fixed interval (e.g., every 3 seconds).
o Adjust the variable to display the next image, resetting back to the first image
after the last one.
5. Loop Through the Slides:
o Ensure the slideshow loops continuously by resetting the tracking variable after
reaching the last slide.
6. Ensure Responsiveness:
o Make the slideshow adaptable to different screen sizes by adjusting the size of
the container and images.
7. Test the Functionality:
 o Test the slideshow to ensure smooth transitions between images, automatic
progression, and correct display of content.

This methodology provides a structured approach to create a simple automatic

slideshow with JavaScript and CSS.

6.0Actual Resources Used

Sr. Name of Category Specification Qt Remar
No Resource/Material y. ks
1 Computer system Hardware 16 GB RAM 1
&
Windows 11
OS
2 Browser Software Chrome 1
16002.60.0
3 Vs code Software 1.6 GHz 1
processor, 1GB
ram
 7.0 Outputs of the micro projects
7.0.1 Code: (all the files are in one folder)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slideshow</title>

<!-- Style for Slideshow -->

<style>
/* Basic styles for the slideshow */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

/* Container for the slideshow */

.slideshow-container {
position: relative;
max-width: 1000px;
margin: auto;
overflow: hidden;
}

/* Hide images by default */

.mySlides {
display: none;
}

/* Style for images */

.mySlides img {
width: 100%;
height: auto;
border-radius: 10px;
}

/* Fade effect for transition */

.fade {
animation-name: fade;
animation-duration: 1.5s;
}
 /* Keyframes for fade transition */
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>

<!-- Slideshow container -->

<div class="slideshow-container">
<!-- Slides -->
<div class="mySlides fade">
<img src="image1.jpg" alt="Image 1">
</div>

<div class="mySlides fade">

<img src="image2.jpg" alt="Image 2">
</div>

<div class="mySlides fade">

<img src="image3.jpg" alt="Image 3">
</div>

<div class="mySlides fade">

<img src="image4.jpg" alt="Image 4">
</div>
</div>

<!-- JavaScript for the slideshow -->

<script>
// JavaScript to control the slideshow

let slideIndex = 0;

// Function to show the slides

function showSlides() {
let slides = document.getElementsByClassName("mySlides");

// Hide all slides initially

for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
 }

// Increment slideIndex and reset if it exceeds the number of slides

slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}

// Display the current slide

slides[slideIndex - 1].style.display = "block";

// Change the slide every 3 seconds

setTimeout(showSlides, 3000);
}

// Initialize the slideshow

showSlides();
</script>

</body>
</html>

7.0.2 Output:
First image
Second image

Third image
8.0 Skill Developed/Learning outcome of this micro project

✓ Understanding of Front-End Development: Gained hands-on experience in designing and

developing a user interface (UI) for a automatic slide show application using HTML and CSS. This
includes learning how to structure content using HTML elements and apply styling techniques with
CSS for a visually appealing layout.
✓ JavaScript Programming Proficiency: Developed a stronger grasp of JavaScript for adding
dynamic functionality to web pages. Key skills include:
o Manipulating the DOM (Document Object Model) to add, edit, and delete tasks.
o Writing efficient functions to handle events such as task submission, completion, and
deletion.
o Implementing real-time interaction features like task status updates.
✓ Problem-Solving and Debugging Skills: Enhanced problem-solving abilities by identifying and
addressing bugs or issues in the automatic slide show application. Debugging involved analysing
code errors, refining logic, and improving functionality to ensure seamless task management.
✓ Logical Thinking and Workflow Management: Developed a systematic approach to planning,
designing, and executing the project. This involved breaking down the project into manageable steps,
organizing tasks logically, and following a structured workflow from start to completion.

9.0 Applications of this micro project : -

➢ Personal Task Management System

• The automatic slide show application developed in this project can be used as a personal task
manager to organize daily tasks, set priorities, and track progress. Users can add, edit, delete,
and mark tasks as completed, making it a practical tool for enhancing productivity.

➢ Educational and Learning Platform

• The automatic slide show t application can be implemented as part of an educational platform
for students to manage their assignments, homework, or study plans. Teachers could use it
to assign tasks to students, while students can track their learning progress.

➢ Time Management Tool for Professionals

• Professionals in various fields can use this automatic slide show application to manage
their work schedules, deadlines, and daily to-dos. With some customization, it can be
integrated with calendar tools, providing a comprehensive time and task management
solution.