codeup-web-exercises/jquery_faq.html at master · liliwang1/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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>National Parks Q&A</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        *{
            box-sizing: border-box;
        }
        dt {
            font-size: 1.5em;
            margin: 0.5em 3em;
            font-weight: bold;
        }
        dd {
            font-size: 1.2em;
            margin: 0 2em;
        }
        .invisible {
            /*visibility: hidden;*/
            display: none;
        }
        .highlight {
            background-color: yellow;
        }
        .enlarge {
            font-size: 2em;
        }
        .bolden {
            font-weight: bold;
        }
        .blue-font {
            color: blue;
        }
        .picture-frame {
            border: 8px solid saddlebrown;
            padding: 10px;
            /*margin: 10px;*/
            display: inline-block;
            text-align: center;
        }
        .img {
            border: 3px solid burlywood;
        }
        /* .left-img {
            background-image: url("https://picsum.photos/id/737/200/300");
            background-repeat: no-repeat;
        }
        .middle-img {
            background-image: url("https://picsum.photos/200/300");
            background-repeat: no-repeat;
        }
        .right-img {
            background-image: url("https://picsum.photos/id/557/200/300");
            background-repeat: no-repeat;
        } */
    </style>
</head>
<body>
<div class="container">
<h1>National Parks</h1>
<div id="newsletter" class="alert alert-dismissible alert-info">
    <span id="hide-newsletter" class="close" data-dismiss="alert">X</span>
    <h1>Would you like to sign up for our newsletter?</h1>
</div>
<h2 class="register">Register for our site</h2>
<h2>FAQ of Yellow Stone National Park </h2>
<dl>
    <dt>
        Where do I Make Reservations to Stay in Yellowstone?
    </dt>
    <dd class="invisible">
        Yellowstone National Park Lodges operates the nine lodges in the park. All are open from late spring through
        fall, but only two are open in the winter: Old Faithful Snow Lodge and Mammoth Hot Springs Hotel. Be sure to
        make a reservation early!
    </dd>
    <dt>
        How did Yellowstone get its name?
    </dt>
    <dd class="invisible">
        Yellowstone National Park is named after the Yellowstone River, the major river running through the park.
        According to French-Canadian trappers in the 1800s, they asked the name of the river from the Minnetaree tribe,
        who live in what is now eastern Montana. They responded “Mi tse a-da-zi,” which literally translates as “Rock
        Yellow River.” The trappers translated this into French as “Roche Jaune” or “Pierre Jaune.” In 1797,
        explorer-geographer David Thompson used the English translation—“Yellow Stone.” Lewis and Clark called the
        Yellowstone River by the French and English forms. Subsequent use formalized the name as “Yellowstone.
    </dd>
    <dt>
        Is Yellowstone the largest national park?
    </dt>
    <dd class="invisible">
        No. More than half of Alaska’s national park units are larger, including Wrangell–St. Elias National Park and
        Preserve, which is the largest unit (13 million acres) in the National Park System. Until 1994, Yellowstone (at
        2.2 million acres) was the largest national park in the contiguous United States. That year Death Valley
        National Monument was expanded and became a national park—it has more than 3 million acres.
    </dd>
    <dt>
        Is Yellowstone the most visited national park?
    </dt>
    <dd class="invisible">
        Yellowstone is in the top five national parks for number of recreational visitors. Great Smoky Mountains
        National Park often has the most. Visit https://irma.nps.gov/Stats/ to view up-to-date statistics for all
        national parks.
    </dd>
    <dt>
        What is the difference between a national park and a national forest?
    </dt>
    <dd class="invisible">
        National parks are administered by the Department of the Interior and national forests by the Department of
        Agriculture. The National Park Service is mandated to preserve resources unimpaired, while the Forest Service is
        mandated to wisely manage resources for many sustainable uses. Six national forests surround Yellowstone
        National Park.
    </dd>
    <dt>
        How many rangers work in Yellowstone?
    </dt>
    <dd class="invisible">
        Approximately 738 people work for the National Park Service during the peak summer season. Approximately 386 are
        permanent, year-round employees. Park rangers work in education, resource management, law enforcement, emergency
        medical services, and backcountry operations. Other employees specialize in research, maintenance, management,
        administration, trail maintenance, fire management, and fee collection.
    </dd>
    <dt>
        Can we swim in rivers and lakes?
    </dt>
    <dd class="invisible">
        Swimming is not recommended because most lakes and streams are dangerously cold. Firehole Canyon, near Madison
        Junction, has a swimming area popular in summer. Soaking in thermal features is illegal. The area known as the
        Boiling River, north of Mammoth Hot Springs, allows soaking in the Gardner River near thermal outflow, but not
        in the feature itself. Soaking is allowed during daylight hours only and at your own risk.
    </dd>
    <dt>
        What is the highest peak in the park?
    </dt>
    <dd class="invisible">
        Eagle Peak in the southeastern part of Yellowstone is the highest at 11,358 feet.
    </dd>
    <dt>
        Why is Yellowstone called a biosphere reserve and a world heritage site?
    </dt>
    <dd class="invisible">
        The United Nations designated Yellowstone National Park as a biosphere reserve and a world heritage site in
        recognition of the worldwide significance of its natural and cultural resources.
    </dd>
    <dt>
        What is the Continental Divide?
    </dt>
    <dd class="invisible">
        Think of the Continental Divide as the crest of the continent. Theoretically, when precipitation falls on the
        west side of the Divide, it eventually reaches the Pacific Ocean. When it falls on the east side of the Divide,
        it eventually reaches the Atlantic Ocean. In Yellowstone (as elsewhere), this ridgeline is not straight. You
        cross the Continental Divide three times between the South Entrance and the Old Faithful area. Craig Pass is the
        highest crossing, at 8,262 feet.
    </dd>
</dl>
<a href="" id="toggle-link">click here to see the Qs</a>
<h3 class="s">Yellowstone National Park</h3>
<ul class="invisible">
    <li>located largely in the northwest corner of Wyoming and extending into Montana, and Idaho</li>
    <li>spans an area of 3,468.4 square miles</li>
    <li>the first national park in the U.S., also widely held to be the first national park in the world</li>
    <li>in 2019 4,020,288 visitors visited the park</li>
</ul>
<h3 class="s">Yosemite National Park</h3>
<ul class="invisible">
    <li>located in the western Sierra Nevada of Central California,</li>
    <li>covers an area of 748,436 acres</li>
    <li>Almost 95% of the park is designated wilderness</li>
    <li>about four million people visit Yosemite each year on average</li>
</ul>
<h3 class="s">Joshua Tree National Park</h3>
<ul class="invisible">
    <li>in southeastern California,</li>
    <li>encompassing a total of 790,636 acres</li>
    <li>is named for the Joshua trees native to the Mojave Desert</li>
    <li>in 2018 2,942,382 visitors visited the park</li>
</ul>
<button type="button" id="btn">click here for highlight</button>
<hr>
    <div class="row">
<div class="picture-frame col-4">
    <div class="left-img img"><img src="https://picsum.photos/id/737/200/300" alt=""></div>
    <br>
    <button type="button" class="left-button">click to swap</button>
</div>
<div class="picture-frame col-4">
    <div class="middle-img img"><img src="https://picsum.photos/200/300" alt=""></div>
    <br>
    <button type="button" class="middle-button">click to swap</button>
</div>
<div class="picture-frame col-4">
    <div class="right-img img"><img src="https://picsum.photos/id/557/200/300" alt=""></div>
    <br>
    <button type="button" class="right-button">click to swap</button>
</div>
    </div>
</div>

<script src="js/jquery-3.5.1.js"></script>
<script>
    (function () {
        'use strict';
        $().ready(function () {
            $('#toggle-link').on('click', function (e) {
                e.preventDefault();
                $('dd').toggleClass('invisible');
            })

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

            $('#btn').click(function (e) {
                e.preventDefault();
                $('ul').each(function() {
                    $(this).toggleClass('invisible');
                    $(this).children().last().toggleClass('highlight');
                })
            })

            $('h3').click(function () {
                $(this).next().toggleClass('invisible');
                $(this).next().addClass('bolden').slideToggle(500);
            })

            $('li').click(function () {
                $(this).parent().children().first().toggleClass('blue-font');
            })

            /* $('.left-button').click(function (e) {
                e.preventDefault();
                $(this).parent().next().children().first().addClass('left-img').removeClass('middle-img');
                $(this).parent().children().first().addClass('middle-img').removeClass('left-img');
            })
            $('.middle-button').click(function (e) {
                e.preventDefault();

            })
            $('.right-button').click(function (e) {
                e.preventDefault();
                $(this).parent().prev().children().first().addClass('right-img').removeClass('middle-img');
                $(this).parent().children().first().addClass('middle-img').removeClass('right-img');
            }) */
            $('.left-button').click(function (e) {
                e.preventDefault();
                let div1Content = $(this).parent().children().first().html();
                let div2Content = $(this).parent().next().children().first().html();
                console.log(div1Content);
                console.log(div2Content);
                $(this).parent().children().first().html(div2Content);
                $(this).parent().next().children().first().html(div1Content);
            })
            $('.middle-button').click(function (e) {
                e.preventDefault();
                let div2Content = $(this).parent().children().first().html();
                let div1Content = $(this).parent().prev().children().first().html();
                let div3Content = $(this).parent().next().children().first().html();
                console.log(div1Content);
                console.log(div2Content);
                console.log(div3Content);
                let num = Math.floor(Math.random()*2 + 1);
                if(num === 1) {
                    $(this).parent().children().first().html(div1Content);
                    $(this).parent().prev().children().first().html(div2Content);
                } else if(num === 2) {
                    $(this).parent().children().first().html(div3Content);
                    $(this).parent().next().children().first().html(div2Content);
                }
            })
            $('.right-button').click(function (e) {
                e.preventDefault();
                let div3Content = $(this).parent().children().first().html();
                let div2Content = $(this).parent().prev().children().first().html();
                console.log(div3Content);
                console.log(div2Content);
                $(this).parent().children().first().html(div2Content);
                $(this).parent().prev().children().first().html(div3Content);
            })

            // $('#hide-newsletter').click(function () {
            //     $('#newsletter').hide(1000);
            // })

            // setTimeout(function () {
            //     // $('.register').removeClass('invisible');
            //     $('.register').fadeIn(2000); // does not work in bootstrap
            // }, 8000)

            // $('.register').hide().delay(3000).fadeIn(1000);
            $('.register').hide().delay(3000).slideIn(1000);
        });
    })();
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>