-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery_faq.html
104 lines (92 loc) · 6.07 KB
/
jquery_faq.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<style>
.visibility {
visibility: hidden;
}
.selected {
background-color: aquamarine;
}
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
}
</style>
</head>
<body>
<!--In a HTML structure, create a definition list containing 8 FAQs about national parks.-->
<!--Add a class to all dd elements named invisible.-->
<!--Create some CSS rules that sets elements with the invisible class to visibility: hidden;.-->
<!--Update the page with jQuery to add a link that toggles the class invisible on and off for all dd elements.-->
<!--Under the FAQ, add 3 unordered lists like above.
Each list should contain a national park name in an h3 element, and a ul of 4 facts about the park.-->
<!--Create a button that, when clicked, makes the last li in each ul have a yellow background.-->
<!--When any h3 is clicked, the lis underneath it should be bolded. Use font-weight: bold to achieve this.-->
<!--When any list item is clicked, first li of the parent ul should have a font color of blue.-->
<!--bonus-->
<!--When any of the dt elements is clicked, the element that was clicked should be highlighted.-->
<h1>8 FAQ's About National parks</h1>
<button id="render-facts-button" type="button" >display answers</button>
<dl>
<dt>Who is the director of the National Park Service?</dt>
<dd class="invisible">Charles F. "Chuck" Sams III is the Director of the National Park Service.</dd>
<dt>What government agency oversees the National Park Service?<dt>
<dd class="invisible">The National Park Service is a bureau of the Department of the Interior. Directly overseeing its operation is the department's Assistant Secretary for Fish, Wildlife and Parks.</dd>
<dt>How many employees are in the National Park Service?</dt>
<dd class="invisible">Permanent, temporary, and seasonal employees: Approximately 20,000</dd>
<dt>How old is the National Park System?</dt>
<dd class="invisible">The National Park Service was created by an act signed by President Woodrow Wilson on August 25, 1916. Yellowstone National Park was established by an act signed by President Ulysses S. Grant on March 1, 1872, as the nation's first national park. </dd>
<dt>What is the origin of the National Park Service arrowhead?<dt>
<dd class="invisible">The arrowhead was authorized as the official National Park Service emblem by the Secretary of the Interior on July 20, 1951. The components of the arrowhead may have been inspired by key attributes of the National Park System, with the sequoia tree and bison representing vegetation and wildlife, the mountains and water representing scenic and recreational values, and the arrowhead itself representing historical and archeological values. </dd>
<dt>How many areas are in the National Park System?</dt>
<dd class="invisible">The system includes 423 areas covering more than 85 million acres in every state, the District of Columbia, American Samoa, Guam, Puerto Rico, and the Virgin Islands. These areas include national parks, monuments, battlefields, military parks, historical parks, historic sites, lakeshores, seashores, recreation areas, scenic rivers and trails, and the White House. </dd>
<dt>What is the largest national park site? Smallest?</dt>
<dd class="invisible">Largest: Wrangell-St. Elias National Park and Preserve, AK, at 13.2 million acres<br>
Smallest: Thaddeus Kosciuszko National Memorial, PA, at 0.02 acres</dd>
<dt>How many people visit the national parks?<dt>
<dd class="invisible">Total recreation visitors to the national parks in 2019: 327,516,619.</dd>
</dl>
<h1>FAQ</h1>
<button id="change-color" type="button">Color Change</button>
<h3>4 Facts About Big Bend National Park</h3>
<ul id="big-bend-facts" class="national-park-facts">
<li>Big Bend National Park covers a total area of 801,163 acres</li>
<li>The number of people visiting Big Bend in 2019 was 463,832</li>
<li>Big Bend was made a national park on June 20, 1935</li>
<li>The lowest elevation found in Big Bend is 1,715 feet at the Rio Grande River</li>
</ul>
<h3>4 Facts About Guadalupe Mountains National Park</h3>
<ul id="guadalupe-mountains-facts" class="national-park-facts">
<li>Guadalupe Mountains National Park covers a total area of 86,416 acres</li>
<li>The number of people visiting Guadalupe Mountains in 2019 was 188,833</li>
<li>Guadalupe Mountains was made a national park on October 15, 1966</li>
<li>The lowest elevation found in Guadalupe Mountains is 3,636 feet near Williams Road</li>
</ul>
<h3>4 Facts About Yosemite National Park</h3>
<ul id="padre-island-facts" class="national-park-facts">
<li>The park’s diverse landscape supports more than 400 species.</li>
<li>Yosemite is home to one of the tallest waterfalls in the world. </li>
<li class="third-item">Yosemite sees almost 3/4 of its visitors in six months.</li>
<li>Yosemite is the only national park to bid to host the winter Olympics.</li>
</ul>
<h3>Bonus</h3>
<div class="container">
<div class="big-screen">
<img id="image1" src="img/bored-ape-club.png" alt="">
</div>
<div class="slides">
<img src="img/mutant-ape-2.png" alt="mutant bored ape yacht club">
<img id="image2" src="img/mutant_ape.png" alt="mutant bored ape yacht club">
<img id="image3" src="img/thumb.cms_-1024x768.jpg" alt="mutant bored ape yacht club">
</div>
</div>
<button id="shuffle-button" type="button">Shuffle</button>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery_faq.js"></script>
</body>
</html>