In: Computer Science
Use JQuery or any other JS library to perform the following – 1pt
Create a JS based menu – 3pt
a. This can be as simple or complex as you want, from having JS change the colors of the links to flyout type menus or anything else you want.
Create a slideshow – 3pt
Create another interactive JS component (your choice) – 3pt a.
When submitting the link to the page, describe what your choice was to ensure I see it.
JSComponents.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.header-text {
text-align: center;
}
.component-wrapper{
margin-bottom:10px;
}
.component-header {
border-bottom: 1px solid #ddd;
padding-bottom:10px;
}
.carousel-caption .slide-text {
color:#000;
}
</style>
<body>
<div class="container">
<h1 class="header-text">Interactive JS
Components</h1>
<div class="container component-wrapper">
<h2 class="component-header">JS DropDown
Menu</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-toggle="dropdown">Dropdown Menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
</ul>
</div>
</div>
`<div class="container component-wrapper">
<h2 class="component-header">JS Slideshow</h2>
<div id="myCarousel" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
<li data-target="#myCarousel"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img style="width:100%;">
<div class="carousel-caption">
<h3 class="slide-text">Slide 1</h3>
<p class="slide-text">First Slide goes
Here!!!</p>
</div>
</div>
<div class="item">
<img style="width:100%;">
<div class="carousel-caption">
<h3 class="slide-text">Slide 2</h3>
<p class="slide-text">Second Slide goes
Here!!!</p>
</div>
</div>
<div class="item">
<img style="width:100%;">
<div class="carousel-caption">
<h3 class="slide-text">Slide 3</h3>
<p class="slide-text">Third Slide goes
Here!!!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel"
data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel"
data-slide="next">
<span class="glyphicon
glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>`
<div class="container component-wrapper">
<h2 class="component-header">JS Collapsible
List</h2>
<p>Click on the panel to open and close. This acts based on
Toggle approach</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseList">Collapsible
list group</a>
</h4>
</div>
<div id="collapseList" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Steps:
3. The above code has three components:
The above components were developed by using jQuery along with Bootstrap