franpcode/Vanilla-Javascript-Counter
1
0
Fork 0
mirror of https://github.com/FranP-code/Vanilla-Javascript-Counter.git synced 2025-10-12 23:52:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

replay counter function added

Browse Source
This commit is contained in:
Francisco Pessano
2022-01-21 20:15:50 -03:00
parent 11eeeac8c0
commit bdb5b0f0a0
2 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -8,6 +8,13 @@
<script src="./script.js"></script> <script src="./script.js"></script>
</head> </head>
<body> <body>
<form id="form">
<label>Thing to count</label>
<input type="number">
<label>Seconds between number and number</label>
<input type="number">
<button id="form-button">START</button>
</form>
<div class="container"> <div class="container">
<div id="counter-element"> <div id="counter-element">

28
script.js
View File

@@ -1,10 +1,14 @@
function counter(number, seconds) { function counter(number, seconds, e) {
e.preventDefault()
seconds = seconds * 1000 seconds = seconds * 1000
const counterElement = document.getElementById('counter-element') const counterElement = document.getElementById('counter-element')
let counterNumber = 0 let counterNumber = 0
counterElement.innerText = counterNumber counterElement.innerText = counterNumber
const button = document.getElementById("form-button")
function setTimeOutFunction() { function setTimeOutFunction() {
@@ -13,15 +17,35 @@ function counter(number, seconds) {
if (counterNumber <= number) { if (counterNumber <= number) {
button.disabled = true
setTimeout(setTimeOutFunction, seconds) setTimeout(setTimeOutFunction, seconds)
} else { } else {
button.disabled = false
clearTimeout(setTimeOutFunction) clearTimeout(setTimeOutFunction)
return true
} }
} }
setTimeout(setTimeOutFunction, seconds) setTimeout(setTimeOutFunction, seconds)
} }
window.onload = () => counter(45, 0.1) window.onload = () => {
const button = document.getElementById("form-button")
const counterElement = document.getElementById('counter-element')
counterElement.innerText = 0
const buttonFunction = (e) => {
const formElement = document.getElementById('form')
const thingToCount = formElement.children[1].value
const seconds = formElement.children[3].value
counter(thingToCount, seconds, e)
}
button.addEventListener("click", buttonFunction)
}