Skip to content

Instantly share code, notes, and snippets.

@AliAlmasi

AliAlmasi/Counter.js.html

Created October 17, 2023 00:27
Show Gist options
  • Save AliAlmasi/d8eee90a69bc94f60dd647563dc4a0f7 to your computer and use it in GitHub Desktop.
Save AliAlmasi/d8eee90a69bc94f60dd647563dc4a0f7 to your computer and use it in GitHub Desktop.
Download ZIP
Simple counter w/ JS
Raw
Counter.js.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counter.Js</title>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
html {
font-size: 62.5%;
font-family: monospace
}
body {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
font-size: medium;
background: linear-gradient(112.1deg, #202639 11.4%, #3f4c77 70.2%);
color: #1b1f2c;
}
main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
padding: 4rem 6rem;
background-color: #ffffff66;
border-radius: 16px;
box-shadow: 0 4px 25px #00000033;
border: 1px solid #d7d9e0;
}
h1 {
letter-spacing: 3px;
font-weight: 900;
}
#counterbox {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
#number {
font-size: 3rem;
background-color: #2b334b;
border: 3px solid #d7d9e0;
color: #d7d9e0;
padding: 1rem 3rem;
font-weight: 500;
border-radius: 100000px;
text-align: center;
user-select: text;
transition: background-color .2s;
}
#number:hover {
background-color: #202639;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #d7d9e0;
border-radius: 100000px;
width: 5rem;
height: 5rem;
transition: background-color .2s;
font-size: 5rem;
}
.buttons:hover {
cursor: pointer;
background-color: #ffffff33;
}
</style>
</head>
<body>
<main>
<h1>Counter.Js</h1>
<div id="counterbox">
<span id="minus" class="buttons">-</span>
<span id="number"></span>
<span id="plus" class="buttons">+</span>
</div>
</main>
<script defer>
let counter_number = 0;
const plus_button = document.querySelector(`#plus`);
const minus_button = document.querySelector(`#minus`);
const number = document.getElementById("number");
number.textContent = counter_number;
plus_button.addEventListener('click', () => {
counter_number++;
number.textContent = counter_number;
})
minus_button.addEventListener('click', () => {
counter_number--;
number.textContent = counter_number;
})
</script>
</body>
</html>
@AliAlmasi
Copy link
Author

image

Copy link

ghost commented Mar 2, 2024 

