I am having trouble with my landing page. Could someone please help?

HTML-CSS
1

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 #11: Within the form, there is a submit input with a corresponding id="submit" .

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).

those are the three that I am stuck on.

2

OK, you are stuck, but what have you tried?

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.

I see your nav link elements, but I don’t see to where they are pointing. For each of those hrefs, there should be a corresponding section for each of those. I don’t see some of those.

Also, just in general, I’m having trouble understanding what your page is trying to be. This should be a product landing page - when people go there they see information about a product that you are (pretend) selling.

3

I have tried many things even rewriting the code but I just am not getting it right. I am really confused as to why there is not a corresponding section for each of those hrefs. Maybe I am just overthinking it but I don’t know.

4

I am really confused as to why there is not a corresponding section for each of those hrefs.

<a class="nav-link" href="#sacai fragment blue void">sacai fragment blue void</a>

OK, so you have this nav link. So, it is an anchor targeting an id - that is a step closer than what you had before. But this anchor is targeting an id of “sacai fragment blue void”. So, you would need an element in your page with that id for it to target. If you have an anchor:

<a href="#my-section">My Section</a>

then I would expect to see something like:

<section id="my-section">
  <!-- blah blah blah -->
</section>

somewhere in your code. (It’s doesn’t have to be section but that makes sense here.)

The other issue is that it has to be a valid id. Your id has spaces in it, and that could be problematic. From the MDN docs:

id 's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.

Note: Using characters except ASCII letters, digits, '_' , '-' and '.' may cause compatibility problems, as they weren’t allowed in HTML 4. Though this restriction has been lifted in HTML5, an ID should start with a letter for compatibility.

See if that information helps you get futher.

5

Could you check it out again? I believe I did everything right and that my computer is just not supporting it. I just don’t know what I am getting wrong. Attached is the link to the my landing page.

6

When I press on the red “13/16 Passed” button, I can see the test output. For the first failing test I see:

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

The .nav-link with href=“#sacai-fragment-grey” is not linked to a corresponding element on the page : expected null to not equal null AssertionError: The .nav-link with href=“#sacai-fragment-grey” is not linked to a corresponding element on the page : expected null to not equal null

When I look, I don’t see a section with the id of “sacai-fragment-grey”. I see this:

<section id="sacai-fragment-blue-void"></section>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email">email</input>
    <input button="submit" name="submit" id="submit" type="submit" value="Subscribe"></input>
  </form>
  </section>

So, you have a section with the id of “sacai-fragment-blue-void”. Good. I’m not sure why it is closed with </section> and then again at the bottom, but OK. You need sections for those other two ids. The test is looking for them and can’t find them.

When I add in sections (even empty ones) with the expected ids, then that test passes for me. You have three nav links so I would expect a section to pair up with each of those.

7

I was able to solve that portions of the code but 11 and 12 is still giving me troubles.

8

I definitely appreciate the help as well.

9

When I’m writing these out, I’m also writing out my investigative process. Please learn from that - that is the more valuable lessons. Good coders are good detectives.

When I press the red “14/16 Passed” button and look at the first test failing, I see:

Within the form, there is a submit <input> with corresponding id=“submit”.

#submit should be an <input> element : expected ‘BUTTON’ to equal ‘INPUT’ AssertionError: #submit should be an <input> element : expected ‘BUTTON’ to equal ‘INPUT’

You have a couple of forms going on here, but when I look for the offending code, I see:

<button id="submit">submit</button>

It is saying that that element you should use is input, not button. When I look in the docs I see that this is the form they suggest:

<input type="submit" value="Send Request">

I also see that you did something similar down below:

<input id="submit" type="submit" value="submit input">

That is what is wanted. I think that you can use a button for that, but the user stories specifically say:

User Story #11: Within the form, there is a submit input with a corresponding id="submit" .

When I fix that, that test passes.

Part of being a good dev is paying close attention to tiny details. As a dev, there have been times when I wrote perfectly working code that got rejected because I missed some silly little arbitrary requirement - that’s just part of the job.

Anyway, fix that. Then get out your magnifying glass, your deerstalker cap, and your calabash pipe and see if you can figure out the last failing test. Check back if you get stuck.

A last note - I notice that you had two things with and id of “submit”. But ids must always, always, always be unique. You are never supposed to have two things with the same id.

1 Like
10

mann i’m still stuck. I’ve tried so many different way and none has worked in my favor. I feel as if I am missing something really obvious. I just cant put my put my finger on it.

11

Hi @morifingk !

Take a look at the first failing message.
Inside the form element, I can select an option from a dropdown that has corresponding id=“dropdown”.’
Select should contain at least 2 selectable options

When I look at your code, this is not the correct way to use the select and option tags.

   <select id="dropdown" name="boxers" class="input "></select>
    <option disabled value="select"> Select an option </option>
    <option value="Nike">Sacai Fragment Blue Void </option>
    <option value="Nike">Sacai Fragment Grey</option>
    <option value="Nike">Sacai pine green</option>

