See this project deployed on Github!
- Clone or copy this repository
- $ npm install
- $ npm start
- Go to
http://localhost:3000
-
To Test - $ npm test
-
This project was bootstrapped with Create React App.
- Create-React-App Template
- This template is a quick start way to get going on a React App Fast.
- React-sweet-progress
- A React component for creating customized progress bars
- react-fade-in
- Fast way to apply simple animations to form loading
- Jest testing
- Comes pre installed in Create-React-App but is further applied to my Javascript functions.
- Conditional Rendering controls which page of the application is seen.
- More Info: All components are held in displayedFormARR (App.js line 49). After each successful input, state.step is incremented resulting in the next choice from the array.
-
Inputs are constantly updated to the app.js state and validated before advancing.
-
Input is validated through src/js/isInputValid.js.
-
This function recieves the step number as a key which corresponds to a switch logic tree. The second variable is the entire state object so that the function can always be applied universally at any time.
-
Inputs are checked against various Regular Expressions and an invalid entry will limit the user from progressing as well as trigger an alert message assisting them in filling out their form.
- Navigation buttons and form reset buttons are also rendered conditionally based on the current step. Reset only shows up on the final form page.
-
Phone Numbers entry can use formatting to allow characters + ( - ) and later removed in processing before submitting for summary or server post.
-
Animations on hover or input field select could be embelished.
-
Processing should be used to eliminate spaces and bad capilization on string entries.
-
Icons could be used for buttons to enhance UX.
-
Alert message for invalid entry could be replaced by input labels or tips.
-
Button positions can be improved
-
Add Backend Server to recieve entries.
-
Deploy.