This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Add their email and submit the form
- See a success message with their email after successfully submitting the form
- See form validation messages if:
- The field is left empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Styled Components - For styles
Note: These are just examples. Delete this note and replace the list above with your own choices
I didn't learn anything new but it was good practice to reinforce old knowledge Proud of a clean components tree
<NewsLetterLayout>
<div class={styles.contentLayout}>
{!showingSuccess && (
<div className={styles.mainPage}>
{pageWidth > 770 && (
<DesktopView
email={email}
setEmail={setEmail}
styles={styles}
showingSuccess={showingSuccess}
setShowingSuccess={setShowingSuccess}
/>
)}
{pageWidth <= 770 && (
<MobileView
email={email}
setEmail={setEmail}
styles={styles}
showingSuccess={showingSuccess}
setShowingSuccess={setShowingSuccess}
/>
)}
</div>
)}
{showingSuccess && (
<div className={styles.successPage}>
{pageWidth > 770 && (
<DesktopSuccessView
email={email}
setEmail={setEmail}
styles={styles}
isMobile={pageWidth <= 770}
setShowingSuccess={setShowingSuccess}
/>
)}
{pageWidth <= 770 && (
<MobileSuccessView
email={email}
setEmail={setEmail}
styles={styles}
isMobile={pageWidth <= 770}
setShowingSuccess={setShowingSuccess}
/>
)}
</div>
)}
</div>
</NewsLetterLayout>- Adding a node.js server to send emails
- Adding authentication pages
- Adding robots verification challenge
- Upmostly - React onHover Event Handling (with Examples).
- MDN Web Docs - Viewport meta tag.
- Amit Merchant - Gradient-y Box Shadows in CSS
- CSS Gradient
- Website Inioluwa
- Frontend Mentor - @inioluwabello
- Twitter - @DavidInioluwaB