codeup-web-exercises/jquery_faq.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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10 Facts</title>
    <style>
        .invisible {
        visibility: hidden;
        }
    </style>
</head>
<body>

<dl>
    <h3>Facts About John-Michael</h3>
    <dt>JM's favorite food:</dt>
    <dd>Ribeye Steak</dd>

    <dt>JM's favorite color:</dt>
    <dd>Olive Drab Green</dd>

    <dt>JM's favorite number:</dt>
    <dd>16</dd>

    <dt>JM's favorite sport:</dt>
    <dd>Football</dd>

    <dt>JM's favorite sports team:</dt>
    <dd>Chicago Bears</dd>

    <dt>JM's favorite Country:</dt>
    <dd>United States of America</dd>

    <dt>JM's favorite band:</dt>
    <dd>August Burns Red</dd>

    <dt>JM's favorite activity:</dt>
    <dd>Spending Time With My Family</dd>

    <dt>JM's favorite season:</dt>
    <dd>Autumn</dd>

    <dt>JM's favorite person:</dt>
    <dd>The Wife</dd>
</dl>

<a href="#" id="visible-invisible">Click to toggle the see/unsee dd element</a>

<ul>
    <h3>Facts About Jasmine</h3>
    <li>Jas's favorite food: anything Italian</li>
    <li>Jas's favorite color: maroon</li>
    <li>Jas's favorite person: John-Anthony</li>
    <li>Jas's favorite activity: sleeping</li>
</ul>
<ul>
    <h3>Facts About John-Anthony</h3>
    <li>John-Anthony's favorite food: bacon</li>
    <li>John-Anthony's favorite color: red</li>
    <li>John-Anthony's favorite person: Jasmine</li>
    <li>John-Anthony's favorite activity: playing with legos</li>
</ul>
<ul>
    <h3>Facts About Sunny</h3>
    <li>Sunny's favorite food: bacon</li>
    <li>Sunny's favorite color: unknown</li>
    <li>Sunny's favorite person: John-Anthony</li>
    <li>Sunny's favorite activity: barking</li>
</ul>

<button type="button">change the background color</button>

<script src="jquery-3.6.0.js"></script>
<script>
    $('dd').addClass('invisible');

    $(document).ready(function() {
        $('#visible-invisible').click(function(event) {
            event.preventDefault();
            $('dd').toggleClass('invisible')
        })
    });

    $(document).ready(function() {
        $('dt').click(function () {
                $(this).css('background-color', 'yellow');
        });
    });

    $(document).ready(function() {
        $('button').click(function(event) {
            event.preventDefault();
            $('ul').each(function(index) {
                $(this).children().last().css('background-color', 'yellow')
            })
        })
    });

    $(document).ready(function() {
        $('h3').click(function () {
            $(this).next().css('font-weight', 'bold')
            })
        });

    $(document).ready(function() {
        $('li').click(function () {
            $('ul').each(function(index) {
                $(this).children('li').first().css('color', 'blue')
            })
        })
    });

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