#1Create Form with inputfields and submit button

[Anita77777]

Value Proposition

As a reader I need a Form that cwith input fields:

• Author name
• Booktitle
• Comment

to be able to insert the key details of the book (name, title) and describe in the comment field why I liked or didn't like the book.

Description

Acceptance Criteria

• [x] Input (authors name, title, comment) can be inserted in the respective spaces
• [x] Should the requirements of the input not match the input criteria of the form an error message will occur.
• [x] Furthermore I need a submit button that submits the data of the form an renders a new Card with the information of the form

Tasks

(for developers team)

• [x] Add a new branch "Create-Form"
• [x] Add a new folder _document.js and insert the input from the index.js file in here
• [x] Install storybook
• [x] Add a folder structure for the components below with storybook and test files in each component folder
• [x] Install styled-components
• [x] Create component file for "Form"
• [x] Create the Form with input fields, label, type, height of the input fields
• [x] Add the function for the error message to the Form component
• [x] Create component file for "Submit-Button"
• [x] Create the submit button
• [x] Add features to the submit button that activate the rendering of a Card with the information put previously in the form
• [x] import the button in the component "Create-Form"
• [x] Create Card and add functions that render the Card
• [x] Add basic styling to all components
• [x] Add components to storybook
• [x] Run tests for components

Complexity

L

[anitaschiller]

Hi Anita, I still think that your Acceptance Criteria could be more specific and should be checkboxes like your tasks below (makes it easier for you to mark what has been done already).

The Acceptance Criteria should describe scenarios from the users' view, e.g. "when clicking on the submit button, the data is submitted to ..." or "the input field for author data is labelled by "Author" or "if trying to submit the form with empty input fields, an error message is shown above the form". Those are just some examples but I think its very helpful if you find some more specific bullet points from the start.

And some comments about your tasks:

• I don't really know what Add structure for components means - which components? How should this structure look like? Do you mean the JSX?
• Your component files' names should start with a capital letter --> CreateForm or Form
• I think the tasks that make your form submittable are still missing (you probably need a useState for your form data, you need to implement a submit function)

Let me know if something is unclear and we can go through this together 😊.

[mbosselmann]

Hi Anita, I really like your user story! But I have some remarks:

Value Proposition

• The part "Furthermore I need a submit button that submits the data of the form and renders a Card with the above mentioned topics." is something that you can add under your acceptance criteria as these are necessary to complete the functionality you want to build.

Description

• I like your wireframe, but you do not write anything about a heading yet as it is not necessary for your functionality. Therefore, I would recommend you to make a wireframe without the heading.
• The Card where the data is rendered is also not visible in your wireframe.

Acceptance Criteria

• As @anitaschiller already mentioned, the checkboxes are missing here.
• Currently you mention nothing about the card component you also want to implement

Tasks

• Some tasks seems to be there twice like "Add basic styling" & "Run tests". You should check this and remove the double tasks
• One checkbox is not rendered correctly in your tasks
• I think you want to group your tasks for the components you want to implement, but now it is quite confusing to understand which task belongs to which component. Maybe something just went wrong while you edited the issue.

Complexity

• I'm not sure if size M is enough for this user story as you want to build more a group of components. Maybe L or XL ist a better rating, but that depends on your own opinion. I just wanted to mention that I would chose an other rating. :)

I hope my remarks are helpful! Feel free to ask me if you have further questions.

[Anita77777]

Hi Mareike, thanks for your review. I've added the changes and hope now everything more detailed or maybe I'm now completely lost:-)

[mbosselmann]

Hi Anita, looks good! 👍 Just one question: Will the card be displayed below the form? Your wireframe suggests that you want to build two different screens and I would recommend you to implement this as another feature, because this user story is already really huge. Maybe you can add under your acceptance criteria where the card will be rendered. That's all. ;)

Happy hacking!

[Anita77777]

Change of file name