getting node values from an array
by al nmeri
HTML
<form method=POST>
<input id=hours type=text maxlength=2 placeholder="00" />
<input id=minutes type=text maxlength=2 placeholder="25" />
<input id=seconds type=text maxlength=2 placeholder="00" />
<br>
<input id=submit type=submit disabled/>
</form>
<div id=reset>RESET</div>
CSS
form {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
border: 1px solid red;
}
input {
flex: 1 20%;
height: 200px;
font-size: 500%;
box-sizing: border-box;
}
#submit {
position: absolute;
display: block;
height: initial;
font-size: initial;
}
#reset {
width: 80%;
height: 40px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
border: 1px solid;
cursor: pointer;
}
JavaScript
var formItems = document.querySelectorAll("input");
var formArray = Array.prototype.slice.call(formItems, 0, formItems.length - 1);
var submit = document.querySelector("#submit");
for (var i = 0; i < formArray.length; i++) {
formArray[i].addEventListener("input", validate);
formArray[i].addEventListener("focus", forward);
formArray[i].addEventListener("blur", backward);
};
function forward(event) {
event.target.style.paddingLeft = "3%";
event.target.style.transition = "all 0.2s ease-in-out";
}
function backward(event) {
event.target.style.paddingLeft = "-3%";
event.target.style.transition = "all 0.1s ease-in-out";
}
function validate() {
// formArray.forEach(function(){
for (var j = 0; j < formArray.length; j++) {
//var expression = /([0-5][0-9])/g;
if (Number(formArray[j].value) <= 59) {
console.log("success!");
//if (this.value.match(expression) !== true) {
submit.removeAttribute("disabled");
} else alert("Please Input A Valid Timeframe");
}
//}});
}
var seconds = document.querySelector("#seconds");
var minutes = document.querySelector("#minutes");
var hours = document.querySelector("#hours");
var congratsText = "Time is up! Congratulations. You can take a break :)";
var reset = document.querySelector("#reset");
submit.addEventListener("click", function() {
countDown(seconds);
});
function countDown(time) {
submit.setAttribute("disabled", "");
var interval = setInterval(function() {
if (time.value <= 0) {
minutes.value -= 1;
time.value = 59;
if (minutes.value <= 0) {
hours.value -= 1;
minutes.value = 59;
if (hours.value <= 0) {
resetFunc();
alert(congratsText);
} else hours.value -= 1;
} else {
minutes.value -= 0;
//time.value = 59;
}
} else time.value -= 1;
}, 1000);
reset.addEventListener("click", resetFunc);
function resetFunc() {
clearInterval(interval);
for (var i = 0; i <...