codeup-web-exercises/jquery_faq.html at main · afonse03/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
<!--Attribute and CSS Exercise-->
<!--pushed to GitHub on 8/16/2021-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Attributes and CSS Exercise</title>
<!--style is inline css-->
    <style>

        h1 {
            color: blue;
        }
        .invisible {
            visibility: hidden;
        }

        img {
            float: right;
        }

        body {
            background-color: cornsilk;
        }

        dl {
            font-size: large;
        }

        dd {
            color: blue;
            font-size: large;
        }

        /*.last {*/
        /*    background-color: yellow;*/
        /*}*/
    </style>
</head>
<body>
<button class="img-button">Click Image</button>
<img class="slide-img" src="img/nationalparks2.jpeg">

<div class="row container">
<h1 id="main-header">National Parks FAQ</h1>
    <p>
<!--https://www.nps.gov/aboutus/faqs.htm-->
        <dl>1. Who is the director of the National Park Service?</dl>
            <dd class="invisible">Shawn Benge is the Director of the National Park Service.</dd>
        <dl>2. What government agency oversees the National Park Service?</dl>
            <dd class="invisible">The National Park Service is a bureau of the Department of the Interior. Directly overseeing its operation is the
    department's Assistant Secretary for Fish, Wildlife, and Parks.</dd>
        <dl>3. How many employees are in the National Park Service?</dl>
            <dd class="invisible">There are approximately 20,000 permanent, temporary, and seasonal employees.</dd>
        <dl>4. How old is the National Park System?</dl>
            <dd class="invisible">It is 105 years old. The National Park Service was created by an act signed by President Woodrow Wilson on August 25, 1916.</dd>
        <dl>5. What is the origin of the National Park Service arrowhead?</dl>
            <dd class="invisible">The arrowhead was authorized as the official National Park Service emblem by the Secretary of the Interior on July 20, 1951.</dd>
        <dl>6. How many areas are in the National Park System?</dl>
            <dd class="invisible">The system includes 423 areas covering more than 85 million acres in every state, the District of Columbia, American Samoa, Guam, Puerto Rico, and the Virgin Islands.</dd>
        <dl>7. What is the largest national park site? Smallest?</dl>
            <dd class="invisible">The largest is Wrangell-St. Elias National Park and Preserve at 13.2 million acres. The smallest is Thaddeus Kosciuszko National Memorial at 0.02 acres.</dd>
        <dl>8. How many people visit the national parks?</dl>
            <dd class="invisible">Total recreation visitors to the national parks in 2020 was 237,064,332.</dd>
        <dl>9. What is the most-visited national park?</dl>
            <dd class="invisible">Blue Ridge Parkway was the most-visited national park in 2020.</dd>
        <dl>10. Can I bring my pet to a national park?</dl>
            <dd class="invisible">Some national parks welcome pets--in developed areas, on many trails and campgrounds, and in some lodging facilities.</dd>

<a href="#" id="info">Click here to reveal answers to questions.</a>
<br>
</div>
<br>
<div class="row container-fluid">
    <div class="card col-4">
        <h3>Yellowstone National Park</h3>
        <ul>
            <li>Fact</li>
            <li>Fact</li>
            <li>Fact</li>
            <li class="last highlight">Fact</li>
        </ul>
    </div>
    <div class="card col-4">
        <h3>Zion National Park</h3>
        <ul>
            <li>Fact</li>
            <li>Fact</li>
            <li>Fact</li>
            <li>Fact</li>
        </ul>
    </div>
    <div class="card col-4">
        <h3>Crater Lake National Park</h3>
        <ul>
            <li>Fact</li>
            <li>Fact</li>
            <li>Fact</li>
            <li>Fact</li>
        </ul>
    </div>
</div>
<br>
<div class="col-12">
    <form>
        <label for="button">
            <button type="button" id="button">Click to highlight</button>
        </label>
    </form>
</div>
<!--jQuery script always goes on top of my JS-->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
    "use strict";

    $("#info").on("click", function(e) {
        $("dd").toggleClass("invisible");
    });

    $("#button").on("click", function(e) {
       $("last").toggleClass("highlight");
    });

    $(".img-button").on("click", function() {
       $(".slide-img").slideToggle();
    });

</script>
</body>
</html>