codeup-web-exercises/jquery_faq.html at main · riosalexandra/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery FAQ</title>
</head>
<body>
<h3>Denali National Park</h3>
<ul>
    <li>DNP is home to the highest peak in North America, Denali. Called "The High One" in language of the Athabascan tribe, this towering peak stands at 20,320 feet above sea level.</li>
    <li>The year of 1910 marked the first time that anyone had successfully summited Denali. It was a group of local residents who celebrated with hot chocolate and donuts.</li>
    <li>Sable Pass inside DNP is known to be the best area to spot massive grizzly bears.</li>
    <li>There are 169 different bird species, 39 mammal species, 14 fish species, and one species of amphibian known in Denali, whilst the park is also home to 1,500 species of vascular plants, lichens and mosses.</li>
</ul>
<h3>Yellowstone National Park</h3>
<ul>
    <li>World's First National Park.</li>
    <li>A designated World Heritage Site and designated Biosphere Reserve.</li>
    <li>3,472 square miles or 8,987 square km.</li>
    <li>96 % in Wyoming and 3 % in Montana.</li>
</ul>
<h3>Yosemite National Park</h3>
<ul>
    <li>El Capitan is the largest granite monolith in the world. It rises more than 3,000 feet above the valley floor and is a favorite for experienced rock climbers.</li>
    <li>Yosemite Falls: This is the tallest waterfall in North America. Snow runoff cascades down the 2,425 foot drop, with peak flow in May. In winter, an ice cone is often visible at the top of the falls.</li>
    <li>Giant Sequoias and Mariposa Grove: Mariposa Grove contains about 500 mature giant sequoias. </li>
    <li>There are 840 miles of trails to hike in Yosemite National Park</li>
</ul>
<button>Make the last list item yellow</button>
<script src="js/jquery-3.6.0.js"></script>
<script>
    // $("button").on('click', function(){
    //     $("ul").each(function(){
    //       $(this).children().last().css("background", "cornsilk");
    //     });
    // });
    // Alfredo Oviedo solution:
    $("button").click(function (){
        $("li:last-child").css("background-color", "yellow");
    });

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

    $("li").on('click', function(){
        // $(this).parent().children().first().css("color", "blue");
        $(this).siblings().first().css("color", "blue");
    });


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