Clever_Programmer_JS_Tutorial/index.html at master · BJennin4/Clever_Programmer_JS_Tutorial · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascript Work</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="static/CSS/style.css" />
  </head>
  <body>
    <div class="container-1">
      <h2>Challenge 1: Your Age in Days</h2>
      <div class="flex-box-container-1">
        <div>
          <button class="btn btn-primary" onclick="ageInDays()">
            Click Me
          </button>
        </div>

        <div>
          <button class="btn btn-danger" onclick="reset()">Reset</button>
        </div>
      </div>
      <div class="flex-box-container-1">
        <div id="flex-box-result" style="display: none"></div>
      </div>
    </div>
    <div class="container-2">
      <h2>Challenge 2: Cat Generator</h2>
      <button
        class="btn btn-success"
        id="cat-generator"
        onclick="generateCat()"
      >
        Generate Cat
      </button>

      <div class="flex-box-container-2" id="flex-cat-gen"></div>
    </div>

    <div class="container-3">
      <h2>Challenge 3: Rock, Paper, Scissors</h2>
      <div class="flex-box-rps" id="flex-box-rps-div">
        <img
          id="rock"
          src="https://cdn.britannica.com/67/123467-050-E8AB40DD/Stonehenge-example-post-and-lintel-construction.jpg"
          height="150"
          width="150"
          onclick="rpsGame(this)"
        />
        <img
          id="paper"
          src="https://www.history.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTY1ODQ5MTM1NjM3OTk2NjM3/jefferson-bible-gettyimages-132193028.jpg"
          height="150"
          width="150"
          onclick="rpsGame(this)"
        />
        <img
          id="scissors"
          src="https://i.pinimg.com/originals/48/6e/54/486e5413f348269f859e784fed3c6c76.jpg"
          height="150"
          width="150"
          onclick="rpsGame(this)"
        />
      </div>
    </div>
    <div class="container-4">
      <h2 id="change-my-color">Challenge 4: Change the Color of All Buttons</h2>
      <div class="flex-box-pick-color">
        <form action="">
          <select
            name="backdrop"
            id="background"
            onchange="buttonColorChange(this)"
          >
            <option value="none" selected disabled hidden>Mix it up!</option>
            <option value="random">Random</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="reset">Reset</option>
          </select>
        </form>
        <button class="btn btn-primary">This</button>
        <button class="btn btn-danger">Button</button>
        <button class="btn btn-warning">Doesn't Do</button>
        <button class="btn btn-success">Anything</button>
      </div>
    </div>
    <div class="container-5">
      <h2>Challenge 5: Blackjack</h2>
      <h3><span id="blackjack-result">Let's play!</span></h3>
      <div class="flex-blackjack-row-1">
        <div id="your-box">
          <h2>You: <span id="your-blackjack-result">0</span></h2>
        </div>
        <div id="dealer-box">
          <h2>Dealer: <span id="dealer-blackjack-result">0</span></h2>
        </div>
      </div>
      <div class="flex-blackjack-row-2">
        <div>
          <button class="btn-lg btn-primary" id="blackjack-hit-button">
            Hit
          </button>
          <button class="btn-lg btn-warning" id="blackjack-stand-button">
            Stand
          </button>
          <button class="btn-lg btn-danger" id="blackjack-deal-button">
            Deal
          </button>
        </div>
      </div>
      <div class="flex-blackjack-row-3">
        <table>
          <tr>
            <th>Wins</th>
            <th>Losses</th>
            <th>Draws</th>
          </tr>
          <tr>
            <td><span id="wins">0</span></td>
            <td><span id="losses">0</span></td>
            <td><span id="draws">0</span></td>
          </tr>
        </table>
      </div>
    </div>
    <script src="static/js/script.js"></script>
  </body>
</html>