-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (90 loc) · 4.08 KB
/
index.html
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Javascript of steroids</title>
</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'></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-gen-cat">
</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://previews.123rf.com/images/vvoennyy/vvoennyy1711/vvoennyy171100514/89611756-macro-shooting-of-natural-mineral-rock-specimen-rough-magnesite-stone-on-dark-granite-background-fro.jpg" height = 150 width = 150 alt = "" onclick = "rpsGame(this)">
<img id = "paper" src = "https://cdn.inspirationhut.net/wp-content/uploads/2013/10/0.252.jpg" height = 150 width = 150 alt = "" onclick = "rpsGame(this)">
<img id = "scissor" src = "https://free.clipartof.com/1702-Free-Clipart-Of-A-Pair-Of-Scissors.jpg" height = 150 width = 150 alt = "" onclick = "rpsGame(this)">
</div>
</div>
<div class = "container-4">
<h2 id = "chane-my-color"> Challenge 4: Change the Colour of All Buttons</h2>
<div class = "flex-box-pick-color" >
<form action = "">
<select name = "backdrop" id = "background" onchange = "buttonColorChange(this)">
<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">Wee!</button>
<button class = "btn btn-danger">Yahoo!</button>
<button class = "btn btn-warning">Google!</button>
<button class = "btn btn-success">Facebook!</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 = "yourbox">
<h2>You: <span id = "your-blackjack-result"> 0 </span></h2>
</div>
<div id = "dealerbox">
<h2> Dealer: <span id = "dealer-blackjack-result"> 0 </span></h2>
</div>
</div>
<div class = "flex-blackjack-row-2">
<div>
<button class = "btn-lg btn btn-primary mr-2" id = "blackjack-hit-button"> Hit </button>
<button class = "btn-lg btn btn-warning mr-2" id = "blackjack-stand-button"> Stand </button>
<button class = "btn-lg btn btn-danger" id = "blackjack-deal-button"> Deal </button>
</div>
</div>
<div class = "flex-blackjack-row-3">
<table style "border: 1px black;">
<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 ="js/script.js"></script>
</body>
</html>