codeup-web-exercises/attributeMethods.html at main · CoJUr/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
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Attributes</title>
  <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: red;
    }
    .cool-box {
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
    .awesome-title {
      font-family: "Comic Sans MS",serif;
      font-size: 40px;
      font-weight: bold;
      background-color: blue;
      color: yellow;
      padding: 10px;
      border-radius: 50px;
    }
    .night-mode {
      background: black;
      color: whitesmoke;
    }
  </style>
</head>
<body>
<main class="container">
  <h1 class="text-center">Sign In</h1>
  <div class="box"></div>
  <div class="row">
    <div class="col-md-6">
      <h3>Login Form</h3>
      <button id="night-mode-btn" class="btn btn-success">Night Mode</button>
      <form action="" method="POST">
        <div class="form-group">
          <label for="pass">Password</label>
          <input class="form-control" type="password" id="pass">
        </div>
        <div class="form-group">
          <label for="verify">Verify Password</label>
          <input class="form-control" type="password" id="verify">
        </div>
        <button id="password-btn" class="btn btn-primary btn-block invisible">Login</button>
      </form>
    </div>
  </div>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
<script>

  $(function() {

    "use strict";

// ==== Getter (returns a value)


// get the current inner HTML of the h1 element

    console.log($('h1').text())

// get the current display value of the box

    console.log($(".box").css('display'))

// ==== Setter (returns a jQuery object)

// make box bigger and round with multiple css methods

    $(".box").css('width', '200px');
    $(".box").css('height', '200px');

    $(".box").css('width', '200px')
              .css('height', '200px') // no longer a css method after this point, so the next line wont be recognized as
            //a valid method (because its a string by this point)
              .css('background-color', 'blue')

    $(".box").css({width: '200px', height: '200px', 'background-color': 'red'}) // this way lets us set multiple properties at once

    $('.box').css('background', 'blue').text('hello').css('border-radius', '50px') // this works bc .text() wasn't empty

// ==== addClass() and removeClass()

// Apply cool-box to .box initially

  $(".box").addClass('cool-box');
    $(".box").removeClass('box')

    $('.box').removeClass('box').addClass('cool-box')  //works

// Apply cool-box only when hovering over .box

$('.box').hover(function() {
  $(this).addClass('cool-box');
}, function() {
  $(this).removeClass('cool-box');
})

console.log($('.box').hasClass('box'));

// only make submit button visible if password fields match and are at least 5 chars long

    // $('input[type=password]').keyup(function() {
    //     if ($('#pass').val() === $('#verify').val() && $('#pass').val().length > 5) {
    //         $('#password-btn').removeClass('invisible');
    //     } else {
    //         // TODO: refactor function to hide the submit button when the user changes the passwords after matching
    //         $('#password-btn').addClass('invisible');
    //     }
    // });


// ====  toggleClass()


// toggle awesome-title class on h1 when double-clicking it. console log if it has the class

$('h1').dblclick(function () {
  $(this).toggleClass('awesome-title')
})


// when clicking Night Mode button, add and remove night-mode class to body element


  });

</script>

</body>
</html>