diff --git a/Projects/ArmstrongChecker/armstrong.css b/Projects/ArmstrongChecker/armstrong.css index 8dc035657..e81dbd288 100644 --- a/Projects/ArmstrongChecker/armstrong.css +++ b/Projects/ArmstrongChecker/armstrong.css @@ -94,7 +94,7 @@ p { color: #fff; } -#demo { +#demo, #invalid { display: flex; justify-content: center; align-items: center; diff --git a/Projects/ArmstrongChecker/armstrong.html b/Projects/ArmstrongChecker/armstrong.html index 3c6377364..87f28320a 100644 --- a/Projects/ArmstrongChecker/armstrong.html +++ b/Projects/ArmstrongChecker/armstrong.html @@ -13,6 +13,7 @@

Armstrong Checker

+

diff --git a/Projects/ArmstrongChecker/armstrong.js b/Projects/ArmstrongChecker/armstrong.js index b90fac861..b1a58014a 100644 --- a/Projects/ArmstrongChecker/armstrong.js +++ b/Projects/ArmstrongChecker/armstrong.js @@ -1,44 +1,70 @@ -const textinput = document.querySelector(".text"); -console.log(textinput); +const textinput = document.querySelector("#text"); +// console.log(textinput); const res = document.getElementById("demo"); +const invalid = document.getElementById("invalid"); const checkbtn = document.getElementById("btn"); + function textfxn() { - res.innerHTML = ""; - let text = document.getElementById("text").value; - let newtext = text.replace(/[^0-9]/g, ''); - let alphatext = text.replace(/[0-9]/g, ''); - console.log(newtext, alphatext); + // let text = document.getElementById("text").value; +// res.innerHTML = ""; + invalid.innerHTML = ""; + const text = textinput.value; + const hasOnlyNumbers = /^\d+$/.test(text); + console.log(text, hasOnlyNumbers); - if (newtext && !alphatext) { - checkbtn.style.opacity = "1"; - document.getElementById("btn").addEventListener("click", check); - checkbtn.classList.add("buttonjs"); - } - else { - alert("invalid input!") - checkbtn.style.opacity = "0.25"; - checkbtn.classList.remove("buttonjs"); - window.location.reload(); - return; + if (text && hasOnlyNumbers) { + checkbtn.style.opacity = "1"; + checkbtn.classList.add("buttonjs"); + document.getElementById("btn").addEventListener("click", check); + checkbtn.disabled = false; + // document.getElementById("btn").addEventListener("enter",check ); + } else { + if (text) { + invalid.innerHTML = "Invalid Input: Please use numbers only."; } + // alert("invalid input!"); + checkbtn.style.opacity = "0.25"; + checkbtn.classList.remove("buttonjs"); + checkbtn.disabled = true; + // window.location.reload(); + } } function check() { - let text = document.getElementById("text").value; - let newtext = text.replace(/[^0-9]/g, ''); - const numberOfDigits = newtext.length; - let temp = newtext; - let sum = 0; - while (temp > 0) { - let remainder = temp % 10; - sum += remainder ** numberOfDigits; - temp = parseInt(temp / 10); - } - if (sum == newtext) { - res.innerHTML = (`${newtext} is an Armstrong number`); - } - else { - res.innerHTML = (`${newtext} is not an Armstrong number.`); - } + if (checkbtn.disabled) { + return; + } + res.innerHTML=""; + + const numStr = textinput.value; + const numberOfDigits = numStr.length; + let sum = 0; + let temp = parseInt(numStr, 10); + + // An empty input shouldn't be checked + if (numStr === "") { + return; + } + + while (temp > 0) { + const remainder = temp % 10; + sum += remainder ** numberOfDigits; + temp = parseInt(temp / 10, 10); + } + + if (sum == numStr) { + res.innerHTML = `${numStr} is an Armstrong number ✨`; + } else { + res.innerHTML = `${numStr} is not an Armstrong number.`; + } } -// });value; \ No newline at end of file +// });value; +// textinput.addEventListener("keyup", textfxn); +checkbtn.addEventListener("click", check); +textinput.addEventListener("keydown", function (event) { + if (event.key === "Enter") { + event.preventDefault(); + check(); + } +}); +textfxn();