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/aldoraya/newsletter-sign-u
- Live Site URL: https://newsletter-aldoraya.vercel.app
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Emailjs - For send email
- React - JS library
- Tailwind CSS](https://styled-components.com/) - For styles
add style to email validation :
const style = (emailValid) => {
if (emailValid) {
return {
width: "100%",
backgroundColor: "#e6ffeb",
color: "#42ba96",
borderColor: "#42ba96",
};
} else if (emailValid == "") {
return {
width: "100%",
backgroundColor: "white",
color: "black",
borderColor: "#9294a0",
};
} else {
return {
width: "100%",
backgroundColor: "#fff3f5",
color: "red",
borderColor: "#d32f2f",
}
- https://www.emailjs.com/ - It helps me to Send Emails Directly, serverless. so highly recommended for beginners.
- https://learnetto.com/blog/react-form-validation - This is an excellent article that helped me create simple email validation.
- Frontend Mentor - @aldo110
- Instagram - @aldoraya_