html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<html>
<head>
<title>Sample HTML Code</title>
</head>
<body>
<label id="countLabel">0</label><br>
<div id="BtnContainer">
<button id="decreaseBtn" class="button">Decrease</button>
<button id="resetBtn" class="button">Reset</button>
<button id="increaseBtn" class="button">Increase</button>
</div>
</body>
</html>
</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
#countLabel {
display: block;
text-align: center;
font-size: 6em;
font-family: Helvitica;
margin: 35px;
}
#BtnContainer {
text-align: center;
}
.button {
padding: 4px 10px;
font-size: 1.1em;
color: white;
background-color: deepskyblue;
margin: 0px;
border-radius: 7.5px;
transi
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
window.alert("I hope you like it, pls give a like!");
const decreaseBtn = document.getElementById("decreaseBtn");
const resetBtn = document.getElementById("resetBtn");
const increaseBtn = document.getElementById("increaseBtn");
const countLabel = document.getElementById("countLabel");
let count = 0;
increaseBtn.onclick = function(){
count++;
countLabel.textContent = count;
}
decreaseBtn.onclick = function(){
count--;
countLabel.textContent = count;
}
resetBtn.onclick = function(){
count = 0;
countLabel.textContent = count;
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run