This assignment will require you to do the following: The use of at least three
ID: 3825913 • Letter: T
Question
This assignment will require you to do the following: The use of at least three different types of Events Creating and calling a function -------- -Create a html file called index.html -Within the head, use the Google CDN to use the jQuery library - https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js -Create a jQuery ready function that will hide all of the paragraph tags once the document loads when a button is clicked called “Hide paragraphs” -In the body of the program, create a heading, add a few paragraphs on why your institution is the best institution, and a button -Next, create an ordered list of your favorite Spelman moments and traditions -Add jQuery script to highlight each list element when clicked in blue -Add jQuery script to highlight each heading with a different color -Lastly, create another heading of a different size (i.e. h3) and response as a subheading on why Computer Science is a good major. A click should turn your response blue.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<style>
.highlight {
background-color: cyan;
font-weight: bold;
}
#myDiv p {
margin: 15px;
font-size: 0.917em;
}
#ollist{
display:none;
}
</style>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").slideToggle();
$("ollist").hide();
});
});
function openList1() {
var list = document.getElementById("ollist");
if (list.style.display == "none"){
list.style.display = "block";
}else{
list.style.display = "none";
}
var classHighlight = 'highlight';
var $thumbs = $('.thumbnail').click(function(e) {
e.preventDefault();
$thumbs.removeClass(classHighlight);
$(this).addClass(classHighlight);
});
}
</script>
</head>
<body>
<!--button to hide or show paragraphs-->
<button id="hide">Hide paragraphs</button><br/>
<div id="mydiv">
<h3>Institution info </h3>
<p>This is a paragraph1.</p><br/>
<p>This is a paragraph2.</p>
<h3>Institution info 2 </h3>
<p>This is a paragraph1.</p><br/>
<p>This is a paragraph2.</p>
</div>
<!--on clicking this button ordered list will be displayed-->
<button id = "list1">Next>></button>
<ol id="ollist">
<li><a href="#" class="thumbnail">
<span class="gifttitle">l1</span>
</a> </li>
<li><a href="#" class="thumbnail">
<span class="gifttitle">L2</span>
</a> </li>
<li><a href="#" class="thumbnail">
<span class="gifttitle">l3</span>
</a> </li>
</ol>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.