chore(curriculum): use specific asserts workshop balance (#57608)

This commit is contained in:
Anna
2025-01-09 11:21:23 +01:00
committed by GitHub
parent e47ccaa912
commit 25b015aaf7
66 changed files with 2216 additions and 1093 deletions
@@ -15,25 +15,25 @@ Begin your project by giving your `head` element a `link` element for your style
Your code should have a `link` element.
```js
assert(/<link/.test(code))
assert.match(code, /<link/);
```
Your `link` element should be within your `head` element.
```js
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
assert.match(code, /<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i);
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/);
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/);
```
# --seed--
@@ -45,8 +45,8 @@ assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Balance Sheet</title>
</head>
@@ -11,16 +11,22 @@ Within your `body` element, nest a `section` element within a `main` element.
# --hints--
The first element inside the `body` element should be your `main` element.
The first element inside the `body` element should be your `main` element.
```js
assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
assert.strictEqual(
document.querySelector('body')?.children?.[0]?.localName,
'main'
);
```
You should have a `section` element within your `main` element.
```js
assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
assert.strictEqual(
document.querySelector('main')?.children?.[0]?.localName,
'section'
);
```
# --seed--
@@ -31,10 +37,10 @@ assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
--fcc-editable-region--
<body>
@@ -14,13 +14,19 @@ Within your `section` element, add an `h1` element with a nested `span` element.
Your `section` element should have an `h1` element.
```js
assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
assert.strictEqual(
document.querySelector('section')?.children?.[0]?.localName,
'h1'
);
```
Your `h1` element should have a `span` element.
```js
assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
assert.strictEqual(
document.querySelector('h1')?.children?.[0]?.localName,
'span'
);
```
# --seed--
@@ -31,10 +37,10 @@ assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -16,33 +16,47 @@ Give your existing `span` the `class` attribute set to `flex`, and add two `span
Your existing `span` element should have the `class` attribute set to `flex`.
```js
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
assert.isTrue(
document.querySelector('h1')?.children?.[0]?.classList?.contains('flex')
);
```
Your existing `span` element should have two new `span` elements within it.
```js
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
assert.strictEqual(
document.querySelector('.flex')?.children?.[0]?.localName,
'span'
);
assert.strictEqual(
document.querySelector('.flex')?.children?.[1]?.localName,
'span'
);
```
Your new `span` elements should not have a `class` attribute.
```js
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
assert.isEmpty(document.querySelector('.flex')?.children?.[0]?.classList);
assert.isEmpty(document.querySelector('.flex')?.children?.[1]?.classList);
```
Your first new `span` element should have the text `AcmeWidgetCorp`.
```js
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
assert.strictEqual(
document.querySelector('.flex')?.children?.[0]?.textContent,
'AcmeWidgetCorp'
);
```
Your second new `span` element should have the text `Balance Sheet`.
```js
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
assert.strictEqual(
document.querySelector('.flex')?.children?.[1]?.textContent,
'Balance Sheet'
);
```
# --seed--
@@ -53,10 +67,10 @@ assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -14,19 +14,25 @@ Below your `h1` element, create a `div` element. Give it an `id` attribute set t
You should create a new `div` element after your `h1` element.
```js
assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
assert.strictEqual(
document.querySelector('h1')?.nextElementSibling?.localName,
'div'
);
```
Your new `div` element should have an `id` attribute set to `years`.
```js
assert(document.querySelector('div')?.getAttribute('id') === 'years');
assert.strictEqual(document.querySelector('div')?.getAttribute('id'), 'years');
```
Your new `div` element should have the `aria-hidden` attribute set to `true`.
```js
assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
assert.strictEqual(
document.querySelector('div')?.getAttribute('aria-hidden'),
'true'
);
```
# --seed--
@@ -37,10 +43,10 @@ assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -14,32 +14,41 @@ Within your `div` element, add three `span` elements. Give each of them a `class
Your `div` element should have three `span` elements.
```js
assert(document.querySelector('div')?.children?.length === 3);
assert.lengthOf(document.querySelector('div')?.children, 3);
```
Each `span` element should have a `class` attribute set to `year`.
```js
const spans = [...document.querySelector('div')?.children];
spans.forEach(span => assert(span?.classList?.contains('year')));
spans.forEach(span => assert.isTrue(span?.classList?.contains('year')));
```
Your first `span` should have the text `2019`.
```js
assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
assert.strictEqual(
document.querySelector('div')?.children?.[0]?.textContent,
'2019'
);
```
Your second `span` should have the text `2020`.
```js
assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
assert.strictEqual(
document.querySelector('div')?.children?.[1]?.textContent,
'2020'
);
```
Your third `span` should have the text `2021`.
```js
assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
assert.strictEqual(
document.querySelector('div')?.children?.[2]?.textContent,
'2021'
);
```
# --seed--
@@ -50,10 +59,10 @@ assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -16,27 +16,29 @@ Within that, add three `table` elements. You will be using CSS to style these in
You should create a new `div` element.
```js
assert(document.querySelectorAll('div')?.length === 2);
assert.lengthOf(document.querySelectorAll('div'), 2);
```
Your new `div` element should have the `class` set to `table-wrap`.
```js
assert(document.querySelector('.table-wrap')?.localName === 'div');
assert.strictEqual(document.querySelector('.table-wrap')?.localName, 'div');
```
Your `.table-wrap` element should come after your existing `div`.
```js
assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
assert.isTrue(
document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap')
);
```
Your `.table-wrap` element should have three `table` elements.
```js
const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
assert(children?.length === 3);
children.forEach(child => assert(child?.localName === 'table'));
assert.lengthOf(children, 3);
children.forEach(child => assert.strictEqual(child?.localName, 'table'));
```
# --seed--
@@ -47,10 +49,10 @@ children.forEach(child => assert(child?.localName === 'table'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -16,13 +16,16 @@ Add a `caption` element to your first `table`, and give it the text `Assets`.
Your first `table` element should have a `caption` element.
```js
assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
assert.strictEqual(
document.querySelector('table')?.children?.[0]?.localName,
'caption'
);
```
Your `caption` element should have the text `Assets`.
```js
assert(document.querySelector('caption')?.textContent === 'Assets');
assert.strictEqual(document.querySelector('caption')?.textContent, 'Assets');
```
# --seed--
@@ -33,10 +36,10 @@ assert(document.querySelector('caption')?.textContent === 'Assets');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -57,10 +60,8 @@ assert(document.querySelector('caption')?.textContent === 'Assets');
<table>
</table>
--fcc-editable-region--
<table>
</table>
<table>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -16,25 +16,34 @@ Add a `thead` and `tbody` to your first `table`, below the `caption` element.
Your first `table` element should have a `thead` element.
```js
assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
const table = document.querySelectorAll('table')?.[0];
assert.isNotNull(table?.querySelector('thead'));
```
Your first `table` element should have a `tbody` element.
```js
assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
const table = document.querySelectorAll('table')?.[0];
const tbody = table?.querySelector('tbody');
assert.isNotNull(tbody);
```
Your `thead` element should be immediately below your `caption` element.
```js
assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
assert.strictEqual(
document.querySelector('caption')?.nextElementSibling?.localName,
'thead'
);
```
Your `tbody` element should be immediately below your `thead` element.
```js
assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
assert.strictEqual(
document.querySelector('thead')?.nextElementSibling?.localName,
'tbody'
);
```
# --seed--
@@ -45,10 +54,10 @@ assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -70,10 +79,8 @@ assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody
<caption>Assets</caption>
</table>
--fcc-editable-region--
<table>
</table>
<table>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -16,21 +16,36 @@ The `td` element indicates a data cell, while the `th` element indicates a heade
Your `thead` element should have a `tr` element.
```js
assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
assert.strictEqual(
document.querySelector('thead')?.children?.[0]?.localName,
'tr'
);
```
Your `tr` element should have a `td` element as the first child.
```js
assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
assert.strictEqual(
document.querySelector('tr')?.children?.[0]?.localName,
'td'
);
```
Your `tr` element should have three `th` elements, after the `td` element.
```js
assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
assert.strictEqual(
document.querySelector('tr')?.children?.[1]?.localName,
'th'
);
assert.strictEqual(
document.querySelector('tr')?.children?.[2]?.localName,
'th'
);
assert.strictEqual(
document.querySelector('tr')?.children?.[3]?.localName,
'th'
);
```
# --seed--
@@ -41,10 +56,10 @@ assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -67,13 +82,10 @@ assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
<thead>
</thead>
--fcc-editable-region--
<tbody>
</tbody>
</table>
<table>
</table>
<table>
<tbody></tbody>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -20,8 +20,8 @@ Each of your `th` elements should have a `span` element.
```js
const ths = [...document.querySelectorAll('th')];
ths?.forEach(th => {
assert(th?.children?.length === 1);
assert(th?.children?.[0]?.localName === 'span');
assert.lengthOf(th?.children, 1);
assert.strictEqual(th?.children?.[0]?.localName, 'span');
});
```
@@ -30,40 +30,56 @@ Each of your new `span` elements should have the `class` attribute set to `sr-on
```js
const ths = [...document.querySelectorAll('th')];
ths?.forEach(th => {
assert(th?.children?.[0]?.classList?.contains('sr-only'));
assert(th?.children?.[0]?.classList?.contains('year'));
assert.isTrue(th?.children?.[0]?.classList?.contains('sr-only'));
assert.isTrue(th?.children?.[0]?.classList?.contains('year'));
});
```
Your first `span` element should have the text `2019`.
```js
assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
assert.strictEqual(
document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent,
'2019'
);
```
Your second `span` element should have the text `2020`.
```js
assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
assert.strictEqual(
document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent,
'2020'
);
```
Your third `span` element should have the text `2021`.
```js
assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
assert.strictEqual(
document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent,
'2021'
);
```
Your third `th` element should have the `class` set to `current`.
```js
assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
assert.isTrue(
document
.querySelector('table')
?.querySelectorAll('th')?.[2]
?.classList?.contains('current')
);
```
Your `td` element should be empty.
```js
assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
const table = document.querySelector('table');
const tableData = table.querySelectorAll('td')?.[0];
assert.strictEqual(tableData?.textContent, '');
assert.isEmpty(tableData?.children);
```
# --seed--
@@ -74,10 +90,10 @@ assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -106,13 +122,10 @@ assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.l
</tr>
</thead>
--fcc-editable-region--
<tbody>
</tbody>
</table>
<table>
</table>
<table>
<tbody></tbody>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -15,8 +15,8 @@ Your `tbody` element should have four `tr` elements.
```js
const children = [...document.querySelector('tbody')?.children];
assert(children?.length === 4);
children.forEach(child => assert(child?.localName === 'tr'));
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`.
@@ -25,7 +25,7 @@ Your first three `tr` elements should have the `class` attribute set to `data`.
const children = [...document.querySelector('tbody')?.children];
children.forEach((child, index) => {
if (index < 3) {
assert(child?.classList?.contains('data'));
assert.isTrue(child?.classList?.contains('data'));
}
});
```
@@ -34,7 +34,7 @@ Your fourth `tr` element should have the `class` attribute set to `total`.
```js
const children = [...document.querySelector('tbody')?.children];
assert(children?.[3]?.classList?.contains('total'));
assert.isTrue(children?.[3]?.classList?.contains('total'));
```
# --seed--
@@ -45,10 +45,10 @@ assert(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">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -66,7 +66,9 @@ assert(children?.[3]?.classList?.contains('total'));
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -80,10 +82,8 @@ assert(children?.[3]?.classList?.contains('total'));
</tbody>
--fcc-editable-region--
</table>
<table>
</table>
<table>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,83 @@ Following that, add three `td` elements with the following text (in order): `$25
Your first `tr` should have a `th` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.strictEqual(
tableRow?.querySelector('th')?.innerText,
'Cash This is the cash we currently have on hand.'
);
```
You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'This is the cash we currently have on hand.'
);
```
Your `span` element should have the `class` attribute set to `description`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('description')
);
```
You should have three `td` elements.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$25`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$25');
```
Your second `td` element should have the text `$30`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$30');
```
Your third `td` element should have the text `$28`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$28');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[0];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -75,10 +103,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +124,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelect
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -110,18 +140,13 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelect
<tr class="data">
</tr>
--fcc-editable-region--
<tr class="data">
</tr>
<tr class="data">
</tr>
<tr class="total">
</tr>
<tr class="data"></tr>
<tr class="data"></tr>
<tr class="total"></tr>
</tbody>
</table>
<table>
</table>
<table>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,83 @@ Following that, add three `td` elements with the following text (in order): `$54
Your second `tr` should have a `th` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Checking Our primary transactional account.`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.strictEqual(
tableRow?.querySelector('th')?.innerText,
'Checking Our primary transactional account.'
);
```
You should wrap the text `Our primary transactional account.` in a `span` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'Our primary transactional account.'
);
```
Your `span` element should have the `class` attribute set to `description`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('description')
);
```
You should have three `td` elements.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$54`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$54');
```
Your second `td` element should have the text `$56`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$56');
```
Your third `td` element should have the text `$53`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$53');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[1];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -75,10 +103,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +124,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelect
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -116,16 +146,12 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelect
<tr class="data">
</tr>
--fcc-editable-region--
<tr class="data">
</tr>
<tr class="total">
</tr>
<tr class="data"></tr>
<tr class="total"></tr>
</tbody>
</table>
<table>
</table>
<table>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,83 @@ Following that, add three `td` elements with the following text (in order): `$50
Your third `tr` should have a `th` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Savings Funds set aside for emergencies.`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.strictEqual(
tableRow?.querySelector('th')?.innerText,
'Savings Funds set aside for emergencies.'
);
```
You should wrap the text `Funds set aside for emergencies.` in a `span` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'Funds set aside for emergencies.'
);
```
Your `span` element should have the `class` attribute set to `description`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('description')
);
```
You should have three `td` elements.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$500`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$500');
```
Your second `td` element should have the text `$650`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$650');
```
Your third `td` element should have the text `$728`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$728');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const tableBody = document.querySelector('tbody');
const tableRow = tableBody?.querySelectorAll('tr')?.[2];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -75,10 +103,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +124,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelect
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -122,14 +152,11 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelect
<tr class="data">
</tr>
--fcc-editable-region--
<tr class="total">
</tr>
<tr class="total"></tr>
</tbody>
</table>
<table>
</table>
<table>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,76 @@ Following that, add three `td` elements with the following text (in order): `$57
Your fourth `tr` should have a `th` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
assert.exists(
document
.querySelector('tbody')
?.querySelectorAll('tr')?.[3]
?.querySelector('th')
);
```
Your `th` element should have the text `Total Assets`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableHeader = tableRow.querySelector('th');
assert.strictEqual(tableHeader.innerText, 'Total Assets');
```
You should wrap the text `Assets` in a `span` element.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const span = tableRow.querySelector('th > span');
assert.strictEqual(span.textContent, 'Assets');
```
Your `span` element should have the `class` attribute set to `sr-only`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const span = tableRow.querySelector('th > span');
assert.isTrue(span?.classList?.contains('sr-only'));
```
You should have three `td` elements.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableDatas = tableRow.querySelectorAll('td');
assert.lengthOf(tableDatas, 3);
```
Your first `td` element should have the text `$579`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableData = tableRow.querySelectorAll('td')?.[0];
assert.strictEqual(tableData?.textContent, '$579');
```
Your second `td` element should have the text `$736`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableData = tableRow.querySelectorAll('td')?.[1];
assert.strictEqual(tableData?.textContent, '$736');
```
Your third `td` element should have the text `$809`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableData = tableRow.querySelectorAll('td')?.[2];
assert.strictEqual(tableData.textContent, '$809');
```
Your third `td` element should have the `class` attribute set to `current`.
```js
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableData = tableRow.querySelectorAll('td')?.[2];
assert.isTrue(tableData?.classList?.contains('current'));
```
# --seed--
@@ -75,10 +96,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +117,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -130,10 +153,8 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
--fcc-editable-region--
</tbody>
</table>
<table>
</table>
<table>
</table>
<table></table>
<table></table>
</div>
</section>
</main>
@@ -14,37 +14,56 @@ Time to move on to your second table. Start by giving it a `caption` element set
Your second `table` element should have a `caption` element.
```js
assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
assert.strictEqual(
document.querySelectorAll('table')?.[1]?.children?.[0]?.localName,
'caption'
);
```
Your `caption` element should have the text `Liabilities`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
assert.strictEqual(
document.querySelectorAll('table')?.[1]?.querySelector('caption')
?.textContent,
'Liabilities'
);
```
Your second `table` element should have a `thead` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
assert.isNotNull(
document.querySelectorAll('table')?.[1]?.querySelector('thead')
);
```
Your second `table` element should have a `tbody` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
assert.isNotNull(
document.querySelectorAll('table')?.[1]?.querySelector('tbody')
);
```
Your `thead` element should be immediately below your `caption` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
const table = document.querySelectorAll('table')?.[1];
assert.strictEqual(
table?.querySelector('caption')?.nextElementSibling?.localName,
'thead'
);
```
Your `tbody` element should be immediately below your `thead` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
const table = document.querySelectorAll('table')?.[1];
assert.strictEqual(
table?.querySelector('thead')?.nextElementSibling?.localName,
'tbody'
);
```
# --seed--
@@ -55,10 +74,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -76,7 +95,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElem
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -14,21 +14,24 @@ Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements
Your `thead` element should have a `tr` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
const thead = document.querySelectorAll('table')?.[1]?.querySelector('thead');
assert.strictEqual(thead?.children?.[0]?.localName, 'tr');
```
Your `tr` element should have a `td` element as the first child.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
const trElement = document.querySelectorAll('table')?.[1]?.querySelector('tr');
assert.strictEqual(trElement?.children?.[0]?.localName, 'td');
```
Your `tr` element should have three `th` elements, after the `td` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
const trElement = document.querySelectorAll('table')?.[1]?.querySelector('tr');
assert.strictEqual(trElement?.children?.[1]?.localName, 'th');
assert.strictEqual(trElement?.children?.[2]?.localName, 'th');
assert.strictEqual(trElement?.children?.[3]?.localName, 'th');
```
# --seed--
@@ -39,10 +42,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -60,7 +63,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -14,45 +14,57 @@ Give each `th` element a `span` element with the class set to `sr-only` and the
Each of your `th` elements should have a `span` element.
```js
const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
const ths = [
...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')
];
ths?.forEach(th => {
assert(th?.children?.length === 1);
assert(th?.children?.[0]?.localName === 'span');
assert.lengthOf(th?.children, 1);
assert.strictEqual(th?.children?.[0]?.localName, 'span');
});
```
Each of your new `span` elements should have the `class` attribute set to `sr-only`.
```js
const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
const ths = [
...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')
];
ths?.forEach(th => {
assert(th?.children?.[0]?.classList?.contains('sr-only'));
assert.isTrue(th?.children?.[0]?.classList?.contains('sr-only'));
});
```
Your first `span` element should have the text `2019`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
const table = document.querySelectorAll('table')?.[1];
const th = table.querySelectorAll('th')?.[0];
assert.strictEqual(th.children?.[0]?.textContent, '2019');
```
Your second `span` element should have the text `2020`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
const table = document.querySelectorAll('table')?.[1];
const th = table.querySelectorAll('th')?.[1];
assert.strictEqual(th?.children?.[0]?.textContent, '2020');
```
Your third `span` element should have the text `2021`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
const table = document.querySelectorAll('table')?.[1];
const th = table.querySelectorAll('th')?.[2];
assert.strictEqual(th?.children?.[0]?.textContent, '2021');
```
Your `td` element should be empty.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
const table = document.querySelectorAll('table')?.[1];
const td = table.querySelectorAll('td')?.[0];
assert.strictEqual(td?.textContent, '');
assert.lengthOf(td?.children, 0);
```
# --seed--
@@ -63,10 +75,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.chi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -84,7 +96,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.chi
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -122,7 +136,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.chi
</table>
--fcc-editable-region--
<table>
<caption>Liabilities</caption>
<caption>
Liabilities
</caption>
<thead>
<tr>
<td></td>
@@ -14,18 +14,22 @@ Within the `tbody` element, add four `tr` elements. Give the first three the `cl
Your `tbody` element should have four `tr` elements.
```js
const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
assert(children?.length === 4);
children.forEach(child => assert(child?.localName === 'tr'));
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`.
```js
const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
const children = [
...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
];
children.forEach((child, index) => {
if (index < 3) {
assert(child?.classList?.contains('data'));
assert.isTrue(child?.classList?.contains('data'));
}
});
```
@@ -33,8 +37,10 @@ children.forEach((child, index) => {
Your fourth `tr` element should have the `class` attribute set to `total`.
```js
const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
assert(children?.[3]?.classList?.contains('total'));
const children = [
...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
];
assert.isTrue(children?.[3]?.classList?.contains('total'));
```
# --seed--
@@ -45,10 +51,10 @@ assert(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">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -66,7 +72,9 @@ assert(children?.[3]?.classList?.contains('total'));
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -104,21 +112,22 @@ assert(children?.[3]?.classList?.contains('total'));
</table>
--fcc-editable-region--
<table>
<caption>Liabilities</caption>
<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>
<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>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,92 @@ Add three `td` elements below that, and give them the following text, in order:
Your first `tr` should have a `th` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(
tableRow?.querySelector('th')?.innerText,
'Loans The outstanding balance on our startup loan.'
);
```
You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'The outstanding balance on our startup loan.'
);
```
Your `span` element should have the `class` attribute set to `description`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('description')
);
```
You should have three `td` elements.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$500`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$500');
```
Your second `td` element should have the text `$250`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$250');
```
Your third `td` element should have the text `$0`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$0');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -133,17 +172,19 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
--fcc-editable-region--
--fcc-editable-region--
<tr class="data">
</tr>
<tr class="data">
@@ -155,8 +196,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
--fcc-editable-region--
</tbody>
</table>
<table>
</table>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,92 @@ Add three `td` elements below that, and give them the following text, in order:
Your second `tr` should have a `th` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.strictEqual(
tableRow?.querySelector('th')?.innerText,
'Expenses Annual anticipated expenses, such as payroll.'
);
```
You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'Annual anticipated expenses, such as payroll.'
);
```
Your `span` element should have the `class` attribute set to `description`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('description')
);
```
You should have three `td` elements.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$200`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$200');
```
Your second `td` element should have the text `$300`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$300');
```
Your third `td` element should have the text `$400`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$400');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[1];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -133,13 +172,15 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -159,8 +200,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
--fcc-editable-region--
</tbody>
</table>
<table>
</table>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,92 @@ Add three `td` elements below that, and give them the following text, in order:
Your third `tr` should have a `th` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.strictEqual(
tableRow?.querySelector('th')?.innerText,
'Credit The outstanding balance on our credit card.'
);
```
You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'The outstanding balance on our credit card.'
);
```
Your `span` element should have the `class` attribute set to `description`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('description')
);
```
You should have three `td` elements.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$50`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$50');
```
Your second `td` element should have the text `$50`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$50');
```
Your third `td` element should have the text `$75`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$75');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[2];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -133,13 +172,15 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -163,8 +204,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
--fcc-editable-region--
</tbody>
</table>
<table>
</table>
<table></table>
</div>
</section>
</main>
@@ -16,55 +16,92 @@ Following that, add three `td` elements with the following text (in order): `$75
Your fourth `tr` should have a `th` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Total Liabilities`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.strictEqual(
tableRow?.querySelector('th')?.innerText,
'Total Liabilities'
);
```
You should wrap the text `Liabilities` in a `span` element.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'Liabilities'
);
```
Your `span` element should have the `class` attribute set to `sr-only`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('sr-only')
);
```
You should have three `td` elements.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$750`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$750');
```
Your second `td` element should have the text `$600`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$600');
```
Your third `td` element should have the text `$475`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$475');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const table = document.querySelectorAll('table')?.[1];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[3];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -133,13 +172,15 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -167,8 +208,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
--fcc-editable-region--
</tbody>
</table>
<table>
</table>
<table></table>
</div>
</section>
</main>
@@ -14,37 +14,51 @@ For your third table, add a `caption` with the text `Net Worth`, and set up a ta
Your third `table` element should have a `caption` element.
```js
assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
const table = document.querySelectorAll('table')?.[2];
assert.strictEqual(table?.children?.[0]?.localName, 'caption');
```
Your `caption` element should have the text `Net Worth`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
const table = document.querySelectorAll('table')?.[2];
assert.strictEqual(table?.querySelector('caption')?.textContent, 'Net Worth');
```
Your third `table` element should have a `thead` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
assert.isNotNull(
document.querySelectorAll('table')?.[2]?.querySelector('thead')
);
```
Your third `table` element should have a `tbody` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
assert.isNotNull(
document.querySelectorAll('table')?.[2]?.querySelector('tbody')
);
```
Your `thead` element should be immediately below your `caption` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
const table = document.querySelectorAll('table')?.[2];
assert.strictEqual(
table?.querySelector('caption')?.nextElementSibling?.localName,
'thead'
);
```
Your `tbody` element should be immediately below your `thead` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
const table = document.querySelectorAll('table')?.[2];
assert.strictEqual(
table?.querySelector('thead')?.nextElementSibling?.localName,
'tbody'
);
```
# --seed--
@@ -55,10 +69,10 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -76,7 +90,9 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElem
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -113,13 +129,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElem
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -14,65 +14,84 @@ Within your `thead`, create a `tr` element. In that, add a `td` and three `th` e
Your `thead` element should have a `tr` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
const table = document.querySelectorAll('table')?.[2];
assert.strictEqual(
table?.querySelector('thead')?.children?.[0]?.localName,
'tr'
);
```
Your `tr` element should have a `td` element as the first child.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
const table = document.querySelectorAll('table')?.[2];
assert.strictEqual(table?.querySelector('tr')?.children?.[0]?.localName, 'td');
```
Your `tr` element should have three `th` elements, after the `td` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
const table = document.querySelectorAll('table')?.[2];
const trElement = table?.querySelector('tr');
assert.strictEqual(trElement?.children?.[1]?.localName, 'th');
assert.strictEqual(trElement?.children?.[2]?.localName, 'th');
assert.strictEqual(trElement?.children?.[3]?.localName, 'th');
```
Each of your `th` elements should have a `span` element.
```js
const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
const ths = [
...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')
];
ths?.forEach(th => {
assert(th?.children?.length === 1);
assert(th?.children?.[0]?.localName === 'span');
assert.lengthOf(th?.children, 1);
assert.strictEqual(th?.children?.[0]?.localName, 'span');
});
```
Each of your new `span` elements should have the `class` attribute set to `sr-only`.
```js
const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
const ths = [
...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')
];
ths?.forEach(th => {
assert(th?.children?.[0]?.classList?.contains('sr-only'));
assert.isTrue(th?.children?.[0]?.classList?.contains('sr-only'));
});
```
Your first `span` element should have the text `2019`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
const table = document.querySelectorAll('table')?.[2];
const thead = table.querySelectorAll('th')?.[0];
assert.strictEqual(thead?.children?.[0]?.textContent, '2019');
```
Your second `span` element should have the text `2020`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
const table = document.querySelectorAll('table')?.[2];
const thead = table.querySelectorAll('th')?.[1];
assert.strictEqual(thead?.children?.[0]?.textContent, '2020');
```
Your third `span` element should have the text `2021`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
const table = document.querySelectorAll('table')?.[2];
const thead = table.querySelectorAll('th')?.[2];
assert.strictEqual(thead?.children?.[0]?.textContent, '2021');
```
Your `td` element should be empty.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
const table = document.querySelectorAll('table')?.[2];
const tableData = table?.querySelectorAll('td')?.[0];
assert.strictEqual(tableData?.textContent, '');
assert.isTrue(tableData?.children?.length === 0);
```
# --seed--
@@ -83,10 +102,10 @@ assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.chi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -104,7 +123,9 @@ assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.chi
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -141,13 +162,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.chi
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -16,67 +16,105 @@ Then add three `td` elements, giving the third a `class` set to `current`, and g
Your `tbody` element should have one `tr` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
assert.lengthOf(tbody?.querySelectorAll('tr'), 1);
```
Your `tr` element should have the `class` set to `total`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
assert.isTrue(tbody?.querySelector('tr')?.classList?.contains('total'));
```
Your `tr` should have a `th` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.isNotNull(tableRow?.querySelector('th'));
```
Your `th` element should have the text `Total Net Worth`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelector('th')?.innerText, 'Total Net Worth');
```
You should wrap the text `Net Worth` in a `span` element.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(
tableRow?.querySelector('th > span')?.textContent,
'Net Worth'
);
```
Your `span` element should have the `class` attribute set to `sr-only`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.isTrue(
tableRow?.querySelector('th > span')?.classList?.contains('sr-only')
);
```
You should have three `td` elements.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
```
Your first `td` element should have the text `$-171`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$-171');
```
Your second `td` element should have the text `$136`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$136');
```
Your third `td` element should have the text `$334`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$334');
```
Your third `td` element should have the `class` set to `current`.
```js
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
const table = document.querySelectorAll('table')?.[2];
const tbody = table?.querySelector('tbody');
const tableRow = tbody?.querySelectorAll('tr')?.[0];
assert.isTrue(
tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
);
```
# --seed--
@@ -87,10 +125,10 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -108,7 +146,9 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -145,13 +185,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -183,13 +225,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
</table>
--fcc-editable-region--
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,18 @@ Time to style your table. Start by resetting the box model. Create an `html` sel
You should have an `html` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('html'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('html'));
```
Your `html` selector should have a `box-sizing` property set to `border-box`.
```js
assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('html')
?.getPropertyValue('box-sizing'),
'border-box'
);
```
# --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,27 @@ Create a `body` selector and give it a `font-family` property set to `sans-serif
You should have a `body` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('body'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('body'));
```
Your `body` selector should have a `font-family` property set to `sans-serif`.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('body')
?.getPropertyValue('font-family'),
'sans-serif'
);
```
Your `body` selector should have a `color` property set to `#0a0a23`.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color'),
'rgb(10, 10, 35)'
);
```
# --seed--
@@ -37,10 +45,10 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +66,9 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +105,15 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +144,15 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -11,20 +11,27 @@ Before you get too far into your styling, you should make use of the `sr-only` c
The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
The `span[class~="sr-only"]` selector will select any `span` element whose `class` _includes_ `sr-only`. Create that selector, and give it a `border` property set to `0`.
# --hints--
You should have an `span[class~="sr-only"]` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')
);
```
Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('border-width'),
'0px'
);
```
# --seed--
@@ -35,10 +42,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -56,7 +63,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -93,13 +102,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -130,13 +141,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -16,13 +16,23 @@ The `clip-path` property determines the shape the `clip` property should take. S
Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('clip'),
'rect(1px, 1px, 1px, 1px)'
);
```
Your `span[class~="sr-only"] ` selector should have a `clip-path` property set to `inset(50%)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('clip-path'),
'inset(50%)'
);
```
# --seed--
@@ -33,10 +43,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -54,7 +64,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -91,13 +103,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -128,13 +142,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,23 @@ Now you need to size these elements down. Give your `span[class~="sr-only"]` sel
Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('width'),
'1px'
);
```
Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('height'),
'1px'
);
```
# --seed--
@@ -31,10 +41,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +62,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +101,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +140,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,23 @@ To prevent the text content from overflowing, give your `span[class~="sr-only"]`
Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('overflow'),
'hidden'
);
```
Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('white-space'),
'nowrap'
);
```
# --seed--
@@ -31,10 +41,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +62,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +101,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +140,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,34 @@ Finally, you need to take these hidden elements out of the document flow. Give t
Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('position'),
'absolute'
);
```
Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('padding'),
'0px'
);
```
Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span[class~="sr-only"]')
?.getPropertyValue('margin'),
'-1px'
);
```
# --seed--
@@ -37,10 +52,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +73,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +112,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +151,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,25 +14,34 @@ Time to style your table heading. Create an `h1` selector. Give it a `max-width`
You should have an `h1` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('h1'));
```
Your `h1` selector should have a `max-width` property set to `37.25rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width'),
'37.25rem'
);
```
Your `h1` selector should have a `margin` property set to `0 auto`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin'),
'0px auto'
);
```
Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding'),
'1.5rem 1.25rem'
);
```
# --seed--
@@ -43,10 +52,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -64,7 +73,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -101,13 +112,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -138,13 +151,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,25 +14,38 @@ Target your flex container with an `h1 .flex` selector. Give it a `display` prop
You should have an `h1 .flex` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
```
Your `h1 .flex` selector should have a `display` property set to `flex`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('h1 .flex')
?.getPropertyValue('display'),
'flex'
);
```
Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('h1 .flex')
?.getPropertyValue('flex-direction'),
'column-reverse'
);
```
Your `h1 .flex` selector should have a `gap` property set to `1rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap'),
'1rem'
);
```
# --seed--
@@ -43,10 +56,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -64,7 +77,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -101,13 +116,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -138,13 +155,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -16,13 +16,20 @@ Give your new selector a `font-size` property of `0.7em` to make it look like a
You should have an `h1 .flex span:first-of-type` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')
);
```
Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('h1 .flex span:first-of-type')
?.getPropertyValue('font-size'),
'0.7em'
);
```
# --seed--
@@ -33,10 +40,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -54,7 +61,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -91,13 +100,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -128,13 +139,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,20 @@ The `:last-of-type` pseudo-selector does the exact opposite - it targets the las
You should have an `h1 .flex span:last-of-type` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')
);
```
Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('h1 .flex span:last-of-type')
?.getPropertyValue('font-size'),
'1.2em'
);
```
# --seed--
@@ -31,10 +38,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +59,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +98,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +137,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,25 +14,40 @@ You wrapped your table in a section element - now you can style that to give you
You should have a `section` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('section'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('section'));
```
Your `section` selector should have a `max-width` property set to `40rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('section')
?.getPropertyValue('max-width'),
'40rem'
);
```
Your `section` selector should have a `margin` property set to `0 auto`.
```js
assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('section')
?.getPropertyValue('margin'),
'0px auto'
);
```
Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
```js
assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('section')
?.getPropertyValue('border'),
'2px solid rgb(208, 208, 213)'
);
```
# --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,31 +14,49 @@ The last part of your table heading is your years. Create a `#years` selector, a
You should have a `#years` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('#years'));
```
Your `#years` selector should have a `display` property set to `flex`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years')
?.getPropertyValue('display'),
'flex'
);
```
Your `#years` selector should have a `justify-content` property set to `flex-end`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years')
?.getPropertyValue('justify-content'),
'flex-end'
);
```
Your `#years` selector should have a `position` property set to `sticky`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years')
?.getPropertyValue('position'),
'sticky'
);
```
Your `#years` selector should have a `top` property set to `0`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top'),
'0px'
);
```
# --seed--
@@ -49,10 +67,10 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -70,7 +88,9 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -107,13 +127,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -144,13 +166,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,21 @@ Now apply some color to your `#years`. Make the text `#fff` and the background `
Your `#years` should have a `color` property set to `#fff`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color'),
'rgb(255, 255, 255)'
);
```
Your `#years` should have a `background-color` property set to `#0a0a23`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years')
?.getPropertyValue('background-color'),
'rgb(10, 10, 35)'
);
```
# --seed--
@@ -31,10 +39,10 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +60,9 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +99,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +138,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -23,14 +23,27 @@ Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25re
Your `#years` selector should have a `margin` property set to `0 -2px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years')
?.getPropertyValue('margin'),
'0px -2px'
);
```
Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
```js
const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
const padding = new __helpers.CSSHelp(document)
.getStyle('#years')
?.getPropertyValue('padding');
assert.include(
[
'0.5rem calc(1.25rem + 2px) 0.5rem 0px',
'0.5rem calc(2px + 1.25rem) 0.5rem 0px'
],
padding
);
```
# --seed--
@@ -41,10 +54,10 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -62,7 +75,9 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -99,13 +114,15 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -136,13 +153,15 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -16,25 +16,42 @@ Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to t
You should have a `#years span[class]` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('#years span[class]')
);
```
Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years span[class]')
?.getPropertyValue('font-weight'),
'bold'
);
```
Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years span[class]')
?.getPropertyValue('width'),
'4.5rem'
);
```
Your `#years span[class]` selector should have a `text-align` property set to `right`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('#years span[class]')
?.getPropertyValue('text-align'),
'right'
);
```
# --seed--
@@ -45,10 +62,10 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -66,7 +83,9 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -103,13 +122,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -140,13 +161,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,18 @@ You wrapped your tables in a container with the `table-wrap` class. Create a sel
You should have a `.table-wrap` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
```
Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('.table-wrap')
?.getPropertyValue('padding'),
'0px 0.75rem 1.5rem'
);
```
# --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -16,13 +16,20 @@ The `:not()` pseudo-selector is used to target all elements that do not match th
You should have a `span:not(.sr-only)` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')
);
```
Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span:not(.sr-only)')
?.getPropertyValue('font-weight'),
'normal'
);
```
# --seed--
@@ -33,10 +40,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -54,7 +61,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -91,13 +100,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -128,13 +139,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -17,71 +17,94 @@ Your `span[class~="sr-only"]` selector should have the `border` property set to
```js
// log it
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.isTrue(
text.includes('border: 0px !important;') ||
text.includes('border: 0px none !important')
);
```
Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'clip: rect(1px, 1px, 1px, 1px) !important;');
```
Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('clip-path: inset(50%) !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'clip-path: inset(50%) !important;');
```
Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('height: 1px !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'height: 1px !important;');
```
Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('width: 1px !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'width: 1px !important;');
```
Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('position: absolute !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'position: absolute !important;');
```
Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('overflow: hidden !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'overflow: hidden !important;');
```
Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('white-space: nowrap !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'white-space: nowrap !important;');
```
Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('padding: 0px !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'padding: 0px !important;');
```
Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
```js
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('margin: -1px !important;'));
const text = new __helpers.CSSHelp(document).getStyle(
'span[class~="sr-only"]'
)?.cssText;
assert.include(text, 'margin: -1px !important;');
```
# --seed--
@@ -92,10 +115,10 @@ assert(text.includes('margin: -1px !important;'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -113,7 +136,9 @@ assert(text.includes('margin: -1px !important;'));
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -150,13 +175,15 @@ assert(text.includes('margin: -1px !important;'));
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -187,13 +214,15 @@ assert(text.includes('margin: -1px !important;'));
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,24 @@ Now that you have added the `!important` keyword, you can remove the `:not(.sr-o
You should not have a `span:not(.sr-only)` selector.
```js
assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
assert.isNull(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
```
You should have a `span` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('span'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('span'));
```
You should not change the `font-weight`.
```js
assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('span')
?.getPropertyValue('font-weight'),
'normal'
);
```
# --seed--
@@ -37,10 +42,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +63,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +102,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +141,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,29 @@ Create a `table` selector to target your tables. Set the `border-collapse` prope
You should have a `table` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('table'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('table'));
```
Your `table` selector should have a `border-collapse` property set to `collapse`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table')
?.getPropertyValue('border-collapse'),
'collapse'
);
```
Your `table` selector should have a `border` property set to `0`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table')
?.getPropertyValue('border-width'),
'0px'
);
```
# --seed--
@@ -37,10 +47,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +68,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +107,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +146,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,32 @@ Ensure your table fills its container with a `width` property set to `100%`, the
Your `table` selector should have a `width` property set to `100%`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
assert.strictEqual(
new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width'),
'100%'
);
```
Your `table` selector should have a `position` property set to `relative`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table')
?.getPropertyValue('position'),
'relative'
);
```
Your `table` selector should have a `margin-top` property set to `3rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table')
?.getPropertyValue('margin-top'),
'3rem'
);
```
# --seed--
@@ -37,10 +50,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +71,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +110,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +149,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,25 +14,40 @@ Next you need to style your `caption` elements to look more like headers. Create
You should have a `table caption` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('table caption'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('table caption'));
```
Your `table caption` selector should have a `color` property set to `#356eaf`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table caption')
?.getPropertyValue('color'),
'rgb(53, 110, 175)'
);
```
Your `table caption` selector should have a `font-size` property set to `1.3em`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table caption')
?.getPropertyValue('font-size'),
'1.3em'
);
```
Your `table caption` selector should have a `font-weight` property set to `normal`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table caption')
?.getPropertyValue('font-weight'),
'normal'
);
```
# --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,34 @@ Now give the captions an absolute position, and shift them `-2.25rem` from the t
Your `table caption` selector should have the `position` property set to `absolute`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table caption')
?.getPropertyValue('position'),
'absolute'
);
```
Your `table caption` selector should have the `top` property set to `-2.25rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table caption')
?.getPropertyValue('top'),
'-2.25rem'
);
```
Your `table caption` selector should have the `left` property set to `0.5rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('table caption')
?.getPropertyValue('left'),
'0.5rem'
);
```
# --seed--
@@ -37,10 +52,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +73,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +112,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +151,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,25 +14,40 @@ Create a selector to target your `td` elements within your table body. Give them
You should have a `tbody td` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tbody td'));
```
Your `tbody td` selector should have a `width` property set to `100vw`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tbody td')
?.getPropertyValue('width'),
'100vw'
);
```
Your `tbody td` selector should have a `min-width` property set to `4rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tbody td')
?.getPropertyValue('min-width'),
'4rem'
);
```
Your `tbody td` selector should have a `max-width` property set to `4rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tbody td')
?.getPropertyValue('max-width'),
'4rem'
);
```
# --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,18 @@ Now target the `th` elements within your table body, and give them a width of th
You should have a `tbody th` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tbody th'));
```
Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tbody th')
?.getPropertyValue('width'),
'calc(100% - 12rem)'
);
```
# --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,29 @@ The `[attribute="value"]` selector targets any element that has an attribute wit
You should have a `tr[class="total"]` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
```
Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr[class="total"]')
?.getPropertyValue('border-bottom'),
'4px double rgb(10, 10, 35)'
);
```
Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr[class="total"]')
?.getPropertyValue('font-weight'),
'bold'
);
```
# --seed--
@@ -37,10 +47,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +68,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +107,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +146,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,19 +14,31 @@ Using the same selector syntax, target the `th` elements within your table rows
You should have a `tr[class="total"] th` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')
);
```
Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr[class="total"] th')
?.getPropertyValue('text-align'),
'left'
);
```
Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr[class="total"] th')
?.getPropertyValue('padding'),
'0.5rem 0px 0.25rem 0.5rem'
);
```
# --seed--
@@ -37,10 +49,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -58,7 +70,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -95,13 +109,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -132,13 +148,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -7,7 +7,7 @@ dashedName: step-57
# --description--
The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the _only_ class is `total`. The second will select `tr` elements where the class _includes_ `total`.
In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
@@ -16,19 +16,29 @@ In your case, `tr.total` will work. You can use this selector to target all `td`
You should have a `tr.total td` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.total td'));
```
Your `tr.total td` selector should have a `text-align` property set to `right`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.total td')
?.getPropertyValue('text-align'),
'right'
);
```
Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.total td')
?.getPropertyValue('padding'),
'0px 0.25rem'
);
```
# --seed--
@@ -39,10 +49,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -60,7 +70,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -97,13 +109,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -134,13 +148,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,20 @@ The `:nth-of-type()` pseudo-selector is used to target specific elements based o
You should have a `tr.total td:nth-of-type(3)` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')
);
```
Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.total td:nth-of-type(3)')
?.getPropertyValue('padding-right'),
'0.5rem'
);
```
# --seed--
@@ -31,10 +38,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +59,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +98,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +137,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,13 +14,18 @@ Give your `tr.total` elements a hover effect that changes the background to `#99
You should have a `tr.total:hover` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
```
Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.total:hover')
?.getPropertyValue('background-color'),
'rgb(153, 201, 255)'
);
```
# --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,15 +14,16 @@ Select your `td` elements with the `class` value of `current`, and make the font
You should have a `td.current` selector.
```js
const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert(def('td.current') || def('td[class="current"]'));
const def = s => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(def('td.current') || def('td[class="current"]'));
```
Your `td.current` selector should have the `font-style` property set to `italic`.
```js
const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
assert((font('td.current') || font('td[class="current"]')) === 'italic');
const font = s =>
new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
assert.isTrue((font('td.current') || font('td[class="current"]')) === 'italic');
```
# --seed--
@@ -33,10 +34,10 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -54,7 +55,9 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -91,13 +94,15 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -128,13 +133,15 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,15 +14,21 @@ Select the `tr` elements with the `class` set to `data`. Give them a background
You should have a `tr.data` selector.
```js
const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert(def('tr.data') || def('tr[class="data"]'));
const def = s => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(def('tr.data') || def('tr[class="data"]'));
```
Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
```js
const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
const bg = s =>
new __helpers.CSSHelp(document)
.getStyle(s)
?.getPropertyValue('background-image');
assert.isTrue(
(bg('tr.data') || bg('tr[class="data"]')) ===
'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)'
);
```
# --seed--
@@ -33,10 +39,10 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -54,7 +60,9 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -91,13 +99,15 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -128,13 +138,15 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,25 +14,40 @@ Select the `th` elements within your `tr.data` elements. Align the text to the l
You should have a `tr.data th` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.data th'));
```
Your `tr.data th` selector should have a `text-align` property set to `left`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th')
?.getPropertyValue('text-align'),
'left'
);
```
Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th')
?.getPropertyValue('padding-top'),
'0.3rem'
);
```
Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th')
?.getPropertyValue('padding-left'),
'0.5rem'
);
```
# --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,37 +14,64 @@ Create a `tr.data th .description` selector to target the elements with the `cla
You should have a `tr.data th .description` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('tr.data th .description')
);
```
Your `tr.data th .description` selector should have a `display` property set to `block`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th .description')
?.getPropertyValue('display'),
'block'
);
```
Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th .description')
?.getPropertyValue('font-style'),
'italic'
);
```
Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th .description')
?.getPropertyValue('font-weight'),
'normal'
);
```
Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th .description')
?.getPropertyValue('padding'),
'1rem 0px 0.75rem'
);
```
Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data th .description')
?.getPropertyValue('margin-right'),
'-13.5rem'
);
```
# --seed--
@@ -55,10 +82,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -76,7 +103,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -113,13 +142,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -150,13 +181,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -14,7 +14,7 @@ Your `span` elements now all have more specific styling, which means you can rem
You should not have a `span` selector.
```js
assert(!(new __helpers.CSSHelp(document).getStyle('span')));
assert.isNull(new __helpers.CSSHelp(document).getStyle('span'));
```
# --seed--
@@ -25,10 +25,10 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -46,7 +46,9 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -83,13 +85,15 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -120,13 +124,15 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -146,7 +152,7 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
```
```css
span[class~="sr-only"] {
span[class~='sr-only'] {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
@@ -249,12 +255,12 @@ tbody th {
width: calc(100% - 12rem);
}
tr[class="total"] {
tr[class='total'] {
border-bottom: 4px double #0a0a23;
font-weight: bold;
}
tr[class="total"] th {
tr[class='total'] th {
text-align: left;
padding: 0.5rem 0 0.25rem 0.5rem;
}
@@ -277,7 +283,11 @@ td.current {
}
tr.data {
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
background-image: linear-gradient(
to bottom,
#dfdfe2 1.845rem,
white 1.845rem
);
}
tr.data th {
@@ -14,25 +14,40 @@ Your dollar amounts are currently misaligned. Create a selector to target the `t
You should have a `tr.data td` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.data td'));
```
Your `tr.data td` selector should have a `vertical-align` property set to `top`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data td')
?.getPropertyValue('vertical-align'),
'top'
);
```
Your `tr.data td` selector should have a `text-align` property set to `right`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data td')
?.getPropertyValue('text-align'),
'right'
);
```
Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data td')
?.getPropertyValue('padding'),
'0.3rem 0.25rem 0px'
);
```
# --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -16,13 +16,20 @@ With this, your balance sheet is complete!
You should have a `tr.data td:last-of-type` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
assert.isNotNull(
new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')
);
```
Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
```js
assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
assert.strictEqual(
new __helpers.CSSHelp(document)
.getStyle('tr.data td:last-of-type')
?.getPropertyValue('padding-right'),
'0.5rem'
);
```
# --seed--
@@ -33,10 +40,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -54,7 +61,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -91,13 +100,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -128,13 +139,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -313,10 +326,10 @@ tr.data td {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -334,7 +347,9 @@ tr.data td {
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -371,13 +386,15 @@ tr.data td {
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -408,13 +425,15 @@ tr.data td {
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>
@@ -434,7 +453,7 @@ tr.data td {
```
```css
span[class~="sr-only"] {
span[class~='sr-only'] {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
@@ -531,12 +550,12 @@ tbody th {
width: calc(100% - 12rem);
}
tr[class="total"] {
tr[class='total'] {
border-bottom: 4px double #0a0a23;
font-weight: bold;
}
tr[class="total"] th {
tr[class='total'] th {
text-align: left;
padding: 0.5rem 0 0.25rem 0.5rem;
}
@@ -559,7 +578,11 @@ td.current {
}
tr.data {
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
background-image: linear-gradient(
to bottom,
#dfdfe2 1.845rem,
white 1.845rem
);
}
tr.data th {
@@ -586,4 +609,3 @@ tr.data td:last-of-type {
padding-right: 0.5rem;
}
```
@@ -14,7 +14,12 @@ Adding position `sticky` moved the element into its own stack. To ensure your `#
Your `#years` selector should have a `z-index` property set to `999`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
assert.equal(
new __helpers.CSSHelp(document)
.getStyle('#years')
?.getPropertyValue('z-index'),
'999'
);
```
# --seed--
@@ -25,10 +30,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
@@ -46,7 +51,9 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<caption>
Assets
</caption>
<thead>
<tr>
<td></td>
@@ -83,13 +90,15 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<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>
<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>
@@ -120,13 +129,15 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<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>
<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>