ADD:armstrong branch

Projects/ArmstrongChecker/armstrong.css

@@ -94,7 +94,7 @@ p {
     color: #fff;
 }
 
-#demo {
+#demo, #invalid {
     display: flex;
     justify-content: center;
     align-items: center;

Projects/ArmstrongChecker/armstrong.html

@@ -13,6 +13,7 @@ <h1>Armstrong Checker</h1>
         <input type="text" onkeyup="textfxn()" id="text" placeholder="Enter a positive Number">
         <!-- <input type="text" placeholder="reverse string"> -->
         <button id="btn">Check</button>
+        <p id="invalid"></p>
         <p id="demo"></p>
     </div>
     <script src="armstrong.js"></script>

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;
+// });value;
+// textinput.addEventListener("keyup", textfxn);
+checkbtn.addEventListener("click", check);
+textinput.addEventListener("keydown", function (event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    check();
+  }
+});
+textfxn();