This project was bootstrapped with Create React App.
- There will be an Edit Order page with two forms.
- The First form will have two sub forms one for BILLING ADDRESS and second for SHIPPING ADDRESS.
- The Address for billing and shipping address will be pre populated along with the Order and Expected Delivery Date using
address.jsonfile. - Apart from the ADDRESS LINE 2 no fields can be left blank in any of the subforms of the first section.
- The Expected Delivery Date will never be less than the Order Date.
- You can try that select Expected Delivery Date and try selecting an Order Date which is earlier than the Expected Delivery Date. It'll automatically update the Expected Delivery Date to Order Date.
- There is also a second form which allows you add various product.
- Since in the mockup there were inputs for Unit Price and Product Name I'm assuming it'll going to be a product listing input rather than an ordering input.
- You can click on the Add Product button and a new table entry will appear with some default entries and some blank.
- As asked only notes text area will going to optional, all the other fields are required.
- The ID is going to be auto generated by itself. (There will be very small chance of IDs being clashed exactly once in 3 million. I'm assuming it to be fair enough for this example).
- You can click on the DELETE button in front of the product to delete that entry from the table.
- And finally if you click on the SAVE button it will log all the data in the console.
- Use
git cloneor download the zip. - If you've downloaded the zip extract it.
cdinto the repository.- Run
npm installoryarn(if you're using it) - Run
npm startoryarn start(Again if you're using it) - A browser window will automatically open & in case if it didn't open your favourite browser and go to : http://localhost:3000.
- React.js my choice of front end framework for almost all projects.
- SASS Syntactically Awesome.
- Where is REDUX ? you might be asking but to be honest I didn't felt the need of using REDUX in this project.