A simple 3 component drag and drop form builder
FEATURES:
- The project involves adding 3 components, viz. input, label and button to a page.
- On selecting a component and clicking enter key, edit option modal opens -- The x & y location of the input/label/button can be changed from the modal. -- The placeholder for the input can be changed from the modal. -- The label text can be changed from the modal. -- The button text can be changed from the modal.
- On selecting a component and clicking delete key, the component gets deleted.
- In the right sidebar, 3 buttons are provided. On clicking these buttons, respective components get added to the screen.
PENDING ITEMS:
- The items from the sidebar need to be made draggable, and should not be buttons.
- Code needs to be refactored since there is considerable repetition for styling.
- The label used is also a button, which needs to be changed to text, but, for doing this, will need to use state management for adding/removing border on selecting.
- Need to add features for fontSize and fontWeight.
Commands:
- Installing
yarn install
Use this command to install packages.
- Running in dev mode
npm start
Use this command to start the project on port 3000 in development mode