Survey Form with testable user stories - Guinea Pigs needed šŸ¹

1

As you may have heard, @no-stack-dub-sack, @Weezlo, and @paycoguy have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.

The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and donā€™t worry - weā€™ll still have plenty of optional projects where we donā€™t provide you with any tests. And if youā€™ve previously built these projects, you donā€™t need to build them again.

If youā€™re interested in attempting this, please reply to the thread and let us know youā€™ve started it. The more people who want to build this, the better, as we can start gathering feedback.

Thanks, and happy coding!

Here is the blank pen for campers to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO

Here is the example project with passing tests: http://codepen.io/freeCodeCamp/pen/VPaoNP

Here are the user stories for campers to reference:

  1. I can see a title with id="title" in H1 sized text.
  2. I can see a short explanation with id="description" in P sized text.
  3. I am required to enter my name in a field with id="name".
  4. I am required to enter an email in a field with id="email".
  5. If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
  6. I can enter a number in a field with id="number".
  7. If I enter non-numbers in a number field, I will see an HTML5 validation error.
  8. If I enter numbers outside the range of the number field, I will see an HTML5 validation error.
  9. For the name, email, and number input fields, I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label".
  10. For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.
  11. I can select an option from a dropdown.
  12. I can select a field from a series of radio buttons.
  13. I can select several fields from a series of checkboxes.
  14. I am presented with a <textarea> at the end for additional comments.
2

Iā€™m happy to work on that - itā€™s just that I might be kept away from my computer for a couple of days - preparing for Xmas, celebrating Xmas, recovering from Xmas.

1 Like
3

Just made it. Following the user stories one by one works great. Havenā€™t used forms that much, so took slighly more time than I expected.

CodePen: https://codepen.io/benjaminvanzwienen/full/JbqKMw

4

Iā€™ve completed and didnā€™t see any issues. Even with being interrupted and sidetracked, I was able to come back and follow where I left off.

CodePen: https://codepen.io/renestl/full/gLJMEM/

5

Thanks @BenGitter & @Renestl, glad the tests worked for you guys. Note that the project has undergone major changes since this OP and the links loading the test suites may be very different now. Iā€™ve updated the OP with new links that will provide a better experience.

6

I am going to start working on the Survey Form

7

Just worked through the user stories without any issues. Only did just what was needed to meet the stories for now and will go back and figure out some questions and style it.

If thereā€™s a way to include a user story for the submit button, even if it doesnā€™t do anything, that might be good. If someoneā€™s going test by test for the content portion, they may not actually include one.

Codepen: http://codepen.io/chznbaum/pen/VPbWZL

1 Like
8

@chznbaum hey, thatā€™s a pretty solid call - feel like opening an issue on the repo? https://github.com/freeCodeCamp/testable-projects-fcc/issues

1 Like
9

Completed and passed all the tests. The design is also responsive.

CodePen: http://codepen.io/x_navid/full/mRpRqv/

10

@xNavid Nicely done! Thanks for sharing!

1 Like
11

Thanks for your feedback so far, everyone!

Iā€™m thrilled to announce that our testable challenges now feature a link you can click to report a bug or submit feedback.

Iā€™m closing this topic. We can continue discussing specific issues as they come up over on the testable-projects-fcc repo. Happy coding and QAā€™ing! :slight_smile: