first

verify-account-ui/script.js

@@ -1,14 +1,30 @@
 const codes = document.querySelectorAll('.code')
+const info = document.querySelector('.info')
+let notice = ''
 
 codes[0].focus()
 
 codes.forEach((code, idx) => {
     code.addEventListener('keydown', (e) => {
-        if(e.key >= 0 && e.key <=9) {
+
+        if (e.keyCode == '32') {
+            if (idx != 0) setTimeout(() => codes[idx - 1].focus(), 10)
+        } else if (e.key >= 0 && e.key <= 9) {
             codes[idx].value = ''
-            setTimeout(() => codes[idx + 1].focus(), 10)
-        } else if(e.key === 'Backspace') {
-            setTimeout(() => codes[idx - 1].focus(), 10)
+            if (idx < codes.length - 1) setTimeout(() => codes[idx + 1].focus(), 10)
+        } else {
+            console.log(e.key);
+            //Block input if it's not a number
+            e.preventDefault();
+            info.classList.add('error');
+            info.innerHTML = 'You can only enter numbers!'
+
+            //If you do not clear the timer, holding it down will cause too many timers to start
+            clearTimeout(notice)
+            notice = setTimeout(() => {
+                info.classList.remove('error');
+                info.innerHTML = `'This is design only. We didn't actually send you an email as we don't have your email, right?'`
+            }, 1000)
         }
     })
 })

verify-account-ui/style.css

@@ -65,6 +65,12 @@ body {
   border-radius: 5px;
 }
 
+.error{
+ color:red;
+ line-height: 40px;
+ font-weight: 700;
+}
+
 @media (max-width: 600px) {
   .code-container {
     flex-wrap: wrap;
@@ -75,4 +81,4 @@ body {
     height: 80px;
     max-width: 70px;
   }
-}
+}