search

freeCodeCamp / testable-projects-fcc

Test suite for freeCodeCamp's legacy Codepen-based Curriculum
BSD 3-Clause "New" or "Revised" License
177 stars 112 forks source link

the Nav-link <a> tag not working properly with attribute href #1091

Closed Fynmn closed 4 years ago

Fynmn commented 4 years ago

Issue Description

Browser Information

Your Code / Link to Your Pen

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

<li class="nav-link"><a href="#how-it-works">How It Works</a></li>
<li class="nav-link"><a href="#features">Features</a></li>
<li class="nav-link"><a href="#video">Pricing</a></li>

I have sections which have those corresponding id's but it doesn't seem to catch it.

Screenshot

YolandaRib-4 commented 4 years ago

I'm experiencing the same issue as @Fynmn I verify and there is not duplicate Id, the test still fails.

Here is the full code, as you can see there are not duplicate ids

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://kit.fontawesome.com/229df7cbc9.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="main-container">
      <header id="header">
        <img
          id="header-img"
          src="https://s3.amazonaws.com/freecodecamp/original_trombones.png"
        />
        <nav id="nav-bar">
          <ul>
            <li class="nav-link"><a href="#feature-section">Features</a></li>
            <li class="nav-link"><a href="#video">How It Works</a></li>
            <li class="nav-link"><a href="#prices-section">Pricing</a></li>
          </ul>
        </nav>
      </header>

      <div id="section-1">
        <h1 class="text-center">Handcrafted, home-made masterpieces</h1>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input
            name="email"
            type="email"
            id="email"
            placeholder="Enter your email address"
            required
          />
          <input type="submit" id="submit" value="GET STARTED" />
        </form>
      </div>

      <div id="feature-section">
        <div class="card">
          <div><i class="fas fa-fire"></i></div>
          <div class="text-card">
            <h1 class="title-feature-card">Premium Materials</h1>
            <p class="description-card">
              Our trombones use the shiniest brass which is sourced locally.
              This will increase the longevity of your purchase.
            </p>
          </div>
        </div>

        <div class="card">
          <div><i class="fas fa-truck"></i></div>
          <div class="text-card">
            <h1 class="title-feature-card">Fast Shipping</h1>
            <p class="description-card">
              We make sure you recieve your trombone as soon as we have finished
              making it. We also provide free returns if you are not satisfied.
            </p>
          </div>
        </div>

        <div class="card">
          <div><i class="fas fa-battery-full"></i></div>
          <div class="text-card">
            <h1 class="title-feature-card">Quality Assurance</h1>
            <p class="description-card">
              For every purchase you make, we will ensure there are no damages
              or faults and we will check and test the pitch of your instrument.
            </p>
          </div>
        </div>
      </div>

      <div id="container-video">
        <iframe
          id="video"
          width="560"
          height="315"
          src="https://www.youtube.com/embed/y8Yv4pnO7qc"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        ></iframe>
      </div>

      <div id="prices-section">
        <div class="card-prices">
          <h1 class="title-card">TENOR TROMBONE</h1>
          <h2>$600</h2>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <button>Select</button>
        </div>

        <div class="card-prices">
          <h1 class="title-card">BASS TROMBONE</h1>
          <h2>$900</h2>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <button>Select</button>
        </div>

        <div class="card-prices">
          <h1 class="title-card">VALVE TROMBONE</h1>
          <h2>$1200</h2>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <button>Select</button>
        </div>
      </div>

      <footer></footer>
    </div>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>
moT01 commented 4 years ago

For more visibility, please open issues on the main repo for these. Thanks and happy coding 🎉