codeup-web-exercises/jquery-faq.html at main · mrios671/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
<!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>
        p, dt {
            font-weight: bold;
        }

        dl, dd {
            font-size: 0.9rem;
        }

        dd {
            margin-bottom: 1em;
        }

        .invisible {
            visibility: hidden;
        }

    </style>
</head>
<body>
<p>10 Random National Park FAQs</p>

<dl>
    <dt>How many employees are in the National Park Service?</dt>
    <dd class="invisible">Approximately 20,000 permanent, temporary, and seasonal employees along with more than 279,000
        volunteers.
    </dd>

    <dt>How many people visit the national parks each year?</dt>
    <dd class="invisible">Last year, there were 327 million national park visits in the United States.</dd>

    <dt>Can I bring my service dog to a national park?</dt>
    <dd class="invisible">Yes, service dogs are legally permitted anywhere in a park that visitors can go.</dd>

    <dt>Can I bring my pet to a national park?</dt>
    <dd class="invisible">Some national parks welcome pets—in developed areas, on many trails and campgrounds, and in
        some lodging facilities.
    </dd>

    <dt>How many national parks are there in total in the United States?</dt>
    <dd class="invisible">There are currently 63 national parks in the United States.</dd>

    <dt>Which national parks have the most visitors?</dt>
    <dd class="invisible">Popular national parks with the most overnight visitors are Grand Canyon, Yosemite &
        Yellowstone. However, several national parks have are more popular for day visitors, making them feel more
        private and secluded from sundown to sunrise.
    </dd>

    <dt>When were the national parks established and why?</dt>
    <dd class="invisible">The National Park Service was established by Congress and initiated by President Theodore
        Roosevelt during the year 1916. The goal was to give American people the opportunity to enjoy public lands and
        make recreational activity more accessible to the public.
    </dd>

    <dt>Are national parks open all year round?</dt>
    <dd class="invisible">It depends on the park. While most national parks are open year-round, there might be some
        entrances that are closed due to weather or construction.
    </dd>

    <dt>How many areas are in the National Park System?</dt>
    <dd class="invisible">The system includes 425 areas covering more than 85 million acres in every state, the District
        of Columbia, American Samoa, Guam, Puerto Rico, and the Virgin Islands. These areas include national parks,
        monuments, battlefields, military parks, historical parks, historic sites, lakeshores, seashores, recreation
        areas, scenic rivers and trails, and the White House.
    </dd>

    <dt>What do I need to know about driving off road in national parks?</dt>
    <dd class="invisible">Before you head out, check with the national parks that you intend to visit. In many national
        parks, off-road driving is illegal. Where off-road driving is allowed, the National Park Service regulates it.
    </dd>

    <dt>
        <a href="#" id="toggle-visibility">Toggle Visibility</a>
    </dt>

    <h3>Grand Canyon</h3>
    <ul class="national-parks">
        <li>random fact 1</li>
        <li>random fact 2</li>
        <li>random fact 3</li>
        <li>random fact 4</li>
    </ul>
    <h3>Everglades</h3>
    <ul class="national-parks">
        <li>random fact 1</li>
        <li>random fact 2</li>
        <li>random fact 3</li>
        <li>random fact 4</li>
    </ul>
    <h3>Yosemite</h3>
    <ul class="national-parks">
        <li>random fact 1</li>
        <li>random fact 2</li>
        <li>random fact 3</li>
        <li>random fact 4</li>
    </ul>

    <button class="highlight-last">Click Me!</button>

</dl>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>


    $(document).ready(function () {
        "use strict";
        //=====================below is what we went over during class walkthrough
        $("#toggle-visibility").on("click", (e)=>{
            e.preventDefault();
            $("dd").toggleClass("invisible");
        });

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

        //  =================below is what I did
        // $("dt").click(function () {
        //     $(this).css("background-color", "springgreen")
        //     let dd = $(this).next("dd");
        //
        //     if (dd.css("display") === "none") {
        //         dd.css("display", "block");
        //     } else {
        //         dd.css("display", "none");
        //     }
        // });
        //
        // function toggleVisibility() {
        //     $("dd").toggleClass("invisible");
        // }
        //
        // $("#toggle-visibility").click(function (e) {
        //     e.preventDefault();
        //     toggleVisibility();
        // });

        //=============== below is what we went over during walkthrough

        $(".highlight-last").on("click", ()=>{
            $("ul").each((index, element) => {
                $(element).children().last().css("background-color", "yellow")
            });
        })

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

        $("li").on("click", (e) => {
            $(e.target).parent().children().first().css("color", "blue")
        })

        // ================== below is what I did
        // $("ul").each(function (index, element) {
        //     console.log(element);
        //     // $(".highlight-last").click(function(e){
        //     //     e.preventDefault();
        //     $(".national-parks").children().last().css("background-color", "yellow");
        // })
        //
        //
        // $("h3").click(function () {
        //     $("li").css("font-weight", "bold")
        //  })
        // $("li").click(function () {
        //     $("li").parent().first().css("color", "blue")
        // })


    });
</script>

</body>
</html>