Files
Nicholas Carrigan (he/him) 536a689d34 feat(curriculum): balance sheet project (#44189)
* feat: initial infra

* feat: create steps

* chore: apply sem's review suggestions

Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>

* feat: write tests

* chore: optional?.chaining?.

* chore: gikf's suggestion

Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com>

* chore: rename

* chore: *

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* chore: apply shaun's review suggestions

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* chore: manual review suggestions

* chore: ?????

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
2021-12-03 16:20:34 -06:00

3.9 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
6193e5d66b67e32e5f0f930e Step 17 0 step-17

--description--

Now you can start filling in the data. In your first .row element, give the span elements the following text values in order: Cash, $25, $30, and $28. Give the following .notes element the text This is the cash we currently have on hand..

--hints--

The first span element should have the text Cash.

const row = document.querySelectorAll('.section > .row')?.[0];
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Cash');

The second span element should have the text $25.

const row = document.querySelectorAll('.section > .row')?.[0];
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$25');

The third span element should have the text $30.

const row = document.querySelectorAll('.section > .row')?.[0];
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$30');

The fourth span element should have the text $28.

const row = document.querySelectorAll('.section > .row')?.[0];
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$28');

Your first .notes element should have the text This is the cash we currently have on hand..

const notes = document.querySelectorAll('.section > .notes')?.[0];
assert(notes?.textContent === 'This is the cash we currently have on hand.');

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AcmeWidgetCorp Balance Sheet</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div id="sheet">
      <div id="header">
        <h1>Balance Sheet</h1>
        <h2>AcmeWidgetCorp</h2>
        <p class="row">
          <span>2019</span>
          <span>2020</span>
          <span class="current">2021</span>
        </p>
      </div>
      <h2>Assets</h2>
      <div class="section">
--fcc-editable-region--
        <p class="row">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
        <span class="notes"></span>
--fcc-editable-region--
        <p class="row">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
        <span class="notes"></span>
        <p class="row">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
        <span class="notes"></span>
        <p class="row total">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
      </div>
      <h2>Liabilities</h2>
      <div class="section">
        <p class="row">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
        <span class="notes"></span>
        <p class="row">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
        <span class="notes"></span>
        <p class="row">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
        <span class="notes"></span>
        <p class="row total">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
      </div>
      <h2>Net Worth</h2>
      <div class="section">
        <p class="row total">
          <span class="name"></span>
          <span></span>
          <span></span>
          <span class="current"></span>
        </p>
      </div>
    </div>
    <footer>Last Updated: December 2021</footer>
  </body>
</html>