Having problems with user story #6

Im having problems with my user story #6 on the landing page. i have put an embedded video on the site just unsure why it keeps failing the test. im not seeing what im doing wrong. any help would be greatly appreciated.
TIA
William8

@William8, we have to guess if you don’t provide a link to your pen.

To help you troubleshoot on your own,
When a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

A Pen by William Pitts` (codepen.io)
sorry guys i forgot about the link

Something to revisit;
an id must be unique within the document

Edit;
On a side note, you have some errors in your code. To help you can switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

1 Like

so everything high-lighted is an error? and thank you!

Yes. For instance this </img> is not a valid HTML as the img tag is self-closing.

Understand that doing this will just help with some of your typo’s. If you want to check for the correct syntax you can run your HTML code through the W3C validator.

Glad to have helped.

A Pen by William Pitts` (codepen.io)
i did what you said and fixed said errors. can you have a look and confirm?

im not sure how to comprehend the error messages im getting. can you help me to understand ?

That looks better @William8.

Just get rid of that duplicate id and you’ll pass the test re: the video

Which error messages? From running the test? Which one don’t you understand?

thank you. i did get rid of the duplicate id and i passed for the video part…now onto another task

yes from running the test. i dont understand any of them

Okay, the next failing message says

Within the form, there is an <input> field with id="email" where I can enter an email address.
#email should be an <input> element : expected 'SECTION' to equal 'INPUT'
AssertionError: #email should be an <input> element : expected 'SECTION' to equal 'INPUT'

Looking at your code I see another duplicate id.
Now the test is doing exactly what it’s told. It’s finding the first instance of id="email" and it expects it to be in and input element. Instead, it’s finding it in a section element.
It’s not smart enough to look further and see that you have id="email" in an input element because it’s not valid to have a duplicate id.

The next failing message says

The #email input field should have placeholder text to let the user know what the field is for.
The #email input field does not have placeholder text : expected false to equal true
AssertionError: The #email input field does not have placeholder text : expected false to equal true

Do you understand what this test is looking for and why it’s failing?
The second and third lines tell you.

The next failing message says

The #email input field uses HTML5 validation to confirm that the entered text is an email address.
The #email input element should use HTML5 validation : expected undefined to equal 'email'
AssertionError: The #email input element should use HTML5 validation : expected undefined to equal 'email'

This is also telling you what it’s expecting and why it’s failing.
Hint, you learned to do this when you built the survey form.

To make it easier use the W3C validator I linked to earlier and clean up the syntax errors in your code and then run the tests.

Thanks to all of your help i passed!

Glad to have helped.

Hope you gained some insight into how to read and interpret the failing messages.

1 Like

i now have a better understanding on how to read the error messages and now i know how to fix them thanks to your help

2 Likes