Getting error learn coding in freecodecamp

I was learning front-end development through FreeCodeCamp. During my studies, I encountered an error while completing the Typography by Building a Nutrition Label: Step 61 on freeCodeCamp.org. The error message stated, “Sorry, your code does not pass. Try again. Your new <p> element should have the text ‘Protein 3g’.” Unfortunately, I haven’t been able to identify the issue despite my efforts.

We will need to see your HTML in order to help you. Please paste your HTML in here using the following method so that we can properly see your HTML.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

@bbsmooth here is the code:

`Preformatted text`<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat</span> 0g</p>
      <div class="divider"></div>
      <p><span class="bold">Cholesterol</span> 0mg <span class="bold">0%</span></p>
      <p><span class="bold">Sodium</span> 160mg <span class="bold">7%</span></p>
      <p><span class="bold">Total Carbohydrate</span> 37g <span class="bold">13%</span></p>
      <p class="indent no-divider">Dietary Fiber 4g</p>
      <div class="divider"></div>
      <p class="indent no-divider">Total Sugars 12g</p>
      <div class="divider double-indent"></div>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
    </div>
    <div class="divider large"></div> <!-- This should be a large divider -->
    
<p class="no-divider"><span class="bold">Protein</span> 3g</p> <!-- This is the corrected placement 
  </div>
   
</body>
</html>

Welcome to the forum @vileshBandekar

Please delete the closing div tag shown in the code block.
Then move the remaining div element so that it is below the p element.
Your code should pass.

Happy coding

its not working, still i getting error
“You should create a new p and div element at the end of your .daily-value element.”

Any time you make changes to your code and it isn’t working and you want further help then you need to paste your updated code in here again so we can see what you did.

1 Like
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat</span> 0g</p>
      <div class="divider"></div>
      <p><span class="bold">Cholesterol</span> 0mg <span class="bold">0%</span></p>
      <p><span class="bold">Sodium</span> 160mg <span class="bold">7%</span></p>
      <p><span class="bold">Total Carbohydrate</span> 37g <span class="bold">13%</span></p>
      <p class="indent no-divider">Dietary Fiber 4g</p>
      <div class="divider"></div>
      <p class="indent no-divider">Total Sugars 12g</p>
      <div class="divider double-indent"></div>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
</div>

    <div class="divider large"></div> <!-- This should be a large divider -->
    <p class="no-divider"><span class="bold">Protein</span> 3g</p> <!-- This is the corrected placement 
  
   </div>
</body>
</html>

“After your last divider, create another p element…”

You seem to have added a new divider after the .daily-value div and then placed the new p element after that. That’s not what the instructions asked you to do. They want you to place the new p element after the last divider div that was already there at the end of the .daily-value div.

still getting error: “Sorry, your code does not pass. Try again.
Your new p element should have the text Protein 3g.”

My code:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat</span> 0g</p>
      <div class="divider"></div>
      <p><span class="bold">Cholesterol</span> 0mg <span class="bold">0%</span></p>
      <p><span class="bold">Sodium</span> 160mg <span class="bold">7%</span></p>
      <p><span class="bold">Total Carbohydrate</span> 37g <span class="bold">13%</span></p>
      <p class="indent no-divider">Dietary Fiber 4g</p>
      <div class="divider"></div>
      <p class="indent no-divider">Total Sugars 12g</p>
      <div class="divider double-indent"></div>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
</div>
    <p class="no-divider"><span class="bold">Protein</span> 3g</p> <!-- This is the corrected placement 
    <div class="divider large"></div> <!-- This should be a large divider -->  
   </div>
</body>
</html>

Hi @vileshBandekar

Please delete the closing div tag shown at the top of the code block.
Then delete all your comments.

Happy coding

You still aren’t putting this p element immediately after your last divider div. To be immediately after your last divider div means that there can’t be anything else between the last divider div and the new p element. Do you see the closing </div> tag between them?

thank you
finally i got sollution for my code

1 Like

my code:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat</span> 0g</p>
      <div class="divider"></div>
      <p><span class="bold">Cholesterol</span> 0mg <span class="bold">0%</span></p>
      <p><span class="bold">Sodium</span> 160mg <span class="bold">7%</span></p>
      <p><span class="bold">Total Carbohydrate</span> 37g <span class="bold">13%</span></p>
      <p class="indent no-divider">Dietary Fiber 4g</p>
      <div class="divider"></div>
      <p class="indent no-divider">Total Sugars 12g</p>
      <div class="divider double-indent"></div>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
    <p class="no-divider"><span class="bold">Protein</span> 3g</p> 
    
    <div class="divider large"></div> 
    </div>
   </div>
</body>
</html>

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