Build a Balance Sheet - Step 22

HTML-CSS
1

Tell us what’s happening:

I’m stuck in step 22. After writing the codes as required, I keep getting the error message “ Your th element should have the text Expenses Annual anticipated expenses, such as payroll..”

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

<th>
  Expenses <span class="description">Annual anticipated expenses, such as payroll.</span>
  </th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>

<!-- User Editable Region -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/140.0.7339.122 Mobile/15E148 Safari/604.1

Challenge Information:

Build a Balance Sheet - Step 22
https://www.freecodecamp.org/learn/full-stack-developer/workshop-balance-sheet/step-22

2

spaces matter.
Remove the extra spaces between the word Expenses and the th opening tag.

3

I’ve done that yet the code still did not pass.

4

post your updated code please

5 
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span>
</th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>
6

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

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

7

that code added in the right place passes, but it should not be the only code in the editable region

if you need more help please post all the code you have in the editor

8

please find below my full HTML codes for the balance sheet. I’ve passed every other steps except the step 22 where I’m stuck. I can’t find the back tick button in my iPhone 11 Pro.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

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

    <title>Balance Sheet</title>

    <link rel="stylesheet" href="./styles.css" />

  </head>

  <body>

    <main>

      <section>

        <h1>

          <span class="flex">

            <span>AcmeWidgetCorp</span>

            <span>Balance Sheet</span>

          </span>

        </h1>

        <div id="years" aria-hidden="true">

          <span class="year">2019</span>

          <span class="year">2020</span>

          <span class="year">2021</span>

        </div>

        <div class="table-wrap">

          <table>

            <caption>

              Assets

            </caption>

            <thead>

              <tr>

                <td></td>

                <th><span class="sr-only year">2019</span></th>

                <th><span class="sr-only year">2020</span></th>

                <th class="current"><span class="sr-only year">2021</span></th>

              </tr>

            </thead>

            <tbody>

              <tr class="data">

                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>

                <td>$25</td>

                <td>$30</td>

                <td class="current">$28</td>

              </tr>

              <tr class="data">

                <th>Checking <span class="description">Our primary transactional account.</span></th>

                <td>$54</td>

                <td>$56</td>

                <td class="current">$53</td>

              </tr>

              <tr class="data">

                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>

                <td>$500</td>

                <td>$650</td>

                <td class="current">$728</td>

              </tr>

              <tr class="total">

                <th>Total <span class="sr-only">Assets</span></th>

                <td>$579</td>

                <td>$736</td>

                <td class="current">$809</td>

              </tr>

            </tbody>

          </table>

          <table>

            <caption>

              Liabilities

            </caption>

            <thead>

              <tr>

                <td></td>

                <th><span class="sr-only">2019</span></th>

                <th><span class="sr-only">2020</span></th>

                <th><span class="sr-only">2021</span></th>

              </tr>

            </thead>

            <tbody>

              <tr class="data">

                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>

                <td>$500</td>

                <td>$250</td>

                <td class="current">$0</td>

              </tr>

              <tr class="data">

                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>

                <td>$200</td>

                <td>$300</td>

                <td class="current">$400</td>

              </tr>

              <tr class="data">

                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>

                <td>$50</td>

                <td>$50</td>

                <td class="current">$75</td>

              </tr>

              <tr class="total">

                <th>Total <span class="sr-only">Liabilities</span></th>

                <td>$750</td>

                <td>$600</td>

                <td class="current">$475</td>

              </tr>

            </tbody>

          </table>

          <table>

            <caption>

              Net Worth

            </caption>

            <thead>

              <tr>

                <td></td>

                <th><span class="sr-only">2019</span></th>

                <th><span class="sr-only">2020</span></th>

                <th><span class="sr-only">2021</span></th>

              </tr>

            </thead>

            <tbody>

              <tr class="total">

                <th>Total <span class="sr-only">Net Worth</span></th>

                <td>$-171</td>

                <td>$136</td>

                <td class="current">$334</td>

              </tr>

            </tbody>

          </table>

        </div>

      </section>

    </main>

  </body>

</html>
9

the backtick is in the same button as the apostrophe, just hold the button

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

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

10

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

11

Thank you! I tried it again in Safari browser and it passed.