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
- Solution URL: https://github.com/AmanGupta1703/Newsletter-Sign-Up
- Live Site URL: https://newsletter-sign-up-rose.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
<main className="main">
{!email ? (
<SignCard error={error} dispatch={dispatch} />
) : (
<SuccessCard email={email} dispatch={dispatch} />
)}
</main>
function reducer(state, action) {
switch (action.type) {
case "user/new_signup":
return { ...state, email: action.payload, error: null };
case "user/no_email":
return { ...state, error: action.payload };
case "user/dismiss":
return { ...state, email: null, error: null };
default:
return state;
}
}
- Website - Newsletter Sign-up Form
- Frontend Mentor - @AmanGupta1703
- Twitter - @thekunalgupta17