Take a look at the docs and see how they are using it correctly and make that change to your code.

Take a look at the second failing test.
The button with id=“submit” is not inside the form element

Take a look at your code and you’ll see there is no submit button.

<form id="survey-form">
    <input for="name" id="name" type="name" required placeholder="enter your name here"></input>
    <label for="name" id="name-label" class="labels"> name: </label>
    <input for="email" id="email" type="email" required placeholder="Enter your email here"></input>
    <label for="email" id="email-label" class="labels"> Email: </label>
    <input id="number" class="input" min="1" max="120" type="number" placeholder="Enter your age here"></input>
    <label for="number" id="number-label" class="labels"> Age: </label>
    <select id="dropdown" name="boxers" class="input "></select>
    <option disabled value="select"> Select an option </option>
    <option value="Nike">Sacai Fragment Blue Void </option>
    <option value="Nike">Sacai Fragment Grey</option>
    <option value="Nike">Sacai pine green</option>
    <fieldset>
      <legend>Would you purchase a Nike Sacai?</legend>
      <input name=”radio” type="radio" value="yes"> Yes</input>
      <input name=”radio” type="radio" value="no"> No</input>
    </fieldset>
    <label>
      <input type="checkbox" name="nike" value="nike">Sacai fragment blue void</input>
      <input type="checkbox" name="nike" value="nike">Sacai fragment grey</input>
      <input type="checkbox" name="nike" value="nike">Sacai pine green</input>
    </label>
    <textarea name=”comments” id=”comments” maxlength=”500“></textarea>
  </form>

You have a submit button in the other form but the test wants it in this form.

Hope that helps!

12

For #12 it still does not work out.

13

Reread through the error message very carefully.

Inside the form element, I can select an option from a dropdown that has corresponding id=“dropdown”.’

If we look at your code there is no id="dropdown" here

 <select id="snkr-select" name="snkrs">

You are using a different id name instead.
You need to fix that to use the correct id name there.

You are also missing a </select>

For the other failing test, #number-label is not defined
Take a close look at your code, because you don’t have a label for the number input with that id they are looking for.

Also as a sidenote, inputs do not have closing tags(</input>)
Please review the documentation for the proper syntax

1 Like
15

I think part of the issue too is that you shouldn’t mix projects together.

Your code has parts of the survey form, tribute page and landing page.
Initially I thought you were working on the survey form, because of the code you had there.
But now I realize, you are trying to finish up the landing page.

I would actually delete this whole survey form because it is just creating issues.

 <form id="survey-form" action="https://www.freecodecamp.com/email-submit">
    <input for="name" id="name" type="name" required placeholder="enter your name here"></input>
    <label for="name" id="name-label" class="labels"> name: </label>
    <input for="email" id="email" type="email" required placeholder="Enter your email here"></input>
    <label for="email" id="email-label" class="labels"> Email: </label>
    <input id="number" class="input" min="1" max="120" type="number" placeholder="Enter your age here">
      <input id="submit" type="submit" value="submit">
<button id="submit">submit</button>
    </input>
    <label for="snkr-select"> Choose a Snkr: </label>
    <select id="snkr-select" name="snkrs">
    <option value=" ">--Select an option--</option>
    <option value="Sacai Fragment Blue Void">Sacai Fragment Blue Void</option>
    <option value="Sacai Fragment Grey">Sacai Fragment Grey</option>
    <option value="Sacai Pine Green">Sacai Pine Green</option>
    <fieldset>
      <legend>Would you purchase a Nike Sacai?</legend>
      <input name=”radio” type="radio" value="yes"> Yes</input>
      <input name=”radio” type="radio" value="no"> No</input>
    </fieldset>
    <label>
      <input type="checkbox" name="nike" value="nike">Sacai fragment blue void</input>
      <input type="checkbox" name="nike" value="nike">Sacai fragment grey</input>
      <input type="checkbox" name="nike" value="nike">Sacai pine green</input>
    </label>
    <textarea name=”comments” id=”comments” maxlength=”500“></textarea>
  </form>

Only having code for one project will drastically help you find and fix errors and create cleaner simpler code.

For user story 12 of the landing page, the issue is here

  <form id="form"> 
    <label for="email">
    <input type="email" id="email" name="email" placeholder="Enter your email">
     <form action="https://www.freecodecamp.com/email-submit">
    <input id="submit" type="submit" value="submit">
      </form>

You have a form nested inside of a form.
You can’t do that.
Get rid of the second opening form tag and move the action attribute here

<form id="form" action attribute goes here>

When I clean all of that up then it passes.
Screen Shot 2021-11-19 at 9.40.47 AM

Hope that clears it up

16

I really appreciate the help. I thought the whole time that project were able to be piled on top of each other.

1 Like
17

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