Created
December 24, 2020 15:04
-
-
Save akionsight/9cc87c4848e6ad4aeecc13c269dcfa06 to your computer and use it in GitHub Desktop.
Just a simple counter with html and javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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