React: OTP - refactor

sadanandpai · Nov 2, 2023 · 57e1949 · 57e1949
1 parent 2d36bc8
commit 57e1949
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 36 deletions.
diff --git a/react/src/helpers/challenges.ts b/react/src/helpers/challenges.ts
@@ -381,6 +381,17 @@ export const challenges = new Map<string, Challenge>([
       isNew: true,
     },
   ],
+  [
+    'otp',
+    {
+      title: 'OTP',
+      link: 'otp',
+      difficulty: 'medium',
+      developer: 'rishabhm05',
+      tags: [],
+      isNew: true,
+    },
+  ],
   [
     'match-pair',
     {
@@ -434,15 +445,4 @@ export const challenges = new Map<string, Challenge>([
       tags: [],
     },
   ],
-  [
-    'otp',
-    {
-      title: 'OTP',
-      link: 'otp',
-      difficulty: 'medium',
-      developer: 'rishabhm05',
-      tags: [],
-      isNew: true,
-    },
-  ],
 ]);
diff --git a/react/src/machine-coding/otp/App.jsx b/react/src/machine-coding/otp/App.jsx
@@ -1,8 +1,11 @@
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
+
 import styles from './otp.module.css';
+
 const App = () => {
-  let [otpfields, setOtpFields] = useState(Array(4).fill(''));
+  let [otpfields, setOtpFields] = useState(Array(6).fill(''));
   let otpinputref = useRef([]);
+
   const handleOtp = (e, index) => {
     const numericValue = e.target.value.replace(/[^0-9]/g, '');
     const singleDigitValue = numericValue.slice(0, 1);
@@ -13,6 +16,7 @@ const App = () => {
     }
     setOtpFields(copyotpfields);
   };
+
   const handleKeyDown = (e, index) => {
     if (e.key === 'Backspace') {
       e.preventDefault();
@@ -28,6 +32,7 @@ const App = () => {
       otpinputref.current[index - 1].focus();
     }
   };
+
   const handlePaste = (e) => {
     e.preventDefault();
     const pastedData = e.clipboardData.getData('text');
@@ -43,26 +48,25 @@ const App = () => {
       setOtpFields(copyotpfields);
     }
   };
+
   return (
-    <>
-      <div className={styles.otpFields}>
-        <div className={styles.otpinput}>
-          {otpfields.map((_, index) => {
-            return (
-              <input
-                key={index}
-                onKeyDown={(e) => handleKeyDown(e, index)}
-                onPaste={handlePaste}
-                ref={(el) => (otpinputref.current[index] = el)}
-                onChange={(e) => handleOtp(e, index)}
-                value={otpfields[index]}
-                type="number"
-              />
-            );
-          })}
-        </div>
+    <div className={styles.otpFields}>
+      <div className={styles.otpinput}>
+        {otpfields.map((_, index) => {
+          return (
+            <input
+              key={index}
+              onKeyDown={(e) => handleKeyDown(e, index)}
+              onPaste={handlePaste}
+              ref={(el) => (otpinputref.current[index] = el)}
+              onChange={(e) => handleOtp(e, index)}
+              value={otpfields[index]}
+              type="number"
+            />
+          );
+        })}
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/react/src/machine-coding/otp/otp.module.css b/react/src/machine-coding/otp/otp.module.css
@@ -1,15 +1,15 @@
 .otpFields {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
-
   margin: auto;
 }
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
   margin: 0;
+  appearance: none;
 }
 
 .otpinput {
@@ -18,10 +18,10 @@ input::-webkit-inner-spin-button {
   align-items: center;
   justify-content: center;
 }
+
 .otpinput input {
   width: 3rem;
   height: 3rem;
   text-align: center;
-
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 0, 0, 30%);
 }