codeup-web-exercises/yo mama.html at main · jmkrsak/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
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><!-- TODO: put your title here --></title>
    <style>
        .invisible {
            visibility: hidden;
        }
        .yellow {
            background-color: yellow;
        }

    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<p>National Parks FAQ:</p>


<dl>
    <dt>Sequoia National Park</dt>
    <dd class="invisible">California's Sequoia National Park is home to the largest living single-stem tree in the world, the wonderfully named General Sherman. The tree is approximately 275 feet tall and weighs approximately 1,900 metric tons.</dd>

    <dt>Wrangell-St. Elias National Park</dt>
    <dd class="invisible">Wrangell-St. Elias National Park, Alaska, is the largest national park, covering 13,000 square miles or 13.2 million acres.
    </dd>

    <dt>Death Valley National Park</dt>
    <dd class="invisible">Death Valley National Park is the largest national park in the lower 48 U.S. states, stretching 5,300 square miles or 3.4 million acres.</dd>

    <dt>Hot Springs National Park</dt>
    <dd class="invisible">The smallest national park is Hot Springs National Park in Arkansas, coming in at about 5,500 acres. This was actually the first federally protected piece of land in 1832. It was not named a national park until 1921.
    </dd>

    <dt>Great Smoky Mountains National Park</dt>
    <dd class="invisible">Great Smoky Mountains National Park is the most visited national park with more than 9 million guests per year, followed by Grand Canyon National Park, which gets more than 4 million visits per year.
    </dd>

    <dt>Denali National Park</dt>
    <dd class="invisible">Mount McKinley in the Alaska Range of Denali National Park is the highest point in the national parks at 20,302 feet.
    </dd>

    <dt>Arches National Park</dt>
    <dd class="invisible">Arches National Park is famous for having the largest concentration of stone arches in the world.
    </dd>

    <dt>Everglades National Park</dt>
    <dd class="invisible">Everglades National Park protects more than 25% of Florida's original everglades (subtropical wetlands).</dd>

    <dt>Dry Tortugas National Park</dt>
    <dd class="can invisible">Dry Tortugas National Park in Florida is known for its world-renowned concentration of turtles.</dd>

    <dt>Mesa Verde National Park</dt>
    <dd class="can invisible">Mesa Verde National Park was the first national park to be recognized for “works of man,” an acknowledgement of the incredible cliff dwellings left behind by the Pueblo Indians.</dd>
</dl>
<input type="submit" value="Highlight" class="highlight">

<h3 id="national-parks-heading">National Parks</h3>
<ul id="national-parks" class="parks">
    <li>Arches</li>
    <li>Badlands</li>
    <li>Carlsbad Caverns</li>
    <li>Denali</li>
</ul>
<h3>State Parks of Texas</h3>
<ul id="state-parks-texas" class="parks">
    <li>Abilene</li>
    <li>Big Bend</li>
    <li>Choke Canyon</li>
    <li>Davis Mountains</li>
</ul>
<h3>State Parks of Kansas</h3>
<ul id="state-parks-kansas" class="parks">
    <li>Crawford</li>
    <li>Milford</li>
    <li>Fall River</li>
    <li>Pomona</li>
</ul>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>

    // TODO:
    // Create some CSS rules that sets elements with the invisible class to visibility: hidden;.

    // TODO:
    // Update the page with jQuery to add a link that toggles the class invisible on and off for all dd elements.
        $('dt').click(function(){
            $('dd').toggleClass('invisible')
        })
    //     let dd = document.getElementsByTagName('dd');
    //     let dt = document.getElementsByTagName('dt');
    //     for (let i = 0; i < dt.length; i++) {
    //         dt[i].addEventListener('click', function() {
    //             for(let j = 0; j < dd.length; j++) {
    //                 dd[j].classList.toggle('invisible')
    //             }
    //         })
    //     }
    // TODO:
    // When any of the dt elements is clicked, the element that was clicked should be highlighted.
    $('dt').click(function(){
        $(this).next().toggleClass('yellow')
    })
    // let dd = document.getElementsByTagName('dd');
    // let dt = document.getElementsByTagName('dt');

    // for (let i = 0; i < dt.length; i++) {
    //     dt[i].addEventListener('click', function() {
    //         this.nextElementSibling.classList.toggle('yellow')
    //         for(let j = 0; j < dd.length; j++) {
    //             dd[j].classList.toggle('invisible')
    //         }
    //     })
    // }


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

    $(document).ready(function() {
        $('input').click(function(event) {
            event.preventDefault();
            $('ul').each(function(index) {
                $(this).children().last().toggleClass('yellow')
            })
        })
    });
    // let btn = document.querySelector('.highlight');
    // let ul = document.getElementsByTagName('ul');
    // btn.onclick = makeItYellow;
    //
    // function makeItYellow() {
    //     for (let i = 0; i < ul.length; i++) {
    //         ul[i].lastElementChild.classList.toggle('yellow')
    //     }
    // }
    // TODO:
    // When any h3 is clicked, the lis underneath it should be bolded. Use font-weight: bold to achieve this.

    $(document).ready(function(){
        $('h3').click(function(event){
            event.preventDefault();
            console.log($(this).next());
            $(this).next().children().css({
                    fontWeight : "bold"
            })
        })
    })
    // let h1Select = document.querySelectorAll('h3')
    // for (let i = 0; i < h1Select.length; i++) {
    //     h1Select[i].onclick = makeBold;
    // }
    // function makeBold() {
    //     Array.from(this.nextElementSibling.children).forEach(li => {
    //         li.style.fontWeight = li.style.fontWeight == 'bold'? 'normal' : 'bold'
    //     })
    // }


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

    $(document).ready(function(){
        $('li').click(function(event){
            event.preventDefault();
            $(this).parent().children().first().css({
                color : 'blue'
            })
        })
    })
    $('li').click(function(){
        $(this).parent().children().first().css('color', 'blue')
    })

    // let liClicked = document.querySelectorAll('li')
    // liClicked.onclick = liOfParentUlBold;
    // for (let i = 0; i < liClicked.length; i++) {
    //     liClicked[i].onclick = liOfParentUlBold;
    // }
    //
    // function liOfParentUlBold(e) {
    //     console.log(e)
    //     e.target.parentElement.children[0].style.color = e.target.parentElement.children[0].style.color === 'blue'? 'black' : 'blue'
    // }


</script>

</body>
</html>