codeup-web-exercises/jquery_exercises.html at main · Austin-Whitley/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery exercise</title>
</head>
<body>
    <h1 id="main-header">jQuery intro exercise</h1>
    <p id="p-tag" class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eos harum molestiae sit vel? Dignissimos eaque
        exercitationem illum inventore laboriosam magnam numquam quis quos repellat voluptates! Animi itaque non ut?</p>
    <ul id="unordered-list">
        <li class="codeup">Somewhere over the rainbow</li>
        <li class="list-element">way up high.</li>
        <li class="list-element">And the Dreams that you dream of</li>
        <li class="list-element">once in a lullaby</li>
        <li class="codeup">some where over the rainbow</li>
        <li class="list-element">blue birds fly</li>
    </ul>
    <div id="container-div" class="paragraph">
        Lorem in a Div
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aliquid amet beatae eveniet
        exercitationem, impedit incidunt iste itaque labore laudantium maiores minus, mollitia nesciunt non quis
        temporibus vitae voluptatibus!
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        // $(document).ready(function (){
            //write js here so it loads after the page has finished.
            // alert("The page has finished loading.");

            //Selectors exercise pt 1
            // var alertElementID = $("#p-tag").html();
            // alert(alertElementID);
            //if you use two id tags only the first iteration of the tag will be alerted since id's should only ever be used once

            //selectors exercise pt 2
            // $('.codeup').css('border', '1px red solid');

            //selectors exercise pt 3
            // $('li').css('font-size', '20px');
            // $('h1, p, li').css('background-color', 'yellow');
            // var alertH1 = $("h1").html();
            // alert(alertH1);

            //selectors exercise pt 4
            // $(".main-header, .list-element, .codeup, #p-tag").css("background-color", "#FF0");
        // });


        //jQuery Mouse Events
        $("#main-header").click(function(){
            $(this).html("I can change the html by clicking on it!");
            $(this).css("background-color", "hotpink");
        });
        $(".paragraph").dblclick(function(){
            $(this).css("font-size", "18px");
        });
        $("li").hover(function(){
            $(this).css("color", "red");
            }, function(){
                $(this).css("color", "black");
            }
        );

        //jQuery Keyboard events

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