diff --git a/src/App.css b/src/App.css
index 4f57b22..498d28c 100644
--- a/src/App.css
+++ b/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;
}
diff --git a/src/App.js b/src/App.js
index 904536e..e1fb133 100644
--- a/src/App.js
+++ b/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 (
@@ -68,10 +74,10 @@ const App = () => {
Annoying Submit Button
{' '}
@@ -81,10 +87,10 @@ const App = () => {
Annoying Submit Button
{' '}
@@ -95,7 +101,7 @@ const App = () => {
{height < 680 ? null : }
- );
-};
+ )
+}
-export default App;
+export default App
diff --git a/src/assets/nope-finger-wag.gif b/src/assets/nope-finger-wag.gif
new file mode 100644
index 0000000..596a6a3
Binary files /dev/null and b/src/assets/nope-finger-wag.gif differ
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 6d04a40..eeed2ce 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -19,28 +19,28 @@ function Footer({ theme }) {