codeup-web-exercises/jquery_faq.html at master · michaelmeyer26/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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery FAQ</title>
    <style>
        .invisible {
            visibility: hidden;
        }

        .highlight {
            background-color: #e7ff00;
            font-size: 1.1em;
        }

        .bold {
            font-weight: bold;
        }

        #picture-set {
            display: flex;
            justify-content: space-around;
        }

        .picture {
            width: 25%;
        }

        .yellowstone {
            background-image: url("img/yellowstone.jpg");
        }

        .big-bend {
            background-image: url("img/bigbend.jpg");
        }

        .everglades {
            background-image: url("img/Everglades.jpg");
        }

        .picture-frame {
            border: 15px solid saddlebrown;
            padding: 10px;
            margin: 5px auto;
            height: 300px;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .swap-button {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="newsletter">
    <h1>Would you like to sign up for our newsletter?</h1>
    <span id="confirm">X</span>
</div>

<h2 style="display: none" id="register">Please register for our site!</h2>

<h2>National Parks Facts</h2>
<button id="toggler">Show/Hide Answers</button>

<dl>
    <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. View the National Park System timeline.</dd>
    <br>

    <dt>How many areas are in the National Park System?</dt>
    <dd class="invisible">The system includes 419 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. Learn more about national park designations. See the complete list of National Park Service units and related areas by type and number.</dd>
    <br>

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

    <dt>Okay, what is the smallest?</dt>
    <dd class="invisible">Thaddeus Kosciuszko National Memorial, PA, at 0.02 acres</dd>
    <br>

    <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>
    <br>

    <dt>What was the most visited National Park last year?</dt>
    <dd class="invisible">As of 2020 it was the Great Smoky Mountains National Park, with about 12.5 million recreational visits.</dd>
    <br>

    <dt>Can I bring my pet to a 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>
    <br>

    <dt>What do I need to know about driving off road in national parks?</dt>
    <dd class="invisible">Before you head out, check with the national parks that you intend to visit. In many national parks, off-road driving is illegal. Where off-road driving is allowed, the National Park Service regulates it.</dd>
    <br>

    <dt>What are concessions?</dt>
    <dd class="invisible">Concessioners provide park visitors with lodging, transportation, food services, shops, guiding, and other services. More than 480 NPS concession contracts in more than 100 different park units vary in size from small, family-owned businesses to national/international corporations. Learn more about commercial services in the National Park Service.</dd>
    <br>

    <dt>How do I apply for a job with the National Park Service?</dt>
    <dd class="invisible">National Park Service jobs, including both permanent and seasonal positions, are listed on USAJOBs. Learn more about working for us, including opportunities for students and volunteers and tips for applying for jobs.</dd>
    <br>
</dl>

<button id="highlight-last-button">Click here to highlight last item</button>
<h3>Yellowstone National Park</h3>
<ul style="display: none">
    <li>Yellowstone encompasses 3,472 square miles (2,221,766 acres) which makes it larger than Rhode Island and Delaware combined.</li>
    <li>Yellowstone is home to more than 500 active geysers (more than half the world’s geysers).</li>
    <li>Yellowstone is home to the largest concentration of mammals in the lower 48 states (67 species).</li>
    <li>There are approximately 1,000 miles of hiking trails in Yellowstone.</li>
</ul>
<h3>Big Bend National Park</h3>
<ul style="display: none">
    <li>The Rio Grande river serves not only as the edge of the park, but also the border between the USA and Mexico.</li>
    <li>The name Big Bend comes from a large bend in the Rio Grande River along the park boundary.</li>
    <li>Big Bend National Park has the darkest measured skies in the lower 48 states, and star gazing here is obviously superb.</li>
    <li>There park contains 56 species of reptiles, 75 species of mammals, more than 450 species of birds, along with at least 1,200 species of plants.</li>
</ul>
<h3>Everglades National Park</h3>
<ul style="display: none">
    <li>There are at least nine different ecosystems that work together to sustain life in the Everglades. These include coastal mangroves, pine flatwoods, hardwood hammocks, and freshwater marl prairies.</li>
    <li>The Everglades is home to the Florida Panther, one of the most endangered species on earth. There are currently less than 100 remaining.</li>
    <li>Thick sawgrass covers much of the Everglades terrain; and while it may look soft, the razors can cut through your clothing.</li>
    <li>The Everglades is often referred to as a “swamp”, but in reality it is a giant, slow moving river.</li>
</ul>

<div id="picture-set">
    <div class="picture">
        <div class="picture-frame yellowstone"></div>
        <button class="swap-button" id="left-button">swap</button>
    </div>
    <div class="picture">
        <div class="picture-frame big-bend"></div>
        <button class="swap-button" id="center-button">swap</button>
    </div>
    <div class="picture">
        <div class="picture-frame everglades"></div>
        <button class="swap-button" id="right-button">swap</button>
    </div>
</div>

<script src="js/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('#confirm').click(function () {
            $('#newsletter').hide();
        });

        $("#toggler").click(function () {
            $("dd").toggleClass('invisible');
        });

        $("dt").click(function () {
            $(this).toggleClass('highlight');
        });

        $("#highlight-last-button").click(function () {
            $('ul').each(function () {
                $(this).children().last().toggleClass("highlight");
            });
        });

        $('h3').click(function () {
            $(this).next().slideDown();
        });

        $('li').click(function() {
            $(this).parent().children().first().css("color", "blue");
        });

        var delay = 8000; // delay time in milliseconds

        setTimeout(function () {
            $('#register').fadeIn(1500)
        }, delay);


        // $('#left-button').click(function() {
        //     var leftHTML = $('#left-button').parent().first().html();
        //     var centerHTML = "";
        //
        //     console.log(leftHTML);
        // });
    });
</script>
</body>
</html>