Landing Page Tests failed

HTML-CSS
1

Tell us what’s happening:
I’ve met all the requirements except the 2 :
5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

– There are .nav-link buttons which have adequate a hrefs made with anchors to three sections of the landing page, despite that I’m not passing… I’m stuck.

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

– I tried 2 methods : ‘form action=’ and ‘a href’ with ‘id=‘submit’’ both including ‘input’, to no avail… Also stuck.

Any suggestions will be appreciated. Thanks in advance!

Your code so far

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="landing.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lato:wght@700&display=swap" rel="stylesheet">

    <title>Weelso - Need Wheels Sometimes?</title>

</head>

<body>

    <header id="header">

       <div class="pierwszydiv">

           <div>

               <h1 id="slogan">Need Wheels Sometimes?</h1>

               <br>

               <h1 id="slogan2">Don't buy. Hire.</h1>

           

            </div>

       

        <img src="car.jpg" alt="Man driving car" id="header-img">

        <p class="wheelso">Wheelso</p>

       </div>

       <nav id="nav-bar">

            <div> <img src="logo.png" alt="logo" class="logo"></div>      

            <ul class="nav-bar-items">

                <li class="nav-link" class="nav-bar-item"><a href="#form"> Get Your Ride</a></li>

                <li class="nav-link" class="nav-bar-item"><a href="#testimonials">Testimonials</a></li>

                <li class="nav-link" class="nav-bar-item"><a href="#copyright"> Contact us</a></li>  

            </ul>

        </nav>

    </header>

    <fieldset>

        <form id="form">

            <label for="email"> E-mail</label>

            <br>

            <input type="email" name="email" id="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"placeholder="Enter Your E-mail Here" required>

            <br>

            <label for="name"> Name</label>

            <br>

            <input type="text" name="name" id="name" placeholder="Enter Your Name Here" required>

            <br>

            <label for="phone"> Phone No.</label>

            <br>

            <input type="text" name="phone"  id="phone" placeholder="Enter Your Phone Number Here" required>

            <br>

            <!-- <a href="https://www.freecodecamp.com/email-submit">  

                <input type="submit" id="submit" value="Get Your Ride Now!"/>  

               </a> -->

            <form action="https://www.freecodecamp.com/email-submit)">

                <input type="submit" id="submit" name="Get Your Ride Now!" value="Bring Me Me Ride Now!">

            </form>    

        </form>

    </fieldset>

    <section class="why">

        <div class="why1">

            <p>An app guide right to your ride<p>

            <p>Reliable cars</p>

            <p>Acknowledged car brands</p>

        </div>

        <div class="why2">

            <p>Instant ride from around a corner</p>

            <p>Pay only for what you drove</p>

            <p>Competetive rates</p>

        </div>

    </section>

    <div>

        <video src="#" width="#" height="#" controls id="video">

            <source src="#">

        </video>

    </div>

   <section class="key-features" id="testimonials">

       <h1 class="key-features-slogan">Many Good Reasons to Stick Around</h1>

    <ul class="cala-lista">

        <li class="lista-cred">

            <div class="lista-cred-img1">

                <!-- obrazek -->

            </div>

            <p class="lista-opis">Weekly shopping, what else do I need a car for?</p>

        </li>

        <li class="lista-cred">

            <div class="lista-cred-img2">

                <!-- obrazek -->

            </div>

            <p class="lista-opis">Nifty option to commute to work.</p>

        </li>

        <li class="lista-cred">

            <div class="lista-cred-img3">

                <!-- obrazek -->

            </div>

            <p class="lista-opis">Was late and it save my day! </p>

        </li>

            <!-- <div class="test-head1">1</div>

            <div class="test-head2">2</div>

            <div class="test-head3">3</div>

       

       <div class="test-text1"><p>Only for weekly shopping, what else do I need a car for?</p></div>

       <div class="test-text2"><p>Nifty option to commute to work.</p></div>

       <div class="test-text3"><p></p></div>

    </li> -->

        </ul>

   </section>

   <footer>

       <p class="copyright" id="copyright"> <small>

          (c) 2021 All rights reserved by Wheelso  tel. +1 232 4943202</small></p>

   </footer>

</body>

</html>

Your browser information:

N/A

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

Challenge: Build a Product Landing Page

Link to the challenge:

2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

It’s easier to help if you post a link to your live code rather than us having to cut/paste. Also, your code should contain the test suite.

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 failing test 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

Do you understand what the test is looking for and why it fails?

The next 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

Do you understand what the test is looking for and why it fails?

4

Hi Roma,
first of all, thanks for all your editing work on my stuff, I’m sorry for not complying to the standards; it was my first post though…

Secondly , I tried to do my best in reading the errors for many times and I still can’t get it.

1.Each .nav-link indeed HAS an href attribute as necessary.
2. The #form DOES HAVE an action attribute as well.

Sorry for littering if I’m not seeing the obvious, but…

Thanks again,
Lukas

5

@lukas.b.krk,
Once again, it’s much easier if we can see your pen rather than having to copy/paste your code.
When you submit your project it has to be a live link, so that will suffice.

This is your code
<li class="nav-link" class="nav-bar-item"><a href="#form"> Get Your Ride</a></li>
The .nav-link does not have an href attribute.
The li has a .nav-link.
They are two different elements.

This is your code
<form id="form">
The user story says
“My landing page has a form element with a corresponding id="form".”
Where is there an action attribute?

Maybe search for something like html form elements to see what the valid elements are within a form element.

On a side note, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs

6

Hi there, thank you for your brief reply.
here’s the link to my pen: https://codepen.io/ghudunfur/pen/MWEEpOR

Now, my bad. I already put a proper id to each href in the nav bar. I don’t use them to style the page in the css, that I must admit. But it works the way I intended and meets the requirements. It still doesn’t pass the tests.

Secondly,
there are 2 forms - one inside another, the nested one has always had an action argument and the proper id. I made a try and put the id in the parent one as well, still doesn’t seem to work. It works as intended from the very beginning, though.

7

Thank you for your brief reply.
First, please verify your email address with codepen so that we may see your page full view.

The user story does not call for “a proper id to each href in the nav bar. The user story says
" User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link .”
Notice it calls for a class, not an id.

Also this <li class="nav-link" class="nav-bar-item"> is not the way to specify multiple class attributes. You can review this lesson that shows how to apply multiple class attributes to an element.

What you’ve done is to keep the .nav-link class on the list item and then you’ve also added that same class to the anchor element.
Doing this does not meet the requirements.
The test still sees .nav-link on the list item and the test fails. It does not know to look for that class elsewhere. Remember, computers do exactly what you tell them. You have to instruct them properly.

  1. The nested one did not “always have an action argument and the proper id”. That can be seen in the code you posted at the beginning. It only had an action argument.
  2. Now you have two form elements each with id="form". You can review this lesson. Basically, an id must be unique within the document.
  3. I gave you a hint when I said

Did you do this? If you had you would have seen that a form element is not a valid element within a form element.

Going a little further…
I have mentioned not to use the <br> to force line breaks or spacing and gave a link that show the accessibility concerns when doing so.

In addition to that, something else you should have in your toolbox is the W3C validator.
Run your HTML code through it. There are syntax errors that you need to be aware of and address.

8

Hi Roma,
you’re a bliss.
Thanks for reaching out to me and the guidance.
Sometimes when you get stuck you cease to see your own misunderstanding of a question, instead you look merely in the code functionality.
I corrected everything, got rid of the <br>'s and rewrote the form.
Now it works.
Thanks for pointing me towards the validator!

9

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