codeup-web-exercises/jquery_faq.html at main · naysamoreno/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FAQ Defintions</title>
    <style>
        .container {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-content: center;

        }
        h1 {
            text-align: center;
            font-family: Courier, sans-serif;
        }
        a {
            margin-bottom: 25px;
        }
        dl{
            font-family: Courier, sans-serif;
        }
        dt {
            font-weight: bold;
        }
        dd {
            margin: 25px 0;
        }
        .invisible {
            visibility: hidden;
        }
        .highlight {
            background: yellow;
        }
        .bold {
            font-weight: bold;
        }

    </style>
    <script src="https://kit.fontawesome.com/968ac4e7b1.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>10 Random Facts You Should Know about National Parks in the US</h1>
<dl class="container">
    <a id="moreInfo" href="#">Click Here for More info <i class="fas fa-info-circle"></i></a>

    <dt>How much land is protected </dt>
    <dd class="invisible">The National Park Service protects over 84 million acres of wild landscapes and historic sites</dd>

    <dt>Rivers in the US </dt>
    <dd class="invisible">The Colorado River and the Green River flow through Utah’s national parks, offering some of the best whitewater rafting anywhere in the country.</dd>

    <dt>Park in Alaska </dt>
    <dd class="invisible">Alaska is home to one of the least visited national parks: Kobuk Valley National Park receives just 3,000 visitors per year.</dd>
    <dt>Mammoth Cave National Park</dt>
    <dd class="invisible">Mammoth Cave National Park in Kentucky has the longest cave system in the world with more than 3,454 mapped
        miles.
    </dd>

    <dt>Carlsbad Caverns</dt>
    <dd class="invisible">Carlsbad Caverns National Park in New Mexico is home to the nation's deepest cave, which is 1,593 feet deep.
    </dd>

    <dt>Artic Circle</dt>
    <dd class="invisible">There are two national parks located north of the Arctic Circle: Gates of the Arctic National Park and the Kobuk Valley National Park. Both are obviously in Alaska.
    </dd>

    <dt>National Monument in Oregon</dt>
    <dd class="invisible">Forty million years of mammalian history is preserved in fossils at the John Day Fossil Beds National Monument in Oregon.
    </dd>

    <dt>Yellowstone National Park</dt>
    <dd class="invisible">The Yellowstone Caldera, Yellowstone National Park, is a super volcano that is responsible for three of the world’s six biggest volcano eruptions.
    </dd>

    <dt>White Sands National Monument</dt>
    <dd class="invisible">White Sands National Monument spans more than 176,000 acres of New Mexico desert and contains the largest gypsum dune fields in the world.</dd>

    <dt>Hawaii National Park</dt>
    <dd class="invisible" >Mauna Loa Volcano in Hawaii Volcanoes National Park is the largest volcano on earth both in terms of volume and height above its base. It contains about 19,000 cubic miles of lava and rises more than 50,000 feet above its base, including the portion which is beneath the ocean.</dd>
</dl>

    <ul>
        <h3>Yellowstone National Park</h3>
        <li>Yellowstone is one of the few remaining intact ecosystems in the northern temperate zone of the earth.</li>
        <li>Yellowstone has become one of North America's biggest "collection" of plant and animal species.</li>
        <li>Yellowstone represents many scientific and historical things like the evolutionary history of the earth or the extraordinary existence of a supervolcano.</li>
        <li>Yellowstone contains fine landscapes: the world's largest collection of geysers, the Grand Canyon of the Yellowstone and the Yellowstone River, many waterfalls, and great presence of wildlife.</li>
    </ul>

    <ul>
        <h3>Big Bend National Park</h3>
        <li>Big Bend National Park covers a total area of 801,163 acres</li>
        <li>The number of people visiting Big Bend in 2019 was 463,832</li>
        <li>The highest elevation found in Big Bend is 7,832 feet on Emory Peak</li>
        <li>Big Bend National Park lies in the Central time zone</li>
    </ul>
    <ul>
        <h3>Rocky Mountain National Park</h3>
        <li>Rocky Mountain is one of the nation’s highest national parks. With elevations from 7,860 feet to 14,259
            feet.
        </li>
        <li>Nearly 250,000 acres of Rocky Mountain was designated as wilderness by Congress in 2009</li>
        <li>Rocky Mountain is one of country’s top wildlife watching destinations. The park is home to more than 60
            species of mammals.
        </li>
        <li>Approximately one-third of this national park is above the limit where trees grow in northern Colorado (around 11,500 feet above sea level), creating the alpine tundra ecosystem. </li>
    </ul>
    <button id="changeLi">highlight the the factoids of all the parks</button>
</dl>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    $('#moreInfo').click(function (){
        $('dd').toggleClass('invisible');
    });
// bonus
    $("dt").click(function() {
        $(this).toggleClass("highlight");
    });
// second exercise h3 and ul - lis
    $('button').click(function() {
      $('ul').each(function() {
          $(this).children().last().css('background', 'yellow')
      });
    });
    // my solution
    // $('h3').click(function () {
    //     $('li').toggleClass('bold')
    // })
// correct solution
    $('h3').click(function () {
        $(this).nextAll().css('font-weight', 'bold');
    });
    // $('li').click(function () {
    //
    // })

    $('ul').click(function () {
        $(this).children("li").first().css({
            'color': 'blue'
        });
        $(this).children("li").nextAll().css({
            'color': 'blue'
        });
    });
    // second bonus
</script>
</body>
</html>