-
Notifications
You must be signed in to change notification settings - Fork 0
/
coffee.html
102 lines (75 loc) · 2.88 KB
/
coffee.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
<!DOCTYPE html>
<html>
<head>
<title>Hackbright Coffee Shop</title>
<!-- Bootstrap links -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Google fonts link -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway" >
<!-- Our CSS -->
<link rel="stylesheet" href="static/coffee.css">
</head>
<body>
<div class="container">
<div class="starter-template">
<h1>Coffee Shop</h1>
<br>
<img id="coffee-image" src="LOLWUT" alt="make this image work with js" height="300" width="200">
<h3 id="message">Click The Image To Order Coffee</h3>
<table class="table">
<tr>
<td class="col-md-2">
<button class="btn btn-default" id="espresso">Espresso</button>
</td>
<td class="col-md-2">
<button class="btn btn-default" id="latte">Latte</button>
</td>
<td class="col-md-2">
<button class="btn btn-default" id="hot-chocolate">Hot Chocolate</button>
</td>
</tr>
<tr>
<td>$3.25</td>
<td>$4.15</td>
<td>$2.50</td>
</tr>
</table>
<h4>Total: <span id="revenue"><!-- Revenue Message will show up here --></span></h4>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// Set these variables to their DOM elements
// let coffeeImage = document.querySelector('#coffee-image');
// let revenueMessage = coffeeImage.setAttribute('src','static/coffee_beans.jpg');
function makeCoffee() {
revenueMessage = coffeeImage.setAttribute('src','static/coffee_machine.jpg');
setTimeout(function () {
revenueMessage = coffeeImage.setAttribute('src','static/coffee_mug.jpg')
}, 1500);
setTimeout(function () {
revenueMessage = coffeeImage.setAttribute('src','static/coffee_beans.jpg')
}, 2500);
}
coffeeImage.addEventListener('click', makeCoffee)
$("img#coffee-image").attr("src","static/coffee_beans.jpg");
function makeCoffee() {
$("img#coffee-image").attr('src','static/coffee_machine.jpg');
setTimeout(function () {
$("img#coffee-image").attr('src','static/coffee_mug.jpg');
}, 1500);
setTimeout(function () {
$("img#coffee-image").attr('src','static/coffee_beans.jpg');
}, 2500);
}
$("img#coffee-image").click(makeCoffee);
const prices = {
"brew": 2.05,
"espresso": 3.25,
"latte": 4.15,
"hot chocolate": 2.50
};
</script>
</body>
</html>