Skip to content

Instantly share code, notes, and snippets.

@akionsight
Created December 24, 2020 15:04
Show Gist options
  • Save akionsight/9cc87c4848e6ad4aeecc13c269dcfa06 to your computer and use it in GitHub Desktop.
Save akionsight/9cc87c4848e6ad4aeecc13c269dcfa06 to your computer and use it in GitHub Desktop.
Just a simple counter with html and javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter</title>
</head>
<body>
<h1 id="number">0</h1>
<button id="up-button">Up Button</button>
<button id="down-button">Down Button</button>
</body>
<script>
const up_button = document.getElementById("up-button");
const down_button = document.getElementById("down-button");
const num = document.getElementById("number");
if (up_button && down_button) {
up_button.addEventListener("click", push_counter_up);
down_button.addEventListener("click", push_counter_down);
}
function push_counter_up() {
let current_num = number.innerHTML;
let number_as_int = Number(current_num);
let new_count = number_as_int + 1;
number.innerHTML = new_count.toString();
// console.log(`current number is ${current_num}`)
}
function push_counter_down() {
let current_num = number.innerHTML;
number.innerHTML = current_num - 1;
// console.log(`current number is ${current_num}`)
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment