From 3962ac9e08a04af0f2f2da55652355557d155110 Mon Sep 17 00:00:00 2001 From: Amy Weitzman Date: Sun, 12 Oct 2025 16:10:00 -0400 Subject: [PATCH 1/4] fix blue and yellow themes --- src/App.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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; } From fc73b7ec7abf239a286e0251012431cca43e1c13 Mon Sep 17 00:00:00 2001 From: Amy Weitzman Date: Sun, 12 Oct 2025 16:18:17 -0400 Subject: [PATCH 2/4] fix linting errors --- src/App.js | 82 ++++++++++++++++---------------- src/components/Footer/Footer.jsx | 22 ++++----- 2 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/App.js b/src/App.js index 904536e..6d419a9 100644 --- a/src/App.js +++ b/src/App.js @@ -3,40 +3,35 @@ import './App.css' import Footer from './components/Footer' import ThemeButton from './components/ThemeButton' import useWindowDimensions from './custom-hooks/useWindowDimensions' -// ... -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 [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)) { + setToggleClass((prevState) => !prevState) } } @@ -47,7 +42,7 @@ const App = () => { setShowToast(true) setTimeout(() => { setShowToast(false) - }, 1000) + }, 2000) } else { // call the API here o whatever action you need to do } @@ -57,6 +52,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 +68,10 @@ const App = () => { Annoying Submit Button {' '} @@ -81,10 +81,10 @@ const App = () => { Annoying Submit Button {' '} @@ -95,7 +95,7 @@ const App = () => {
{ id="email" type="email" name="email" - defaultValue={form.email} + value={form.email} placeholder="Email" tabIndex={1} required @@ -140,7 +140,7 @@ const App = () => { id="password" type={isPasswordShown ? 'text' : 'password'} name="password" - defaultValue={form.password} + value={form.password} minLength="6" tabIndex={2} required @@ -194,7 +194,7 @@ const App = () => { {height < 680 ? null :
} - ); -}; + ) +} -export default App; +export default App diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 6d04a40..b9a4c71 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -19,28 +19,28 @@ function Footer({ theme }) {
@@ -49,7 +49,7 @@ function Footer({ theme }) { This Project is participating in {' '} - + Hacktoberfest From 99a9b55859dcc31c15f47b1eda3426fe5c4faa42 Mon Sep 17 00:00:00 2001 From: Amy Weitzman Date: Sun, 12 Oct 2025 16:37:57 -0400 Subject: [PATCH 3/4] link copyright text to the copyright license --- src/components/Footer/Footer.css | 5 +++++ src/components/Footer/Footer.jsx | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 55e1790..78e8468 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -189,6 +189,11 @@ footer { transition: margin-top 0.3s ease-in-out; } +#footer-text a:not(#hf-theme) { + color: inherit; + text-decoration: none; +} + @keyframes gradientAnimation { from { background-position: 0 0; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index b9a4c71..eeed2ce 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -55,9 +55,11 @@ function Footer({ theme }) { {' '}
- Copyright © - {`${year}`} - . + + Copyright © + {`${year}`} + . +

From c291328896276759a51031135ec460a950f0107b Mon Sep 17 00:00:00 2001 From: Amy Weitzman Date: Sun, 12 Oct 2025 17:03:32 -0400 Subject: [PATCH 4/4] show nope finger gif on invalid submit --- src/App.js | 35 +++++++++++++++++++++++++++++-- src/assets/nope-finger-wag.gif | Bin 0 -> 110541 bytes src/components/Footer/Footer.css | 5 ----- 3 files changed, 33 insertions(+), 7 deletions(-) create mode 100644 src/assets/nope-finger-wag.gif diff --git a/src/App.js b/src/App.js index 6d419a9..e1fb133 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ 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 minPasswordLength = 6 @@ -18,6 +19,7 @@ function App() { 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) => { @@ -31,7 +33,11 @@ function App() { const annoyingSubmitButton = () => { if (form.password.length < minPasswordLength || !validateEmail(form.email)) { + setShowGif(true) setToggleClass((prevState) => !prevState) + setTimeout(() => { + setShowGif(false) + }, 2000) } } @@ -185,11 +191,36 @@ function App() {
You cannot submit until you fix all the validation errors...
+ Nope finger wag gif + {height < 680 ? null :