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: Solution URL
- Live Site URL: Live Site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- Typescript - Javascript with syntax for types
- Next.js - React framework
- Styled Components - For styles
- React Hook Form - For form inputs
- Yup - For form validation
- I learned how to incorporate yup for form validation.
- How to make a reusable button component
- How to style a reusable component with styled components.
<h1>Some HTML code I'm proud of</h1>
`${({ error }) =>
error &&
`
border: 1px solid #FF6155;
background: rgba(255,97,85,.2);
color: #ff6155;
`}``
useEffect(() => {
const handleWindowResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleWindowResize);
handleWindowResize();
return () => window.removeEventListener('resize', handleWindowResize);
}, []);
I am not fully convinced with the way layout adjust to different screen sizes. Especially with smaller screen sizes. In future project I want to investigate a better way of doing it.
- Frontend Mentor - @csoumya14
- Twitter - @Soumya_coder