CODEWITHSUNDEEP
javascripthtmlcss
Todd Gammon
Todd Gammon

Reputation: 25

Having trouble getting my tests to pass on my freeCodeCamp course for a Product Landing Page... please help :)

I cannot pass 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 have all of my href attributes set to the corresponding id attributes and when i click on them they take me to the correct section of the page, but I am still failing this test... What am I Doing Wrong???

The code I wrote is below:

<body> 
<div class="container">
    <header id="header">
        <!-- needs to be id="nav-bar"-->
        <nav id="nav-bar">
            <div class="logo"><img id="header-img" src="https://img.icons8.com/windows/50/000000/drum-set.png" alt="drum set"><span>Drums Company</span>
            </div>
            
            <div id="nav-link">
                <ul class="nav-link">
                    <li><a href="#home" class="nav-link">Home</a></li>
                    <li><a href="#about" class="nav-link">About</a></li>
                    <li><a href="#products" class="nav-link">Products</a></li>
                    <li><a href="#contact" class="nav-link">Contact</a></li>
                </ul>                    
            </div>
        </nav>
    </header>
    
    <div class="page-wrapper">
        <section id="home__page" class="nav-link">
            <h1 id="home">Welcome!!</h1>
            <section id="contact__page" class="nav-link">
                   <h3 id="contact">Receive our newsletter:</h3>
                   <form id="form" 
                   action= "https://www.freecodecamp.com/email-submit">
                       <input 
                    name="email"
                       id="email"
                       placeholder="Enter Your Email Address"
                       required
                       /> 
                       <input id="submit" value="Enter" class="btn">
               </form>
           </section>
            <p>Zombie ipsum brains reversus ab cerebellum viral inferno, brein nam rick mend grimes malum cerveau cerebro. De carne cerebro lumbering animata cervello corpora quaeritis. Summus thalamus brains sit​​, morbo basal ganglia vel maleficia? De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris</p>
        </section>
    </div>
    
        
                    <section id="about__page" class= "nav-link">
                        <h2 id="about"> Watch the video below to see our products in action!</h2>
                        <p>This is my boss, Jonathan Hart, a self-made millionaire, he’s quite a guy. This is Mrs H., she’s gorgeous, she’s one lady who knows how to take care of herself. By the way, my name is Max. I take care of both of them, which ain’t easy, ’cause when they met it was MURDER!</p>
                    </section>
                

                    
                        <section id="products__page"        class="nav-link">
                            <div id="products" class="desc">
                            <h2 id="products__about">Peep the vid below:</h2></div>
                            <iframe
                                id="video"
                                height="400"
                                width="600"
                                src="https://www.youtube.com/embed/Mo0jCrkksP8?autoplay=1" 
                                title="YouTube video player"    frameborder="0" 
                                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                            </iframe>
                        </section>
    
    </div>

The same code with CSS is located on my CodePen.io page:

CodePen.io

Upvotes: 1

Views: 222

Answers (1)

xexogil990
xexogil990

Reputation: 40

The error reads

Each .nav-link element should have an href attribute : expected false to equal true

The reason this error is happening is because your <ul> element also has <ul class='nav-link'> and no link. But since the <ul> contains your links you don't want it to be a link. So, if you change this to be just <ul> the error disappears.

You should also remove the id='nav-link' from your div since the <div> is not a navigation link.

Upvotes: 1

Related Questions