codeup-web-exercises/jquery_faq.html at main · silvam03/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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery FAQ</title>

    <style>
        .invisible {
            visibility: hidden;
        }

        dt {
            font-size: 25px;
            margin-top: 1.5em;
        }
    </style>
</head>
<body>
<h1>10 facts about National Parks in the U.S.</h1>

<div>
    <label for="fakeBtn">Want the answers? Click Here -></label>
    <input type="submit" id="fakeBtn">
</div>
<h1 class="invisible">Just Kidding! (ps. scroll down after hitting submit again)</h1>

<dl>
    <dt>1. How many National Parks in the U.S.?</dt>
    <dd class="invisible">423!</dd>

    <dt>2. What is the most visited National Park?</dt>
    <dd class="invisible">Great Smoky Mountains National Park!</dd>

    <dt>3. What is the largest National Park?</dt>
    <dd class="invisible">Wrangell-St. Elias National Park and Preserve!</dd>

    <dt>4. How many acres does the National Park Service protect?</dt>
    <dd class="invisible">Over 84 million!</dd>

    <dt>5. What National Park is the oldest?</dt>
    <dd class="invisible">Yellowstone National Park!</dd>

    <dt>6. Which two states have 8 National parks?</dt>
    <dd class="invisible">California and Alaska!</dd>

    <dt>7. Which National Park is home to the largest tree in the world?</dt>
    <dd class="invisible">Sequoia National Park!</dd>

    <dt>8. Which National Park has the longest known cave system in the world?</dt>
    <dd class="invisible">Mammoth Cave National Park!</dd>

    <dt>9. Where were the oldest human bones in North America found?</dt>
    <dd class="invisible">Channel Islands National Park!</dd>

    <dt>10. What is the most recent U.S. National Park?</dt>
    <dd class="invisible">New River Gorge National Park!</dd>
</dl>
<div>
    <label for="answers">Click here for actual answers -></label>
    <input type="submit" id="answers">
</div>

<!--Traversing Exercise-->
<hr>
<h3>Yosemite National Park</h3>
<ul>
    <li>Yosemite's granite rock formations glow like fire at sunset!</li>
    <li>It's landscape supports more than 400 species!</li>
    <li>One of the few places you can see a rainbow at night!</li>
    <li>Famous for its giant sequoia trees!</li>
</ul>

<h3>Grand Canyon National Park</h3>
<ul>
    <li>The Grand Canyon is bigger than the state of Rhode Island!</li>
    <li>The most dangerous animal in the park is the rock squirrel!</li>
    <li>There are over 1000 caves in the Grand Canyon!</li>
    <li>5.9 million people visit per year!</li>
</ul>

<h3>Denali National Park and Preserve</h3>
<ul>
    <li>One of the best places in the U.S. to watch the Aurora Borealis!</li>
    <li>Only one species of amphibian (Wood Frog) has adapted to life in the cold at Denali!</li>
    <li>The Glaciers cover over 1 million acres of Denali!</li>
    <li>Some of the park rangers are dogs!</li>
</ul>
<div>
    <label for="li-tags">Click here to highlight facts! -></label>
    <input type="submit" id="li-tags">
</div>

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
    "use strict"
    $(document).ready(function () {
        // $('dd').addClass('invisible');

        $('#fakeBtn').click(function (e) {
            $('dt').toggleClass('invisible');
            $('h1').toggleClass('invisible');
        });

        $('#answers').click(function (e) {
            $('dd').toggleClass('invisible');
        });


        $('dt').click(function (e) {
            $(this).css('background-color', 'yellow');
        });
        // one highlight at a time:
        // $('dt').click(function (e) {
        //     $('dt').each(function () {
        //         $(this).css('background-color', 'transparent');
        //     })
        //     $(this).css('background-color', 'yellow');
        // });

// Traversing Exercise
        $('#li-tags').click(function(e) {
            $('ul').each(function() {
                $(this).children().last().css('background-color', 'yellow')
            });
        });

        $('h3').click(function(e) {
                $(this).next().css('font-weight', 'bold');
        });

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


    });
</script>
</body>
</html>