Scribd
Upload
7 views

css mp report

Uploaded by

Shubham Padole
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

css mp report

Uploaded by

Shubham Padole
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

A MICROPROJECT REPORT

THIRD YEAR COMPUTER TECHNOLOGY

ON

“Make expandable and collapsible slider of hills and lakes”

MAHARASTRA STATE BOARD OF TECHNICAL EDUCATION


GOVERNMENT POLYTECHNIC SAKOLI

Subject: CSS (Client Side Scripting)


Semester : Fifth

Session : 2022-2023

Submitted By :
Roll No Enrollment No Name
30 2000910066 Shubham A. Padole

Guide By:

Lect. A. A. Bajpayee

GOVERNMENT POLYTECHNIC SAKOLI


2022-2023
1
2
GOVERNMENT POLYTECHNIC SAKOLI
MAHARASHTRA

SUBMISSION
I am the student of Third Year of course in Computer Technology. Sincerely Submit,
that I have completed the time-to-time project as described in this project report by our
skills under the guidance of Lect. A. A. Bajpayee Sir

Name of Student Roll No. Signature


Shubham Padole 30

Signature HOD:
(Project Guide) Lect. V. B. Khobragade
3
DEPARTMENT OF COMPUTER TECHNOLOGY
GOVERNMENT POLYTECHNIC SAKOLI
MAHARASHTRA

ACADEMIC SESSION 2022-2023

ACKNOWLEDGEMENT

It is with deep sense of gratitude, that I take this opportunity to express my sincere thanks to Lect.
A. A. Bajpayee Sir, the guide of my project, for his continuous expertise and assistance and co-
operation. I also express my gratitude to HOD, Lect. V. B. Khobragade Sir for inspiration and
encouragement.

4
INDEX

Ch.
Topic Page
No.
1 Abstract : 6
2 Introduction 7
Requirement Specification :
3 3.1 Software Requirements 8
3.2 Hardware Requirements
4 Design Analysis : 9-13
5 Result Analysis : 14-15
6 Conclusion & References 16

5
Chapter 1: Abstract

Collapsible sections are sections of content that can shrink and expand by clicking on them. They
are a popular way to organize content in such a manner that the user will be able to see the content of a
section only if he wishes. In this article, we will learn how to create a simple collapsible section using
CSS and JavaScript. Many people confuse the words “carousel” and “slider” because they both display
images in a slideshow format while offering some form of control either through arrows or thumbnail
navigation. However, they differ in some aspects. When using sliders you can see only one slide but with
carousels you can show more slides next to each other at the same time.

6
Chapter 2: Introduction

JavaScript Image Slider does not only involve JavaScript, but you can play with HTML and
CSS to create an Image Slider. In a simpler way, It is a slider that allows showing multiple images
on a web application. It is also known as Image Carousels or as slideshows used to display multiple
images, videos, or graphics on the web application. This kind of image slider will be alluring and
catch the attention of users. In real-time scenarios, when we get a requirement to develop an
image slider on an application. A quick reaction from a developer would be to use jQuery plugins.
Here we will not use jQuery but Javascript, HTML, and CSS to design Image Slider. On using jQuery
plugins, we might face chances of code conflict with plugin libraries and existing libraries that we
use in the application.

7
Chapter 3: Requirement Specification

3.1 Software Requirements:

a) Operating system - Windows 10 is used as the operating system as it is stable and supports more
features and is more user friendly
b) Technologies Used :
✓ Front-end Development : HTML and CSS
✓ Back-end Development : JavaScript

3.2 Hardware Requirements :

a) Intel core i5 10th generation is used as a processor because it is fast than other processors an
provide reliable and stable and we can run our pc for longtime. By using this processor we can
keep on developing our project without any worries.
b) Ram 8 GB is used as it will provide fast reading and writing capabilities and will in turn support
in processing.

8
Chapter 4 : Design Analysis

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>CSS Microproject</title>
</head>

<body>

<div style="background: #000; ">

<h2 style="text-align: center; font-weight:bold ; color: white;">Expandable and collapsible


Slider</h2>
</div>

<!-- lake slider code -->


<button class="collapsible">Lakes</button>
<div class="content ">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images\lake\lake1.jpg" alt="First slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\lake\lake2.jpg" alt="Second slide"
height="600px" width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\lake\lake3.jpg" alt="Third slide" height="600px"
width="100%">
9
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\lake\lake4.jpg" alt="Fourth slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\lake\lake5.jpg" alt="Fifth slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\lake\lake6.jpg" alt="Sixth slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\lake\lake7.jpg" alt="Seventh slide"
height="600px" width="100%">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

<!-- hill slider code -->


<button class="collapsible">Hills</button>
<div class="content">
<div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images\hill\hill1.jpg" alt="First slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\hill\hill2.jpg" alt="Second slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\hill\hill3.jpg" alt="Third slide" height="600px"
width="100%">
</div>
10
<div class="carousel-item">
<img class="d-block w-100" src="images\hill\hill4.jpg" alt="Fourth slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\hill\hill5.jpg" alt="Fifth slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\hill\hill6.jpg" alt="Sixth slide" height="600px"
width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\hill\hill7.jpg" alt="Seventh slide" height="600px"
width="100%">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls1" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

<!-- Waterfall slider code -->


<button class="collapsible">Waterfalls</button>
<div class="content ">
<div id="carouselExampleControls3" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images\waterfall\img1.jpg" alt="First slide"
height="600px" width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\waterfall\img2.jpg" alt="Second slide"
height="600px" width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\waterfall\img3.jpg" alt="Third slide"
height="600px" width="100%">
</div>
<div class="carousel-item">
11
<img class="d-block w-100" src="images\waterfall\img4.jpg" alt="Fourth slide"
height="600px" width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\waterfall\img5.jpg" alt="Fifth slide"
height="600px" width="100%">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images\waterfall\img6.jpg" alt="Sixth slide"
height="600px" width="100%">
</div>

</div>
<a class="carousel-control-prev" href="#carouselExampleControls3" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls3" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {


coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}

</script>

12
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>

</body>

</html>

13
Chapter 5 : Result Analysis

14
15
Chapter 6 : Conclusion & References

6.1 Conclusion :

In this project I successfully learn how to make slider in js using html and css. Here I used event listener
for on clicking forward/ backward buttons images changes.

6.2References :

a) Use JavaScript to Make an Element Follow The Cursor | by Matt Croak Code | Level Up
Coding (gitconnected.com)
b) How to move mouse pointer to a specific position using JavaScript ? - GeeksforGeeks
c) The MouseEvent (w3schools.com)
d) Javascript Event Listener | Examples of Javascript Event Listeners (educba.com)

16
17

You might also like