Thanks to visit codestin.com
Credit goes to github.com

Skip to content

ishancoder/edit-order

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project was bootstrapped with Create React App.

What i've implemented ?

  1. There will be an Edit Order page with two forms.
  2. The First form will have two sub forms one for BILLING ADDRESS and second for SHIPPING ADDRESS.
  3. The Address for billing and shipping address will be pre populated along with the Order and Expected Delivery Date using address.json file.
  4. Apart from the ADDRESS LINE 2 no fields can be left blank in any of the subforms of the first section.
  5. The Expected Delivery Date will never be less than the Order Date.
  6. 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.
  7. There is also a second form which allows you add various product.
  8. 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.
  9. You can click on the Add Product button and a new table entry will appear with some default entries and some blank.
  10. As asked only notes text area will going to optional, all the other fields are required.
  11. 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).
  12. You can click on the DELETE button in front of the product to delete that entry from the table.
  13. And finally if you click on the SAVE button it will log all the data in the console.

How to get this thing working ?

  1. Use git clone or download the zip.
  2. If you've downloaded the zip extract it.
  3. cd into the repository.
  4. Run npm install or yarn (if you're using it)
  5. Run npm start or yarn start (Again if you're using it)
  6. A browser window will automatically open & in case if it didn't open your favourite browser and go to : http://localhost:3000.

What did I use to build it ?

  1. React.js my choice of front end framework for almost all projects.
  2. SASS Syntactically Awesome.
  3. Where is REDUX ? you might be asking but to be honest I didn't felt the need of using REDUX in this project.

About

A Front end representation of edit order page

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published