html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Gold Clicker</title>
</head>
<body>
<div style="text-align:center" id="area"><font id="gold1" color="white">Gold: </font><span id="gold">0</span><br><br>
<button id="gButton" onclick="earnGold(1)">Earn Gold</button> <br>
<span id="cost">50 Gold: </span> <button id="upgrade1" onclick="upgrade1()">Upgrade 1</button>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
#gButton {
border:1px solid darkyellow;
background-color: yellow;
padding: 15px 30px;
border-radius:30px;
color:;
font-size: 30;
margin: 0 auto;
margin-bottom:20px;
}
#gButton:hover {
cursor:pointer;
}
#area {
background-color: #ff9a02;
border: 2px solid #bf7a02;
border-radius:30px;
padding: 70px 20px;
margin:0 auto;
}
#gold {
margin-top: 15px;
color: white;
font-size: 30px;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
var gold = 0;
function earnGold(number) {
gold = gold + number;
document.getElementById('gold').innerHTML = gold;
}
function upgrade1() {
if (gold >= 50){ document.getElementById('gButton').onclick = function(){earnGold(2); upgrade2() }
document.getElementById ('upgrade1').innerHTML = 'Upgrade 2';
document.getElementById('cost').innerHTML = '100 Gold:'
earnGold(-50)
}
function upgrade2(){
if (gold >= 100){ document.getElementById('gButton').onclick = function(){earnGold(4)}
document.getElementById ('upgrade1').innerHTML = 'Upgrade 3';
document.getElementById('cost').innerHTML = '200 Gold:'
earnGold(-100)
}
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run