bash-codeup-web-exercises/jquery_faq.html at master · CodeupClassroom/bash-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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Attribute and CSS Exercise</title>
    <style>
        .invisible {
            visibility: hidden;
        }

        .hide {
            display: none;
        }

        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
        .bold-text {
            font-weight: bold;
        }
        .first-item-highlight {
            color: blue;
        }
    </style>
</head>
<body>

    <h2 id="register-link" class="hide">Register for updates <a href="#">here</a></h2>

    <div>
        <h1>Would you like to sign up for our newsletter?</h1>
        <span class="close-btn">X</span>
    </div>

    <a href="http://google.com" id="display-dd">Toggle</a>
    <dl>
        <dt>Lorem Park</dt>
        <dd class="invisible">Something something, blah blah.</dd>

        <dt>Ipsum Lake</dt>
        <dd class="invisible">.halb halb, gnihtemos gnihtemoS</dd>

        <dt>Computer Park</dt>
        <dd class="invisible">Look at all those Gateways...</dd>

        <dt>Boiler Plate</dt>
        <dd class="invisible">This might be a bit plain...</dd>

        <dt>Schmear Geyser</dt>
        <dd class="invisible">Get your bagels, my dudes.</dd>

        <dt>Dab On 'Em Cliff</dt>
        <dd class="invisible">Cam Newton's fault, probably.</dd>

        <dt>Astrodome</dt>
        <dd class="invisible">Houston baseball park.</dd>

        <dt>Texas Cyclone</dt>
        <dd class="invisible">Was a cool roller coaster.</dd>

        <dt>My Aunt Pam's House</dt>
        <dd class="invisible">They have a pomeranian.</dd>

        <dt>Jellystone National Park</dt>
        <dd class="invisible">Yogi lives there.</dd>
    </dl>

    <h3>Snæfellsjökull</h3>
    <ul class="hide">
        <li>Stratovolcano</li>
        <li>Sometimes it may be seen from the city of Reykjavík over Faxa Bay, at a distance of 120 km.</li>
        <li>The mountain is one of the most famous sites of Iceland, primarily due to the novel Journey to the Center of the Earth (1864) by Jules Verne, in which the protagonists find the entrance to a passage leading to the center of the earth on Snæfellsjökull.</li>
        <li>In August 2012 the summit was ice-free for the first time in recorded history.</li>
    </ul>

    <h3>Vatnajökull</h3>
    <ul class="hide">
        <li>Vatnajökull National Park is divided into four territories.</li>
        <li>Vatnajökull is Europe's largest glacier outside the arctic, with a surface area of 8,100 km2.</li>
        <li>It encompasses all of Vatnajökull glacier and extensive surrounding areas. These include the national parks previously existing at Skaftafell in the southwest and Jökulsárgljúfur in the north.</li>
        <li>On 5 July 2019, Vatnajökull National Park was inscribed as a World Heritage Site.</li>
    </ul>

    <h3>Þingvellir</h3>
    <ul class="hide">
        <li>The National Gallery of Iceland owns more than 150 paintings by Ásgrímur Jónsson that have Þingvellir as their subject.git</li>
        <li>The name Þingvellir is derived from the Old Norse Þingvǫllr, from þing (“thing, assembly”) and vǫllr (“field”), meaning assembly fields.</li>
        <li>Þingvellir is associated with the Althing, the national parliament of Iceland, which was established at the site in 930 AD.</li>
        <li>Þingvellir was designated as a World Heritage Site in 2004.</li>
    </ul>

    <button id="highlighter">Highlight the last li of each ul</button>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $('#display-dd').click(function(event){
                event.preventDefault();
                $('dd').toggleClass('invisible');
            });
            //Bonus
            $('dt').click(function(){
                console.log(this);
                $(this).toggleClass('highlight');
            });

            $('#highlighter').on('click', function(){
                $('ul').each(function(index, element){
                   $(element).children().last().toggleClass('highlight');
                });
            });

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

            $('li').click(function(){
               $(this).parent().children().first().toggleClass('first-item-highlight');
            });

            $(".close-btn").click(function(){
                $(this).parent().fadeOut();
            });

            $("h3").click(function(){
                $(this).next().slideToggle();
            });

            $("#register-link").delay(8000).fadeIn();

        });
    </script>
</body>
</html>