codeup-web-exercises/jquery_faq.html at main · SamLansford/codeup-web-exercises · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery FAQs</title>

    <!--    CSS here-->
    <style>
        body {
            text-align: center;
        }

        .invisible {
            visibility: hidden;
        }

        /*.color {*/
        /*    background-color: lightpink;*/
        /*}*/
        ul {
            list-style-type: none;
        }
    </style>


</head>
<body>
<h1>10 FAQs about National Parks</h1>


<dl>
    <dt class="color">Who is the director of the National Park?</dt>
    <dd class="invisible">The director of the National Parks is Shawn Benge</dd>
    <br>

    <dt class="color">How many employees are in the National Park?</dt>
    <dd class="invisible">Permanent, temporary, and seasonal employees: Approximately 20,000</dd>
    <br>

    <dt class="color">How many people volunteered in 2019?</dt>
    <dd class="invisible">There were more then 279,000 in 2019</dd>
    <br>

    <dt class="color">How old is the National Park system?</dt>
    <dd class="invisible">The National Park service was created on August 25, 1916.</dd>
    <br>

    <dt class="color">How many area are in the National Park system?</dt>
    <dd class="invisible">The system includes 423 areas covering more than 85 million acres in every state.</dd>
    <br>

    <dt class="color">What's the largest National Park site?</dt>
    <dd class="invisible">Largest: Wrangell-St. Elias National Park and Preserve, AK, at 13.2 million acres</dd>
    <br>

    <dt class="color">What's the smallest National Park site?</dt>
    <dd class="invisible">Smallest: Thaddeus Kosciuszko National Memorial, PA, at 0.02 acres</dd>
    <br>

    <dt class="color">How many people visit the National Park?</dt>
    <dd class="invisible">Total recreation visitors to the national parks in 2019: 327,516,619.</dd>
    <br>

    <dt class="color">What is the National Park Service budget?</dt>
    <dd class="invisible">FY 2017 Enacted: $2.932 billion</dd>
    <br>

    <dt class="color">Can people take pets to the National Park?</dt>
    <dd class="invisible">Some national parks welcome pets—in developed areas, on many trails and campgrounds, and in
        some lodging facilities.
    </dd>

</dl>

<a href="#" id="link">Click here</a>

<h3>Facts about Arches park</h3>
<ul>
    <li>Highest Elevation: Elephant Butte 5,653 feet</li>
    <li>Lowest Elevation: Visitor Center 4,085 feet</li>
    <li>Average annual precipitation: 8-10 inches</li>
    <li>Number of documented arches: Over 2,000 (Some may have fallen and new arches may be forming.)</li>
</ul>

<h3>Facts about Badlands park</h3>
<ul>
    <li>It use to be a sea</li>
    <li>It covers a total area of 244,300 acres</li>
    <li>The number of people visiting Badlands in 2019 was 970,998 (All Years)</li>
    <li>Badlands was made a national park on November 10, 1978</li>
</ul>

<h3>Facts about Carlsbad Caverns park</h3>
<ul>
    <li>The land that forms Carlsbad Caverns was once part of an ancient underwater reef called Capitan Reef.</li>
    <li>The caverns were forged by sulfuric acid – not water erosion, as is the case with most limestone caves.</li>
    <li>There are no flowing rivers or streams inside the caves.</li>
    <li>They used ladders like these to tour the caverns.</li>
</ul>
<button class="button">button</button>


<script src="js/jquery-3.5.1.js"></script>


<!--JS Here-->
<script>
    "use strict";
    // turn dd invisible or not
    $(document).ready(function () {
        $("#link").click(function () {
            $("dd").toggleClass("invisible")
        });

        // change dt background color
        $("dt").click(function () {
            $(this).css("background-color", "lightpink");
        });

        // change the last li"s background color with the button
        $(".button").click(function () {
            $("ul li:last-child").css("backgroundColor", "yellow");
        });

        // change the font weight of all li when click any h3
        $("h3").click(function () {
            $("li").css("fontWeight", "bold")
        })

        // change the font color one of the first li when clicked.
        $("li").click(function () {
            $(this).parent().children().first().css("color", "blue")
        })

    });


</script>


</body>
</html>