data:text/html;base64,PCFkb2N0eXBlIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQoNCgk8aGVhZD4NCgkJPG1ldGEgY2hhcnNldD0iVVRGLTgiPg0KCQk8dGl0bGU+Q291bnRlci5KczwvdGl0bGU+DQoJCTxzdHlsZT4NCgkJCSosDQoJCQkqOjpiZWZvcmUsDQoJCQkqOjphZnRlciB7DQoJCQkJbWFyZ2luOiAwOw0KCQkJCXBhZGRpbmc6IDA7DQoJCQkJYm94LXNpemluZzogYm9yZGVyLWJveDsNCgkJCQl1c2VyLXNlbGVjdDogbm9uZTsNCgkJCX0NCg0KCQkJaHRtbCB7DQoJCQkJZm9udC1zaXplOiA2Mi41JTsNCgkJCQlmb250LWZhbWlseTogbW9ub3NwYWNlDQoJCQl9DQoNCgkJCWJvZHkgew0KCQkJCWRpc3BsYXk6IGZsZXg7DQoJCQkJaGVpZ2h0OiAxMDB2aDsNCgkJCQl3aWR0aDogMTAwdnc7DQoJCQkJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQoJCQkJYWxpZ24taXRlbXM6IGNlbnRlcjsNCgkJCQlmb250LXNpemU6IG1lZGl1bTsNCgkJCQliYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTEyLjFkZWcsICMyMDI2MzkgMTEuNCUsICMzZjRjNzcgNzAuMiUpOw0KCQkJCWNvbG9yOiAjMWIxZjJjOw0KCQkJfQ0KDQoJCQltYWluIHsNCgkJCQlkaXNwbGF5OiBmbGV4Ow0KCQkJCWZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQoJCQkJYWxpZ24taXRlbXM6IGNlbnRlcjsNCgkJCQlnYXA6IDEuNnJlbTsNCgkJCQlwYWRkaW5nOiA0cmVtIDZyZW07DQoJCQkJYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjY2Ow0KCQkJCWJvcmRlci1yYWRpdXM6IDE2cHg7DQoJCQkJYm94LXNoYWRvdzogMCA0cHggMjVweCAjMDAwMDAwMzM7DQoJCQkJYm9yZGVyOiAxcHggc29saWQgI2Q3ZDllMDsNCgkJCX0NCg0KCQkJaDEgew0KCQkJCWxldHRlci1zcGFjaW5nOiAzcHg7DQoJCQkJZm9udC13ZWlnaHQ6IDkwMDsNCgkJCX0NCg0KCQkJI2NvdW50ZXJib3ggew0KCQkJCWRpc3BsYXk6IGZsZXg7DQoJCQkJanVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOw0KCQkJCWFsaWduLWl0ZW1zOiBjZW50ZXI7DQoJCQkJZ2FwOiAycmVtOw0KCQkJfQ0KDQoJCQkjbnVtYmVyIHsNCgkJCQlmb250LXNpemU6IDNyZW07DQoJCQkJYmFja2dyb3VuZC1jb2xvcjogIzJiMzM0YjsNCgkJCQlib3JkZXI6IDNweCBzb2xpZCAjZDdkOWUwOw0KCQkJCWNvbG9yOiAjZDdkOWUwOw0KCQkJCXBhZGRpbmc6IDFyZW0gM3JlbTsNCgkJCQlmb250LXdlaWdodDogNTAwOw0KCQkJCWJvcmRlci1yYWRpdXM6IDEwMDAwMHB4Ow0KCQkJCXRleHQtYWxpZ246IGNlbnRlcjsNCgkJCQl1c2VyLXNlbGVjdDogdGV4dDsNCgkJCQl0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIC4yczsNCgkJCX0NCg0KCQkJI251bWJlcjpob3ZlciB7DQoJCQkJYmFja2dyb3VuZC1jb2xvcjogIzIwMjYzOTsNCgkJCX0NCg0KCQkJLmJ1dHRvbnMgew0KCQkJCWRpc3BsYXk6IGZsZXg7DQoJCQkJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQoJCQkJYWxpZ24taXRlbXM6IGNlbnRlcjsNCgkJCQlib3JkZXI6IDJweCBzb2xpZCAjZDdkOWUwOw0KCQkJCWJvcmRlci1yYWRpdXM6IDEwMDAwMHB4Ow0KCQkJCXdpZHRoOiA1cmVtOw0KCQkJCWhlaWdodDogNXJlbTsNCgkJCQl0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIC4yczsNCgkJCQlmb250LXNpemU6IDVyZW07DQoJCQl9DQoNCgkJCS5idXR0b25zOmhvdmVyIHsNCgkJCQljdXJzb3I6IHBvaW50ZXI7DQoJCQkJYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjMzOw0KCQkJfQ0KCQk8L3N0eWxlPg0KCTwvaGVhZD4NCg0KCTxib2R5Pg0KCQk8bWFpbj4NCgkJCTxoMT5Db3VudGVyLkpzPC9oMT4NCgkJCTxkaXYgaWQ9ImNvdW50ZXJib3giPg0KCQkJCTxzcGFuIGlkPSJtaW51cyIgY2xhc3M9ImJ1dHRvbnMiPi08L3NwYW4+DQoJCQkJPHNwYW4gaWQ9Im51bWJlciI+PC9zcGFuPg0KCQkJCTxzcGFuIGlkPSJwbHVzIiBjbGFzcz0iYnV0dG9ucyI+Kzwvc3Bhbj4NCgkJCTwvZGl2Pg0KCQk8L21haW4+DQoNCgkJPHNjcmlwdCBkZWZlcj4NCgkJCWxldCBjb3VudGVyX251bWJlciA9IDA7DQoJCQljb25zdCBwbHVzX2J1dHRvbiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoYCNwbHVzYCk7DQoJCQljb25zdCBtaW51c19idXR0b24gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKGAjbWludXNgKTsNCgkJCWNvbnN0IG51bWJlciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJudW1iZXIiKTsNCg0KCQkJbnVtYmVyLnRleHRDb250ZW50ID0gY291bnRlcl9udW1iZXI7DQoJCQlwbHVzX2J1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsNCgkJCQljb3VudGVyX251bWJlcisrOw0KCQkJCW51bWJlci50ZXh0Q29udGVudCA9IGNvdW50ZXJfbnVtYmVyOw0KCQkJfSkNCg0KCQkJbWludXNfYnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gew0KCQkJCWNvdW50ZXJfbnVtYmVyLS07DQoJCQkJbnVtYmVyLnRleHRDb250ZW50ID0gY291bnRlcl9udW1iZXI7DQoJCQl9KQ0KCQk8L3NjcmlwdD4NCgk8L2JvZHk+DQoNCjwvaHRtbD4=

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment