fenrir-codeup-web-exercises/jquery_faq.html at main · CodeupClassroom/fenrir-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
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Methods Exercise</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <style>
        .invisible {
            visibility: hidden;
        }

        dt {
            text-decoration: underline;
            margin-top: 20px;
            margin-bottom: 10px;
            font-weight: 900;
        }


        .highlight {
            background: yellow;
        }
    </style>
</head>
<body>

<main class="container">

    <h1>Top Ten Questions about Glacier National Park</h1>
    <dl>
        <dt>Where is Glacier National Park located?</dt>
        <dd class="invisible">Glacier National Park is located in northwestern Montana on the U.S./Canadian border.
            Access to the park from the east and west is along U.S. Highway 2. Park headquarters is located in West
            Glacier.
        </dd>
        <dt>When is the park open?</dt>
        <dd class="invisible">Glacier National Park is open year-round, 24 hours a day. In the fall winter and spring,
            some roads are inaccessible by car due to snow.
        </dd>
        <dt>What does it cost to enter the park?</dt>
        <dd class="invisible">Glacier National Park is open year-round, 24 hours a day. In the fall winter and spring,
            some roads are inaccessible by car due to snow.
        </dd>
        <dt>Where are the closest airports to the park? Is there transportation from the airports to the park?</dt>
        <dd class="invisible">Glacier Park International Airport in Kalispell, Montana is 25 miles west of park
            headquarters in West Glacier, Montana.

            There are also airports in Great Falls, Montana (200 miles east of West Glacier)and Missoula, Montana (156
            miles south of West Glacier).

            Car rentals are available at airports. Shuttles are available at the Kalispell airport.
        </dd>
        <dt>What is the closest train station to the park?</dt>
        <dd class="invisible">Amtrak rail lines parallel the southern and southwestern borders of the park. Amtrak stops
            at West Glacier (Belton), East Glacier (summer only), and Essex (upon request).
        </dd>
        <dt>What transportation is available within the park?</dt>
        <dd class="invisible">In addition to private automobiles, guided tours are available in the main sections of the
            park. Contact Glacier Park, Inc. and Sun Tours for information (see addresses and telephone numbers below).
            Rental cars are available in neighboring communities.

            Glacier Park, Inc.
            1850 North Central Avenue
            Phoenix, Arizona 85077-0928
            (602)207-6000

            Sun Tours
            29 Glacier Avenue
            East Glacier Park, Montana 59434
            (800)786-9220

        </dd>
        <dt>Where are the visitor centers located in the park?</dt>
        <dd class="invisible">Visitor centers are located in Apgar, Logan Pass, and St. Mary. Each of these visitor
            centers, as well as the Many Glacier and Two Medicine Ranger Stations, have park rangers on duty throughout
            the summer months to answer questions and provide information. During the winter months, Apgar Visitor
            Center is open on week-ends.

        </dd>
        <dt>Do you have campgrounds in the park? Can I make a reservation?</dt>
        <dd class="invisible">Glacier National Park has 13 campgrounds, which provide just over 1000 campsites. Most of
            the campgrounds are operated on a "first come, first serve" basis. Fish Creek and St. Mary Campgrounds will
            be available for reservation by calling 1-800-365-2267. Click here for more detailed information on camping.

            Winter primitive camping is available in the Apgar Picnic Area and in the St. Mary Campground.
        </dd>
        <dt>Is it possible to reserve a backcountry campsite?</dt>
        <dd class="invisible">Reservations for backcountry campsites may be made in advance, beginning April 1 for the
            upcoming summer. For further information on backcountry camping and for making reservations, visit our
            website section on Backcountry Camping.
        </dd>
        <dt>Can I drive my RV along the Going-to-the-Sun Road?</dt>
        <dd class="invisible">Vehicles, and vehicle combinations, longer than 21 feet (including bumpers) or wider than
            8 feet (including mirrors) are prohibited between Avalanche Campground and the Sun Point parking area. You
            may however, drive to Avalanche if traveling east, and to Sun Point, if traveling west. Vehicles over 10
            feet in height may have difficulty driving west from Logan Pass due to rock overhangs. Stock trucks and
            trailers may access Packers Roost and Siyeh Bend.
        </dd>
    </dl>

    <a id="toggle-dd-answers" href="#">Toggle Answers</a>

    <br><br>

    <h3>Denali National Park</h3>
    <ul>
        <li>DNP is home to the highest peak in North America, Denali. Called "The High One" in language of the
            Athabascan tribe, this towering peak stands at 20,320 feet above sea level.
        </li>
        <li>The year of 1910 marked the first time that anyone had successfully summited Denali. It was a group of local
            residents who celebrated with hot chocolate and donuts.
        </li>
        <li>Sable Pass inside DNP is known to be the best area to spot massive grizzly bears.</li>
        <li>There are 169 different bird species, 39 mammal species, 14 fish species, and one species of amphibian known
            in Denali, whilst the park is also home to 1,500 species of vascular plants, lichens and mosses.
        </li>
    </ul>
    <h3>Yellowstone National Park</h3>
    <ul>
        <li>World's First National Park.</li>
        <li>A designated World Heritage Site and designated Biosphere Reserve.</li>
        <li>3,472 square miles or 8,987 square km.</li>
        <li>96 % in Wyoming an 3 % in Montana.</li>
    </ul>
    <h3>Yosemite National Park</h3>
    <ul>
        <li>El Capitan is the largest granite monolith in the world. It rises more than 3,000 feet above the valley
            floor and is a favorite for experienced rock climbers.
        </li>
        <li>Yosemite Falls: This is the tallest waterfall in North America. Snow runoff cascades down the 2,425 foot
            drop, with peak flow in May. In winter, an ice cone is often visible at the top of the falls.
        </li>
        <li>Giant Sequoias and Mariposa Grove: Mariposa Grove contains about 500 mature giant sequoias.</li>
        <li>There are 840 miles of trails to hike in Yosemite National Park</li>
    </ul>

    <button id="yellow-background-btn">Yellow Background</button>


</main>


<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>

<script>

    // Traversal exercise
    $(document).ready(function () {

        "use strict";

        // ============================================== For Attributes and CSS Lesson

        // Update the page with jQuery to add a link that toggles
        // the class invisible on and off for all dd elements.

        $('#toggle-dd-answers').on('click', (e) => {
            e.preventDefault();
            // $('dd').toggleClass();
            $('dd').toggleClass('invisible');
        });


        // BONUS

        $('dt').on('click', (e) => {
            $(e.target).css('background-color', 'yellow');
        });


        // ============================================== For Traversal Lesson

        // Create a button that, when clicked, makes the last li in each ul have a yellow background.

        $('#yellow-background-btn').on('click', () => {
            $('ul').each((index, element) => {
                $(element).children().last().addClass('highlight');
            });
        });


        // When any h3 is clicked, the lis underneath it should be bolded. Use font-weight: bold to achieve this.

        $('h3').on('click', (e) => {
            $(e.target).next().css('font-weight', 'bold');
        });


        // When any list item is clicked, first li of the parent ul should have a font color of blue.

        $('li').on('click', function(e) {
            $(e.target)
                .parent()
                .children()
                .first()
                .css('color', 'blue');
        });


    });

</script>

</body>
</html>