Question

In: Computer Science

Use JQuery or any other JS library to perform the following – 1pt Create a JS...

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.

Solutions

Expert Solution

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:

  1. Save above source code as JSComponents.html or by any name with html file extension.
  2. Then run that html file in browser, you will below output. Please find screenshot below:

3. The above code has three components:

  • JS Dropdown Component
  • JS Slideshow Component
  • Create another interactive JS component - This is JS collapsible List component, using this user can be shown list of items this component contains in its container.

The above components were developed by using jQuery along with Bootstrap

venereology answered 10 months ago
Next > < Previous

Related Solutions

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
a) Use the internet, library, or other information source to research imports and exports for any...
a) Use the internet, library, or other information source to research imports and exports for any state or country in the world. Pick a country or state and discuss its import goods and export goods. You should include some dollar values or % of GDP figures b) For the country you choose, discuss some possible sources of comparative advantage for that economy.
use c++ (4) Perform error checking for the data point entries. If any of the following...
use c++ (4) Perform error checking for the data point entries. If any of the following errors occurs, output the appropriate error message and prompt again for a valid data point. If entry has no comma Output: Error: No comma in string. (1 pt) If entry has more than one comma Output: Error: Too many commas in input. (1 pt) If entry after the comma is not an integer Output: Error: Comma not followed by an integer. (2 pts) Ex:...
Use Google Scholar or the Library tab on Blackboard to find a research study in any...
Use Google Scholar or the Library tab on Blackboard to find a research study in any area of interest to you that involves hypothesis testing. Describe the study, hypothesis test, null/alternative hypothesis, alpha value, one or two-tailed test, results, and inferences made. Please make sure you cite references to any sources you use for this question. Provide a link to the actual study so that classmates can review the hypothesis test data. Explain the inferences you make from these results,...
Use Google Scholar or the Library tab on Blackboard to find a research study in any...
Use Google Scholar or the Library tab on Blackboard to find a research study in any area of interest to you that involves hypothesis testing. Describe the study, hypothesis test, null/alternative hypothesis, alpha value, one or two-tailed test, results, and inferences made. Please make sure you cite references to any sources you use for this question. Provide a link to the actual study so that classmates can review the hypothesis test data. Explain the inferences you make from these results,...
Draw the Use Case Diagram for the case You have to create a Community Library Borrowing...
Draw the Use Case Diagram for the case You have to create a Community Library Borrowing System based on the following requirements: When new books arrive, these books must be cataloged into the system by a librarian (i.e., entered in the system). The system also needs to record who has borrowed what books. When someone (called a patron in library terms) borrows a book, the system checks his or her library card to ensure that it is still valid and...
Language: Java or C (NO OTHER LANGUAGE) Do NOT use Java library implementations of the data...
Language: Java or C (NO OTHER LANGUAGE) Do NOT use Java library implementations of the data structures (queues, lists, STs, hashtables etc.) Have a unit test implemented in main(). And comment every code. Show examples from the executions. Assume that the edges defined by the vertex pairs in the data base are one-way. Question: Write a program that can answer if there is a path between any to vertices. For the vertex pairs use this as your input example: AL...
Language: Java or C (NO OTHER LANGUAGE) Do NOT use Java library implementations of the data...
Language: Java or C (NO OTHER LANGUAGE) Do NOT use Java library implementations of the data structures (queues, lists, STs, hashtables etc.) Have a unit test implemented in main(). And comment every code. Show examples from the executions. Assume that the edges defined by the vertex pairs are two-way. Question: First step: write a program based on DFS which can answer questions of the type: "Find the a path from X to Y" Which should result in a list of...
Language: Java or C (NO OTHER LANGUAGE) Do NOT use Java library implementations of the data...
Language: Java or C (NO OTHER LANGUAGE) Do NOT use Java library implementations of the data structures (queues, lists, STs, hashtables etc.) Have a unit test implemented in main(). And comment every code. Show examples from the executions. Question: First step: write a program based on DFS which can answer questions of the type: "Find the a path from X to Y" Which should result in a list of vertices traversed from X to Y if there is a path....
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop",...
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop", "Back", "Reset". <button type="button"> 2. Add "glyphicon-shopping-cart" to <div id="sc" style="font-size: 100px; color: blue; ">. Use CSS in embeded style to set <style type="text/css">     #sc{ border-style: dotted; /* Required to animate border width */ border-color: red; border-width: 0; } </style> 3. <script> - "Start", call "animate()" function to move it to right by 300px for each click, speed is 2000. left: "+=300px". Hint:...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT