redwood_web_exercises/attributes-css-lesson.html at master · CodeupClassroom/redwood_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
138
139
140
141
<!DOCTYPE html>
<html>
<head>
    <title>Example jQuery Page</title>
    <style>
        .centered {
            text-align: center;
        }
        .highlighted {
            background-color: #FF0;
        }
    </style>
</head>
<body>

<h1>Example Page</h1>

<div class="centered important">
    <h3>NOTICE</h3>
    <p>This is an important message!</p>
</div>

<div class="not-important">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, incididunt ut <span class="important">labore et dolore magna aliqua.</span>, quis ut aliquip ex ea commodo.</p>
</div>

<p class="centered important">This is also very important.</p>

<a href="#" id="highlight-important">Click to highlight important text.</a>

<dl>
    <dt>Programming language</dt>
    <dd>It's a language to produce value using a computer</dd>
</dl>


<form action="#">
    <label for="username">Username</label>
    <input type="text" id="username" value="">
    <span id="username-error"></span>
    <button id="login">Login</button>
</form>

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"
>
</script>
<script>
    $("#login").on("click", validateUsername);
    function validateUsername(event) {
        // submit buttons and links
        event.preventDefault(); // Prevents the default behavior of the button (sending the form)

        var username = $("#username").val(); // getter
        if (username.trim() === "") {
            $("#username-error")
                .html("Username cannot be empty") // setters
                .css("background-color", "red") // setters
            ;
        } else {
            // with a form or submit button
            $("form").submit();

            // if it were a link
            //location.href = $("a").attr("href");
        }
    }


    var person = {
        personName: "justin",
        // I want it to behave as both, as a getter & as a setter
        name: function (newName) {
            // Setter
            if (newName) {
                this.personName = newName;
            } else {
                // getter
                return this.personName;
            }
        }
    }

    console.log(person.name());  // getter
    person.name("fernando"); // setter
    console.log(person.name()) // getter

    "use strict";
    // get the name of a person -> getName()
    var html = $(".not-important").html();  // getter, a method that returns the value of a property of an object
    console.log(html);
    // setter
    //$(".not-important").html("<p>New content</p>");


    $(".important").text();  // getter
    //$(".important").text("New text");  // setter


    console.log($(".centered").attr("class")); // getter
    //console.log($(".centered").attr("class", "not-important")); // setter

    console.log($("#highlight-important").css("color"));
    $("#highlight-important").css("color", "yellow");

    // Method chaining
    $("h3")
        .css("font-size", "2em") //setter
        .css("color", "blue") //setter
        .css("text-transform", "uppercase") //setter
        .html("New content") //setter
        .attr("class", "new-class")//setter
        .attr("readonly", true)//setter
    ;

    $(".centered").css({
            "font-size": "4em",
            "color": "red",
            "text-transform": "lowercase"
        })
        .html("new HTML content")
        .attr("class", "super-important")
    ;

    $("#highlight-important").on("click", highlightImportantElements);
    function highlightImportantElements() {
        var $important = $(".important");
        $important.toggleClass("highlighted");
        /*if ($important.hasClass("highlighted")) {
            $important.removeClass("highlighted");
        } else {
            $important.addClass("highlighted");
        }*/
    }

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