cmcohen89 / practice-for-prepwork-html-forms-debugging

Debugging HTML Forms Practice

In this practice you will be debugging the provided HTML Form.

Your main focus is to practice identifying and debugging the HTML form. There are some errors that are obvious while others take more attention. You will also use Cypress testing to check your work.

Phase 0: Setup

Once you have downloaded the starter, cd into the project directory and run npm install to install the cypress tests. To run tests, use the command npm test. If everything is set up correctly, the first test, checking the title of the project, should already pass based on the code provided in the starter.

Phase 1: Debug the HTML Form

Once you have set up and tried out the Cypress tests, open the index.html file in your browser. Complete the task described in each phase below, and run npm test to check your solution after each phase.

Phase 2: Add Last Name

1. The last name field is broken and is not rendering properly. Please fix it.

• Hint: should be similar to the first name <div>

Phase 3: Adding values

The <select> element has a broken dropdown with the following three values:

1. admin
2. user
3. guest

However, upon further inspection the values are not being shown. Debug the issue.

Phase 4: Debug the Bio

1. Instead of the bio element having two input fields change it to be able to take in a text box that allows multiple lines of text.

After you have passed all of the tests, delete your node modules folder, zip up your project, and submit it using the green submit button below.