codeup-web-exercises/jquery_exercises.html at main · Evan-C-Mead/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Exercises</title>
</head>
<body>

<h1 class="codeup" id="h1-header">jQuery Header</h1>

<p class="paragraph" id="body-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores doloribus error eveniet explicabo incidunt molestias mollitia nihil numquam, saepe soluta velit. Animi, perferendis quis.</p>

<h3 class="codeup" id="h3-header">This is an unordered list</h3>
<ul class="unordered" id="ul-list">
    <li class="list-item" id="list-item-one">Item one in the list</li>
    <li class="list-item" id="list-item-two">Item two in the list</li>
    <li class="list-item" id="list-item-three">Item three in the list</li>
    <li class="list-item" id="list-item-four">Item four in the list</li>
    <li class="list-item" id="list-item-five">Item five in the list</li>
</ul>

<div class="codeup" id="div-one">This is the div...</div>


<script src="js/jquery-2.2.4.js"></script>
<script>

    $(document).ready(function() {
        "use strict";

        // INSERT JAVASCRIPT CODE SAMPLE HERE
        $(document).ready(function() {
            alert( 'The DOM has finished loading!' );
        });

        $('h1').click(function (e) {
            $(e.target).css('background', 'blue');
        });

        $('p').dblclick(function(e) {
            $(e.target).css('font-size', '18px');
        });

        $('li').hover(function(e) {
            $(e.target).css('color', 'red');
        }, function(e) {
            $(e.target).css('color', 'black');
        });

    });

</script>

</body>
</html>