curriculum/challenges/english/blocks/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
Within the tbody element, add four tr elements. Give the first three the class attribute set to data, and the fourth the class attribute set to total.
Your tbody element should have four tr elements.
const children = [
...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
];
assert.lengthOf(children, 4);
children.forEach(child => assert.strictEqual(child?.localName, 'tr'));
Your first three tr elements should have the class attribute set to data.
const children = [
...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
];
children.forEach((child, index) => {
if (index < 3) {
assert.isTrue(child?.classList?.contains('data'));
}
});
Your fourth tr element should have the class attribute set to total.
const children = [
...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
];
assert.isTrue(children?.[3]?.classList?.contains('total'));
<!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>
--fcc-editable-region--
<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>
</tbody>
</table>
--fcc-editable-region--
<table></table>
</div>
</section>
</main>
</body>
</html>