mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
chore(curriculum): use specific asserts workshop balance (#57608)
This commit is contained in:
+6
-6
@@ -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>
|
||||
|
||||
+12
-6
@@ -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>
|
||||
|
||||
+11
-5
@@ -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>
|
||||
|
||||
+24
-10
@@ -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>
|
||||
|
||||
+12
-6
@@ -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>
|
||||
|
||||
+17
-8
@@ -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>
|
||||
|
||||
+10
-8
@@ -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>
|
||||
|
||||
+10
-9
@@ -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>
|
||||
|
||||
+18
-11
@@ -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>
|
||||
|
||||
+26
-14
@@ -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>
|
||||
|
||||
+32
-19
@@ -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>
|
||||
|
||||
+12
-12
@@ -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>
|
||||
|
||||
+48
-23
@@ -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>
|
||||
|
||||
+47
-21
@@ -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>
|
||||
|
||||
+46
-19
@@ -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>
|
||||
|
||||
+38
-17
@@ -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>
|
||||
|
||||
+31
-10
@@ -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
-9
@@ -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>
|
||||
|
||||
+31
-15
@@ -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>
|
||||
|
||||
+27
-18
@@ -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>
|
||||
|
||||
+61
-21
@@ -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>
|
||||
|
||||
+60
-20
@@ -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>
|
||||
|
||||
+60
-20
@@ -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>
|
||||
|
||||
+60
-20
@@ -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>
|
||||
|
||||
+33
-15
@@ -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>
|
||||
|
||||
+47
-24
@@ -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>
|
||||
|
||||
+69
-25
@@ -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>
|
||||
|
||||
+27
-16
@@ -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>
|
||||
|
||||
+31
-17
@@ -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>
|
||||
|
||||
+30
-17
@@ -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>
|
||||
|
||||
+32
-16
@@ -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>
|
||||
|
||||
+32
-16
@@ -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>
|
||||
|
||||
+32
-16
@@ -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>
|
||||
|
||||
+38
-17
@@ -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>
|
||||
|
||||
+33
-18
@@ -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>
|
||||
|
||||
+37
-18
@@ -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>
|
||||
|
||||
+29
-16
@@ -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>
|
||||
|
||||
+29
-16
@@ -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>
|
||||
|
||||
+39
-18
@@ -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>
|
||||
|
||||
+43
-19
@@ -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>
|
||||
|
||||
+30
-16
@@ -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>
|
||||
|
||||
+36
-17
@@ -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>
|
||||
|
||||
+41
-18
@@ -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>
|
||||
|
||||
+27
-16
@@ -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>
|
||||
|
||||
+29
-16
@@ -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>
|
||||
|
||||
+63
-34
@@ -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>
|
||||
|
||||
+28
-17
@@ -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>
|
||||
|
||||
+33
-17
@@ -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>
|
||||
|
||||
+36
-17
@@ -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>
|
||||
|
||||
+39
-18
@@ -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>
|
||||
|
||||
+38
-17
@@ -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>
|
||||
|
||||
+39
-18
@@ -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>
|
||||
|
||||
+27
-16
@@ -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>
|
||||
|
||||
+33
-17
@@ -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>
|
||||
|
||||
+35
-17
@@ -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>
|
||||
|
||||
+34
-18
@@ -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>
|
||||
|
||||
+29
-16
@@ -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>
|
||||
|
||||
+27
-16
@@ -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>
|
||||
|
||||
+25
-18
@@ -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>
|
||||
|
||||
+30
-18
@@ -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>
|
||||
|
||||
+39
-18
@@ -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>
|
||||
|
||||
+53
-20
@@ -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>
|
||||
|
||||
+29
-19
@@ -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 {
|
||||
|
||||
+39
-18
@@ -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>
|
||||
|
||||
+57
-35
@@ -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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
+26
-15
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user