Возникли проблемы с прохождением тестов на моем курсе freeCodeCamp для целевой страницы продукта... пожалуйста, помогите 🙂

#javascript #html #css

Вопрос:

Я не могу передать историю № 5: «Когда я нажимаю кнопку .nav-ссылка в элементе навигации, я попадаю в соответствующий раздел целевой страницы». У меня все мои href атрибуты установлены на соответствующие id атрибуты, и когда я нажимаю на них, они приводят меня в нужный раздел страницы, но я все еще проваливаю этот тест… Что я делаю не так???

Код, который я написал, приведен ниже:

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

Тот же код с CSS находится в моей папке кода.страница ввода-вывода:

CodePen.io

Ответ №1:

Ошибка гласит

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

Причина, по которой происходит эта ошибка, заключается в том, что у вашего <ul> элемента также есть <ul class='nav-link'> ссылка и ее нет. Но поскольку в <ul> нем содержатся ваши ссылки, вы не хотите, чтобы это была ссылка. Так что, если вы измените это так, чтобы просто <ul> ошибка исчезла.

Вы также должны удалить id='nav-link' ссылку из своего div, так <div> как она не является навигационной ссылкой.