Help/Advice 'Product Landing Page"

Tell us what’s happening:
Describe your issue in detail here.
Hello All,

I have coming up with errors on the following 3 User Story’s:

User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).

<input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit">

User Story #13: The navbar should always be at the top of the viewport.

Also, the video I am trying to put in the page is not showing up. Let me know where I am going wrong here:

<p> What your life will be like after buying a shirt from Dan Flashes:
  <video id="video">
    <source src="https://youtu.be/6Whgn_iE5uc">
    </video>
  </p>

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36

Challenge: Build a Product Landing Page

@jborms210, 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.

The first failing message says

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.'
Each .nav-link element should have an href attribute : expected false to equal true
AssertionError: Each .nav-link element should have an href attribute : expected false to equal true

here is a piece of your nav

<li class="nav-link"><a href="#shirt-one">$500</a></li>
<li class="nav-link"><a href="#shirt-two">$1000</a></li>
<li class="nav-link"><a href="#shirt-three">$2000</a></li>

as you can see, li is the .nav-link. You cannot have an href attribute there so maybe look at putting that class elsewhere.

The second failing test says

When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
The #form should have an action attribute : expected false to equal true
AssertionError: The #form should have an action attribute : expected false to equal true

Reading the full message do you understand what the test is looking for and why it is failing?

I’ll let you continue with the rest.

1 Like

Hi Roma,

Thanks for the help. I moved the class inside the <a> to correct that error. Still working the #submit issue.

I am still struggling to find a solution for User Story 12 and User Story 13.

For User Story 12, The error message says I need an action attribute but I think I have one in there.

For User Story 13, I am lost. I am not sure how to make the nav-bar to stay at the top of the page, even while scrolling down.

The full failing message says

When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
The #form should have an action attribute : expected false to equal true
AssertionError: The #form should have an action attribute : expected false to equal true

here is your code

<form id="form">
  <p> <label id="email-label">Enter Your Email for Exclusive Dan Flashes offers</label></p>
  <input id="email" type="email" placeholder="enter your email" required>
  <input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit">
  </form>

Where is #form's action attribute?

The next full failing message says

The navbar should always be at the top of the viewport.
#header or one of its children should be at the top of the viewport even after scrolling : expected 326.125 to be close to 0 +/- 15
AssertionError: #header or one of its children should be at the top of the viewport even after scrolling : expected 326.125 to be close to 0 +/- 15

You have nothing in CSS that positions the navbar.

I think I got the US 12 figured out. I am still struggling on what code to use to make the navbar stay at the top of the viewport even while scrolling. Do I have to wrap the entire code in a CSS Flexbox or a CSS Grid?

From my previous post. Read the entire failing message.
My response of You have nothing in CSS that positions the navbar. was a hint to give you something to search.
I don’t see what you’ve tried to position your header to the top.

hi! As it is asking you to make the nav-bar stay on top of viewport even while scrolling, you should make position: fixed and i guess top:0 and left:0 with 100% width will work. Try using this on CSS. :point_down:

#nav-bar{
position: fixed;
top: 0;
 left:0;
  width: 100%;}

Hope this helps!

1 Like

Hi @swipey and @jborms210 !

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you @Roma @swipey ! I got it figured out: https://codepen.io/borms22/pen/NWjXgmG

I was hoping you’d figure it out before someone gave you the answer.
Good job for getting the test to pass.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.