A coding exercise with the goal of creating a basic UI component using React to simulate a Newsletter Sign Up with multiple states.
- Must use either React JS to complete the project
- Must build and run in either a web browser
- Must include a Readme file for instructions for running the application
- May use third party libraries to complete this task
- Organize your component in a way that shows you have a good understanding of react architectural principles and reuse.
- The component will have 4 responsive breakpoints as shown in figma file:
- Mobile
- Tablet Portrait
- Tablet Landscape
- Desktop
- The component will have 5 states:
- Email Address collection
- Email Address collection with Error Message
- Full Name collection
- Full Name collection with Error Message
- Congratulations!
- Form validation will be as follows:
- Email Address field: Required and must be valid email
- First Name field: Required
- Last Name field: Required
- Component will not change states while invalid fields exist
- Form will not actually POST anywhere. Just console log the object that holds {email, first, last } values and toggle to ‘congratulations’ state.
- Navigate to project directory
- Run command in terminal:
npm run webpack
- In separate terminal, run the command:
open index.html