html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Created by SaddleSneeze -->
<!DOCTYPE html>
<html>
<body onload="clickCounter()">
<div>
<button onclick="clickCounter('click')">Click me</button>
<button onclick="clickCounter('reset')">Reset count</button>
<br><br>
<div id="count">Note that Local Storage doesn't work in the SoloLearn App!</div>
<div id="info"><p>Click the button to see the counter increase.<br>
Run the code again, and the counter will continue where you left it.</p></div>
</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
/* Created by SaddleSneeze */
div:first-child {
text-align: center;
width: 76%;
margin-left: 50%;
transform: translateX(-50%);
background: rgba(163, 239, 255, 0.4);
border: 1.2px solid #79e6ff;
border-radius: 10px;
padding: 20px;
padding-bottom: 6px;
box-shadow: 4px 4px 10px 0px rgba(107,175,189,0.5);
}
button {
padding: 15px;
background: #1e8db2;
border-radius: 10px;
border: 1.2px solid #15637c;
cursor: pointer;
color: #fff;
outline: none;
user-select: none;
} button:hover {
background: #1a7b9b;
} button:active {
cursor: default;
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
// Created by SaddleSneeze
function clickCounter(x) {
// check if the browser supports web storage
typeof Storage != "undefined"? (
x == "click"?
// add 1 if button is clicked
localStorage.clickcount = Number(localStorage.clickcount) + 1:
// set count to 0 if clickcount doesn't exist or get's reset
localStorage.clickcount && x != "reset" || (localStorage.clickcount = 0),
1 != localStorage.clickcount? // if count isn't 1 end with plural
document.getElementById("count").innerHTML = "You have clicked the button <b>" + localStorage.clickcount + "</b> times.":
document.getElementById("count").innerHTML = "You have clicked the button <b>" + localStorage.clickcount + "</b> time."
):(
// inform the user that their browser doesn't support web storage
document.getElementById("count").innerHTML = "Sorry, your browser doesn't support web storage.",
document.getElementById("info").innerHTML = ""
)
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run