Issue 251: Nope Finger Gif On Invalid Submit

src/App.css

@@ -197,12 +197,13 @@ body {
 
 .blue-theme {
   color: rgb(45, 43, 43);
-  background-color: #1370a3;
+  background-color: #7bc4eb;
   transition: 0.5s ease-in-out;
 }
+
 .yellow-theme {
   color: rgb(29, 28, 28);
-  background-color: #d29117;
+  background-color: #f5d59a;
   transition: 0.5s ease-in-out;
 }
 

src/App.js

@@ -3,40 +3,41 @@ import './App.css'
 import Footer from './components/Footer'
 import ThemeButton from './components/ThemeButton'
 import useWindowDimensions from './custom-hooks/useWindowDimensions'
-// ...
+import nopeGif from './assets/nope-finger-wag.gif'
 
-const App = () => {
-  // ... (existing code)
+const minPasswordLength = 6
 
-  const handleFormSubmit = async (e) => {
-    e.preventDefault();
-    setShowToast(false);
+const validateEmail = (email) => {
+  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return re.test(String(email).toLowerCase())
+}
 
-    if (
-      form.password.length < minPasswordLength ||
-      !validateEmail(form.email)
-    ) {
-      setToggleClass((prevState) => !prevState);
-      setShowToast(true);
-      setTimeout(() => {
-        setShowToast(false);
-      }, 1000);
-    } else {
-      // Form is valid, submit the form to the server or take necessary action.
-      try {
-        const response = await fetch('https://formspree.io/f/xqkjbjzw', {
-          method: 'POST',
-          body: JSON.stringify(form),
-        });
+function App() {
+  const { height, width } = useWindowDimensions()
+  const [form, setForm] = useState({ email: '', password: '' })
+  const [toggleClass, setToggleClass] = useState(false)
+  const [isPasswordShown, setPasswordShown] = useState(false)
+  const [showToast, setShowToast] = useState(false)
+  const [emojiState, setEmojiState] = useState('em em-rolling_on_the_floor_laughing')
+  const [showGif, setShowGif] = useState(false)
+  const [themeState, setThemeState] = useState(localStorage.getItem('theme') || 'bright')
+
+  const handleForm = (e) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value,
+    })
+  }
 
-        if (response.ok) {
-          // Handle a successful submission, e.g., redirect the user.
-        } else {
-          // Handle errors from the server.
-        }
-      } catch (error) {
-        // Handle network or other errors.
-      }
+  // Annoying button function
+  const annoyingSubmitButton = () => {
+    if (form.password.length < minPasswordLength
+      || !validateEmail(form.email)) {
+      setShowGif(true)
+      setToggleClass((prevState) => !prevState)
+      setTimeout(() => {
+        setShowGif(false)
+      }, 2000)
     }
   }
 
@@ -47,7 +48,7 @@ const App = () => {
       setShowToast(true)
       setTimeout(() => {
         setShowToast(false)
-      }, 1000)
+      }, 2000)
     } else {
       // call the API here o whatever action you need to do
     }
@@ -57,6 +58,11 @@ const App = () => {
     localStorage.setItem('theme', themeState)
   }, [themeState])
 
+  useEffect(() => {
+    if (width < 600) setEmojiState('em em-flushed')
+    else setEmojiState('em em-rolling_on_the_floor_laughing')
+  }, [width])
+
   return (
     <div className="wrapper">
       <ThemeButton setThemeState={setThemeState} themeState={themeState} />
@@ -68,10 +74,10 @@ const App = () => {
                 <span className="hover">Annoying Submit Button</span>
                 {' '}
                 <span
-                  className={`${emojiState} ${form.password.length < minPasswordLength
+                  className={`${form.password.length < minPasswordLength
                     || !validateEmail(form.email)
                     ? 'em em-rage'
-                    : 'em em-smile'
+                    : `${emojiState} em em-smile`
                   }`}
                   style={{ height: 20 }}
                 />
@@ -81,10 +87,10 @@ const App = () => {
                 <span className="hover">Annoying Submit Button</span>
                 {' '}
                 <span
-                  className={`${emojiState} ${form.password.length < minPasswordLength
+                  className={`${form.password.length < minPasswordLength
                     || !validateEmail(form.email)
                     ? 'em em-rage'
-                    : 'em em-face_with_hand_over_mouth'
+                    : `${emojiState} em em-face_with_hand_over_mouth`
                   }`}
                   style={{ height: 20 }}
                 />
@@ -95,7 +101,7 @@ const App = () => {
         </div>
 
         <form
-          autoComplete="false"
+          autoComplete="off"
           action="https://formspree.io/f/xqkjbjzw"
           method="POST"
           onChange={handleForm}
@@ -114,7 +120,7 @@ const App = () => {
               id="email"
               type="email"
               name="email"
-              defaultValue={form.email}
+              value={form.email}
               placeholder="Email"
               tabIndex={1}
               required
@@ -140,7 +146,7 @@ const App = () => {
                 id="password"
                 type={isPasswordShown ? 'text' : 'password'}
                 name="password"
-                defaultValue={form.password}
+                value={form.password}
                 minLength="6"
                 tabIndex={2}
                 required
@@ -185,16 +191,41 @@ const App = () => {
             </button>
           </div>
           <div
-            className={`toast ${showToast ? 'fadeIn' : 'fadeOut'
-            } ${themeState}-theme-toast`}
+            className={`toast ${showToast ? 'fadeIn' : 'fadeOut'} ${themeState}-theme-toast`}
           >
             You cannot submit until you fix all the validation errors...
           </div>
+          <img
+            src={nopeGif}
+            alt="Nope finger wag gif"
+            style={{
+              display: 'block',
+              margin: '20px auto 0',
+              width: '150px',
+              visibility: showGif ? 'visible' : 'hidden',
+            }}
+          />
+          <div
+            style={{
+              visibility: showGif ? 'visible' : 'hidden',
+              textAlign: 'center',
+              fontSize: '1rem',
+              marginTop: '5px',
+            }}
+          >
+            <a href="https://tenor.com/view/nope-finger-wag-no-way-no-absolutely-not-gif-14388135" target="_blank" rel="noopener noreferrer">
+              Nope Finger Wag Sticker
+            </a>
+            {' from '}
+            <a href="https://tenor.com/search/nope-stickers" target="_blank" rel="noopener noreferrer">
+              Nope Stickers
+            </a>
+          </div>
         </form>
       </section>
       {height < 680 ? null : <Footer theme={themeState} />}
     </div>
-  );
-};
+  )
+}
 
-export default App;
+export default App

src/components/Footer/Footer.jsx

@@ -19,28 +19,28 @@ function Footer({ theme }) {
         <div className="footer-menu">
           <ul className="socials">
             <li>
-              <a href="https://www.facebook.com/fineanmol" target="_blank">
-                <i className="fa fa-facebook" />
+              <a href="https://www.facebook.com/fineanmol" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
+                <i className="fa fa-facebook" aria-label="Facebook Icon" />
               </a>
             </li>
             <li>
-              <a href="https://www.linkedin.com/in/fineanmol/" target="_blank">
-                <i className="fa fa-linkedin-square" />
+              <a href="https://www.linkedin.com/in/fineanmol/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+                <i className="fa fa-linkedin-square" aria-label="LinkedIn Icon" />
               </a>
             </li>
             <li>
-              <a href="https://www.instagram.com/fineanmol" target="_blank">
-                <i className="fa fa-instagram" />
+              <a href="https://www.instagram.com/fineanmol" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+                <i className="fa fa-instagram" aria-label="Instagram Icon" />
               </a>
             </li>
             <li>
-              <a href="https://twitter.com/fineanmol" target="_blank">
-                <i className="fa fa-twitter" />
+              <a href="https://twitter.com/fineanmol" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
+                <i className="fa fa-twitter" aria-label="Twitter Icon" />
               </a>
             </li>
             <li>
-              <a href="https://github.com/fineanmol" target="_blank">
-                <i className="fa fa-github" />
+              <a href="https://github.com/fineanmol" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+                <i className="fa fa-github" aria-label="GitHub Icon" />
               </a>
             </li>
           </ul>
@@ -49,15 +49,17 @@ function Footer({ theme }) {
           This Project is participating in
           {' '}
           <b>
-            <a href="https://hacktoberfest.com/" id="hf-theme" target="_blank">
+            <a href="https://hacktoberfest.com/" id="hf-theme" target="_blank" rel="noopener noreferrer">
               Hacktoberfest
             </a>
           </b>
           {' '}
           <br />
-          Copyright &copy;
-          {`${year}`}
-          .
+          <a href="https://github.com/fineanmol/Annoying-submit-button/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
+            Copyright &copy;
+            {`${year}`}
+            .
+          </a>
         </p>
       </div>
     </footer>