refactor(curriculum): new balance sheet project (#45048)
* refactor: delete existing steps * feat: create new steps * feat: start writing tests * feat: complete html tests * feat: remaining tests * chore: remove "test 1" Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: wow I really botched that find and replace Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> * fix: why firefox gotta be different? * fix: I can maths... * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: unbotch the css oops * fix: acme widget corp * fix: remove z-index * feat: introduce the calc() function * fix: even one more find and replace oops Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
This commit is contained in:
Naomi Carrigan
GitHub
@ -11,212 +11,264 @@
|
||||
"superBlock": "2022/responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"6193d8081ec2531581ea7b98",
|
||||
"61fd5a93fd62bb35968adeab",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"6193da99ca92051a07fb8a13",
|
||||
"61fd6343fb42013d99bcd7f3",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"6193dbfec896f21aed7d8114",
|
||||
"61fd66c687e610436494c6f1",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"6193dc549cb4031bc3a9c4e1",
|
||||
"61fd67a656743144844941cb",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"6193de38b3294e1e378f5bc3",
|
||||
"61fd6ab779390f49148773bb",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"6193de63d0fcab1f0b4112a0",
|
||||
"61fd6b7c83dbf54a08cf0498",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"6193ded40c51662155758987",
|
||||
"61fd6cc9475a784b7776233e",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"6193df854916a52292a23aa9",
|
||||
"61fd70336ebb3e4f62ee81ba",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"6193dfd113955a238da1cc05",
|
||||
"61fd719788899952e67692b9",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"6193e2baa04690265435e25f",
|
||||
"61fd71d596e8f253b9408b39",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"6193e2f62a56dc26fd594b77",
|
||||
"61fd75ea7f663457612dba02",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"6193e3a4916fdb281b791892",
|
||||
"61fd7648a7ba2e5882436831",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"6193e40e67d94029468e6b2d",
|
||||
"61fd778081276b59d59abad6",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"6193e5280857e72be1efc99d",
|
||||
"61fd77f7ad2aeb5ae34d07d6",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"6193e55d97150c2ca7c9458a",
|
||||
"61fd78621573aa5e8b512f5e",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"6193e5946b7ea12d8ce7b1c2",
|
||||
"61fd7a160ed17960e971f28b",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"6193e5d66b67e32e5f0f930e",
|
||||
"61fd7b3fcaa5406257abc5d1",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"6193e7150dc89231b01a3515",
|
||||
"61fd8e491324ce717da97ffe",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"6193e8957e614d3b8eeb770f",
|
||||
"61fd8fd08af43372f02952d0",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6193e8eba043903cf68598cd",
|
||||
"61fd9126aa72a474301fc49f",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"6193e9f7a92e7e3e1810b2f4",
|
||||
"61fd933ba685de776a94997e",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"6193ea793e49253eee1452d1",
|
||||
"61fd94056e0355785fbba4d3",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"6193ece0b46e03423cd66e78",
|
||||
"61fd986ddbcbd47ba8fbc5ec",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"6193ed97ae313e4331c9078a",
|
||||
"61fd990577d8227dd93fbeeb",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"6193ededc017a2443f10429b",
|
||||
"61fd9a4ff2fc4481b9157bd7",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"6193ee19d10be144d6bc9c46",
|
||||
"61fd9ad665a4a282c8106be3",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"6193f5169cdc684f60317783",
|
||||
"61fd9b7285bde783ad5b8aac",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"6193f6615b1bd85076fc5ef2",
|
||||
"61fd9d9fbdfe078800317055",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"6193f7074ca69153347fbc3a",
|
||||
"61fda307bde0b091cf7d884a",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"6193f74b982e4c5449f51a47",
|
||||
"61fda339eadcfd92a6812bed",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"6193f7904dc7ee554d12571f",
|
||||
"61fdac1e31692f9a9ad97295",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"6193f85ab1de4356da678090",
|
||||
"61fdaea3999cb19d76ce717b",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"6193fa3224d7465850407d3d",
|
||||
"61fdaf9ff894b6a084ecdc1b",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"6193fb8bef24145b57fbed00",
|
||||
"61fdafe6f07fd7a1c6785bc2",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"6193fd22d907385efadb59c9",
|
||||
"61fdb04d9939f0a26ca51c2b",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"6193fe24beedd361f34f8e96",
|
||||
"620159cd5431aa34bc6a4c9c",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"6193febd52ffb76345956072",
|
||||
"62015a5da1c95c358f079ebb",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"6193ff2b1198596496b81450",
|
||||
"62015cd2654a1139321a89d2",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"6193ff6c2a6138658b4ce2af",
|
||||
"62015d8942384c3aed48329e",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"6194034278b71f6940a50d91",
|
||||
"620167374bb8b4455cd11125",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"619403dacf51db6a79b47b52",
|
||||
"620174ed519dd7506c1a4b61",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"6194079d7cbf586eba9539ff",
|
||||
"620175b3710a0951cfa86edf",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"619409a3b1ec0b727ac2ab30",
|
||||
"6201782cc420715562f36271",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"61940bfdc4e2a874af766567",
|
||||
"620179bc0a6a2358c72b90ad",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"61940e95c95cff77d0b2a310",
|
||||
"62017b6f47454059bf2d3bd1",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"61940f551fa4db7967451be9",
|
||||
"62017f47c87be96457c49f46",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"6194108c6951ca7cae9596bd",
|
||||
"62017fa5bbef406580ceb44f",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"619410f7040d427d9c782db7",
|
||||
"62018243f046a368fab8ffb6",
|
||||
"Step 48"
|
||||
],
|
||||
[
|
||||
"6194114534b4547e5177cb2a",
|
||||
"6201830cb0c74b69f1b41635",
|
||||
"Step 49"
|
||||
],
|
||||
[
|
||||
"619412990eaf9c80415b280d",
|
||||
"620186f4b6b8356d2def576b",
|
||||
"Step 50"
|
||||
],
|
||||
[
|
||||
"6194135942d5e08174b8bab1",
|
||||
"62018ba1aa263770c953be66",
|
||||
"Step 51"
|
||||
],
|
||||
[
|
||||
"619413f5c1218b82b7b56a60",
|
||||
"62018c3e94434a71af1d5eaa",
|
||||
"Step 52"
|
||||
],
|
||||
[
|
||||
"62018ec29b3ae674f40bef31",
|
||||
"Step 53"
|
||||
],
|
||||
[
|
||||
"62019093fe30e278e797d2f6",
|
||||
"Step 54"
|
||||
],
|
||||
[
|
||||
"620191707bc65579ddd3ce15",
|
||||
"Step 55"
|
||||
],
|
||||
[
|
||||
"620192a767533a7ad19d96d7",
|
||||
"Step 56"
|
||||
],
|
||||
[
|
||||
"6201995d9ab88e80f1989dce",
|
||||
"Step 57"
|
||||
],
|
||||
[
|
||||
"620199c7a7a32c81d4db3410",
|
||||
"Step 58"
|
||||
],
|
||||
[
|
||||
"6201a1a7af32c287bd6b8183",
|
||||
"Step 59"
|
||||
],
|
||||
[
|
||||
"6201a1cc668a34888f5b2f52",
|
||||
"Step 60"
|
||||
],
|
||||
[
|
||||
"6201a20d742f5c89736c8cfb",
|
||||
"Step 61"
|
||||
],
|
||||
[
|
||||
"6201a42e39bf3b95b6a33bf3",
|
||||
"Step 62"
|
||||
],
|
||||
[
|
||||
"6201a4adcc6414968b391592",
|
||||
"Step 63"
|
||||
],
|
||||
[
|
||||
"6201a5258af7b398b030bfaf",
|
||||
"Step 64"
|
||||
],
|
||||
[
|
||||
"6201a59be346d399c21d10b1",
|
||||
"Step 65"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193d8081ec2531581ea7b98
|
||||
id: 61fd5a93fd62bb35968adeab
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
@ -7,9 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
A balance sheet is used to track the state of an organization's finances. You'll be building a mock balance sheet for AcmeWidgetCorp to explore the use of various CSS selectors.
|
||||
|
||||
Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, an `html` element, the appropriate `meta` tags, a `head`, `body`, and `title` element, and `link` your stylesheet. Give the `title` element the text `AcmeWidgetCorp Balance Sheet`.
|
||||
Set up your HTML with the `DOCTYPE`, `html`, `head`, and `body` elements. Give your `head` element the appropriate `meta` elements for the `charset` and `viewport`, a `title` element with an appropriate title, and a `link` element for your stylesheet.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -22,32 +20,32 @@ assert(code.match(/<!DOCTYPE html>/i));
|
||||
Your code should have an `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('html')?.length === 1);
|
||||
assert.equal(document.querySelectorAll('html')?.length, 1);
|
||||
```
|
||||
|
||||
Your code should have a `head` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('head')?.length === 1);
|
||||
assert.equal(document.querySelectorAll('head')?.length, 1);
|
||||
```
|
||||
|
||||
Your code should have a `body` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('body')?.length === 1);
|
||||
assert.equal(document.querySelectorAll('body')?.length, 1);
|
||||
```
|
||||
|
||||
Your `head` element should come before your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.previousElementSibling?.tagName === 'HEAD');
|
||||
assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD');
|
||||
```
|
||||
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
assert.equal(meta?.length, 2);
|
||||
```
|
||||
|
||||
One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
|
||||
@ -73,18 +71,11 @@ const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your project should have a title of `AcmeWidgetCorp Balance Sheet`.
|
||||
Your `title` should have some text.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'acmewidgetcorp balance sheet')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matter for the title.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'AcmeWidgetCorp Balance Sheet');
|
||||
assert.isAtLeast(title?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Your code should have a `link` element.
|
||||
@ -93,28 +84,28 @@ Your code should have a `link` element.
|
||||
assert(/<link/.test(code))
|
||||
```
|
||||
|
||||
Your `href` attribute should have the value `./styles.css`.
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
assert(/href\s*=\s*('|")(\.\/)?styles\.css\1/.test(code));
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
Your `rel` attribute should have the value `stylesheet`.
|
||||
Your `link` element should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(/rel\s*=\s*('|")\s*stylesheet\s*\1/.test(code));
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
Your `type` attribute should have the value `text/css`.
|
||||
Your `link` element should have a `type` attribute with the value `text/css`.
|
||||
|
||||
```js
|
||||
assert(/type\s*=\s*('|")\s*text\/css\s*\1/.test(code));
|
||||
assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have `href="./styles.css"`, `rel="stylesheet"`, and `type="text/css"` attributes
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert(/<link\s+(href\s*=\s*("|')(\.\/)?styles\.css\2\s*(rel\s*=\s*('|")\s*stylesheet\s*\5\s*type\s*=\s*("|')text\/css\6|type\s*=\s*("|')text\/css\7\s*rel\s*=\s*('|")\s*stylesheet\s*\8)|rel\s*=\s*('|")\s*stylesheet\s*\9\s*(href\s*=\s*("|')(\.\/)?styles\.css\11\s*type\s*=\s*("|')text\/css\13|type\s*=\s*("|')text\/css\14\s*href\s*=\s*("|')(\.\/)?styles\.css\15)|type\s*=\s*("|')text\/css\17\s*(href\s*=\s*("|')(\.\/)?styles\.css\19\s*rel\s*=\s*('|")\s*stylesheet\s*\21|rel\s*=\s*('|")\s*stylesheet\s*\22\s*href\s*=\s*("|')(\.\/)?styles\.css\23))\s*\/?>/.test(code));
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193da99ca92051a07fb8a13
|
||||
id: 61fd6343fb42013d99bcd7f3
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
@ -7,50 +7,20 @@ dashedName: step-2
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `body` element, create a `div` element with the `id` set to `sheet`. Below that, create a `footer` element with the text set to `Last Updated: December 2021`.
|
||||
Within your `body` element, nest a `section` element within a `main` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element.
|
||||
The first element inside the `body` element should be your `main` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')?.length === 1);
|
||||
assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
|
||||
```
|
||||
|
||||
Your new `div` element should be within your `body` element.
|
||||
You should have a `section` element within your `main` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
Your new `div` element should have an `id` attribute set to `sheet`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.getAttribute('id') === 'sheet');
|
||||
```
|
||||
|
||||
You should create a new `footer` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('footer')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `footer` element should be within your `body` element.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('footer')?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
Your `footer` element should come after your `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer')?.previousElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
Your `footer` element should have the text `Last Updated: December 2021`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer')?.textContent === 'Last Updated: December 2021');
|
||||
assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -61,10 +31,10 @@ assert(document.querySelector('footer')?.textContent === 'Last Updated: December
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193dbfec896f21aed7d8114
|
||||
id: 61fd66c687e610436494c6f1
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
@ -7,20 +7,20 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `#sheet` element, create a new `div` and give it an `id` set to `header`.
|
||||
Within your `section` element, add an `h1` element with a nested `span` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
Your `section` element should have an `h1` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#sheet > div')?.length === 1);
|
||||
assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
|
||||
```
|
||||
|
||||
Your new `div` element should have an `id` attribute set to `header`.
|
||||
Your `h1` element should have a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet > div')?.getAttribute('id') === 'header');
|
||||
assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,17 +31,18 @@ assert(document.querySelector('#sheet > div')?.getAttribute('id') === 'header');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<div id="sheet">
|
||||
</div>
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193dc549cb4031bc3a9c4e1
|
||||
id: 61fd67a656743144844941cb
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
@ -7,38 +7,42 @@ dashedName: step-4
|
||||
|
||||
# --description--
|
||||
|
||||
In your `#header` element, create an `h1` element with the text `Balance Sheet` and an `h2` element with the text `AcmeWidgetCorp`.
|
||||
Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
|
||||
|
||||
Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h1` element within your `#header` element.
|
||||
Your existing span element should have the `class` attribute set to `flex`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > h1')?.length === 1);
|
||||
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
|
||||
```
|
||||
|
||||
Your new `h1` element should have the text `Balance Sheet`.
|
||||
Your existing `span` element should have two new `span` elements within it.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h1')?.textContent === 'Balance Sheet');
|
||||
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
|
||||
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
|
||||
```
|
||||
|
||||
You should create a new `h2` element within your `#header` element.
|
||||
Your new `span` elements should not have a `class` attribute.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > h2')?.length === 1);
|
||||
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
|
||||
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `AcmeWidgetCorp`.
|
||||
Your first new `span` element should have the text `AcmeWidgetCorp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h2')?.textContent === 'AcmeWidgetCorp');
|
||||
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
|
||||
```
|
||||
|
||||
Your `h1` element should come before your `h2` element.
|
||||
Your second new `span` element should have the text `Balance Sheet`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h1')?.nextElementSibling?.localName === 'h2');
|
||||
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -49,19 +53,22 @@ assert(document.querySelector('#header > h1')?.nextElementSibling?.localName ===
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
--fcc-editable-region--
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
</span>
|
||||
--fcc-editable-region--
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</h1>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193de38b3294e1e378f5bc3
|
||||
id: 61fd6ab779390f49148773bb
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
@ -7,32 +7,26 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `h2` element, create a `p` element with the `class` set to `row`. In that new element, create three `span` elements.
|
||||
Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element within your `#header` element.
|
||||
You should create a new `div` element after your `h1` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > p')?.length === 1);
|
||||
assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
Your `p` element should come after your `h2` element.
|
||||
Your new `div` element should have an `id` attribute set to `years`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h2')?.nextElementSibling?.localName === 'p');
|
||||
assert(document.querySelector('div')?.getAttribute('id') === 'years');
|
||||
```
|
||||
|
||||
Your new `p` element should have a `class` attribute set to `row`.
|
||||
Your new `div` element should have the `aria-hidden` attribute set to `true`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > p')?.classList?.contains('row'));
|
||||
```
|
||||
|
||||
Your `.row` element should have 3 `span` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > .row > span')?.length === 3);
|
||||
assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -43,21 +37,25 @@ assert(document.querySelectorAll('#header > .row > span')?.length === 3);
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
--fcc-editable-region--
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193de63d0fcab1f0b4112a0
|
||||
id: 61fd6b7c83dbf54a08cf0498
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
@ -7,26 +7,39 @@ dashedName: step-6
|
||||
|
||||
# --description--
|
||||
|
||||
Give the first `span` element the text `2019`, the second the text `2020`, and the third the text `2021`. Also give the third `span` a `class` set to `current`.
|
||||
Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `span` element should have the text `2019`.
|
||||
Your `div` element should have three `span` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > .row > span')?.[0]?.textContent === '2019');
|
||||
assert(document.querySelector('div')?.children?.length === 3);
|
||||
```
|
||||
|
||||
Your second `span` element should have the text `2020`.
|
||||
Each `span` element should have a `class` attribute set to `year`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > .row > span')?.[1]?.textContent === '2020');
|
||||
const spans = [...document.querySelector('div')?.children];
|
||||
spans.forEach(span => assert(span?.classList?.contains('year')));
|
||||
```
|
||||
|
||||
Your third `span` element should have the text `2021`.
|
||||
Your first `span` should have the text `2019`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > .row > span')?.[2]?.textContent === '2021');
|
||||
assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
|
||||
```
|
||||
|
||||
Your second `span` should have the text `2020`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
|
||||
```
|
||||
|
||||
Your third `span` should have the text `2021`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -37,26 +50,26 @@ assert(document.querySelectorAll('#header > .row > span')?.[2]?.textContent ===
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
--fcc-editable-region--
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</p>
|
||||
<div id="years" aria-hidden="true">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ded40c51662155758987
|
||||
id: 61fd6cc9475a784b7776233e
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
@ -7,44 +7,36 @@ dashedName: step-7
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `#header` element, create an `h2` element with the text `Assets`, followed by a `div` element with the `class` set to `section`.
|
||||
Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
|
||||
|
||||
Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h2` element within your `#sheet` element.
|
||||
You should create a new `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#sheet > h2')?.length === 1);
|
||||
assert(document.querySelectorAll('div')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `h2` element should come after your `#header` element.
|
||||
Your new `div` element should have the `class` set to `table-wrap`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet > h2')?.previousElementSibling?.localName === 'div');
|
||||
assert(document.querySelector('.table-wrap')?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Assets`.
|
||||
Your `.table-wrap` element should come after your existing `div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet > h2')?.textContent === 'Assets');
|
||||
assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
|
||||
```
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
Your `.table-wrap` element should have three `table` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#sheet > div')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` attribute set to `section`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#sheet > div')?.[1]?.classList?.contains('section'));
|
||||
```
|
||||
|
||||
Your new `div` element should come after your new `h2` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet > .section')?.previousElementSibling?.localName === 'h2');
|
||||
const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
|
||||
assert(children?.length === 3);
|
||||
children.forEach(child => assert(child?.localName === 'table'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -55,27 +47,30 @@ assert(document.querySelector('#sheet > .section')?.previousElementSibling?.loca
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193df854916a52292a23aa9
|
||||
id: 61fd70336ebb3e4f62ee81ba
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
@ -7,38 +7,22 @@ dashedName: step-8
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `.section` element, create a `p` element with the `class` set to `row`, followed by a `span` element with the `class` set to `notes`.
|
||||
HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
|
||||
|
||||
Add a `caption` element to your first `table`, and give it the text `Assets`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element within your `.section` element.
|
||||
Your first `table` element should have a `caption` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.length === 1);
|
||||
assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
|
||||
```
|
||||
|
||||
Your new `p` element should have a `class` attribute set to `row`.
|
||||
Your `caption` element should have the text `Assets`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.section > p')?.classList?.contains('row'));
|
||||
```
|
||||
|
||||
You should create a new `span` element within your `.section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > span')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `span` element should have a `class` attribute set to `notes`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.section > span')?.classList?.contains('notes'));
|
||||
```
|
||||
|
||||
Your `p` element should come before your `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.section > p')?.nextElementSibling?.localName === 'span');
|
||||
assert(document.querySelector('caption')?.textContent === 'Assets');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -49,30 +33,37 @@ assert(document.querySelector('.section > p')?.nextElementSibling?.localName ===
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
<table>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193dfd113955a238da1cc05
|
||||
id: 61fd719788899952e67692b9
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
@ -7,45 +7,34 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
Copy the `.row` and `.notes` elements and paste two more sets, so that your `.section` has three of each.
|
||||
The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
|
||||
|
||||
Add a `thead` and `tbody` to your first `table`, below the `caption` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three `.row` elements.
|
||||
Your first `table` element should have a `thead` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.row').length === 4);
|
||||
assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
|
||||
```
|
||||
|
||||
You should have three `.notes` elements.
|
||||
Your first `table` element should have a `tbody` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.notes').length === 3);
|
||||
assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
|
||||
```
|
||||
|
||||
Your `.row` elements should all be within your `.section` element.
|
||||
Your `thead` element should be immediately below your `caption` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row').length === 3);
|
||||
assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
|
||||
```
|
||||
|
||||
Your `.notes` elements should all be within your `.section` element.
|
||||
Your `tbody` element should be immediately below your `thead` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .notes').length === 3);
|
||||
```
|
||||
|
||||
Your `.row` and `.notes` elements should be in the correct order.
|
||||
|
||||
```js
|
||||
const children = document.querySelector('.section')?.children;
|
||||
assert(children?.length === 6);
|
||||
assert(children?.[0]?.classList?.contains('row'));
|
||||
assert(children?.[1]?.classList?.contains('notes'));
|
||||
assert(children?.[2]?.classList?.contains('row'));
|
||||
assert(children?.[3]?.classList?.contains('notes'));
|
||||
assert(children?.[4]?.classList?.contains('row'));
|
||||
assert(children?.[5]?.classList?.contains('notes'));
|
||||
assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -56,31 +45,38 @@ assert(children?.[5]?.classList?.contains('notes'));
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
</div>
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e2baa04690265435e25f
|
||||
id: 61fd71d596e8f253b9408b39
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
@ -7,27 +7,30 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Below the final `.notes` element, create a `p` element with a `class` of `row` and `total`.
|
||||
The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
|
||||
|
||||
The `td` element indicates a data cell, while the `th` element indicates a header cell.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element within your `.section` element.
|
||||
Your `thead` element should have a `tr` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.length === 4);
|
||||
assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
|
||||
```
|
||||
|
||||
Your new `p` element should have a `class` attribute set to `row total`.
|
||||
Your `tr` element should have a `td` element as the first child.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.[3]?.classList?.contains('row'));
|
||||
assert(document.querySelectorAll('.section > p')?.[3]?.classList?.contains('total'));
|
||||
assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
|
||||
```
|
||||
|
||||
Your new `p` element should be the last element in the `.section` element.
|
||||
Your `tr` element should have three `th` elements, after the `td` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.[3]?.nextElementSibling === null);
|
||||
assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
|
||||
assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
|
||||
assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -38,35 +41,42 @@ assert(document.querySelectorAll('.section > p')?.[3]?.nextElementSibling === nu
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
</div>
|
||||
<thead>
|
||||
</thead>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e2f62a56dc26fd594b77
|
||||
id: 61fd75ea7f663457612dba02
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
@ -7,26 +7,63 @@ dashedName: step-11
|
||||
|
||||
# --description--
|
||||
|
||||
Within your first `.row` element, create four `span` elements. Give the first `span` a `class` set to `name`, and the last `span` a `class` set to `current`.
|
||||
Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
|
||||
|
||||
Give your third `th` element the `class` attribute set to `current`.
|
||||
|
||||
Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `.row` element (in your `.section` element) should have four `span` elements.
|
||||
Each of your `th` elements should have a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row > span')?.length === 4);
|
||||
const ths = [...document.querySelectorAll('th')];
|
||||
ths?.forEach(th => {
|
||||
assert(th?.children?.length === 1);
|
||||
assert(th?.children?.[0]?.localName === 'span');
|
||||
});
|
||||
```
|
||||
|
||||
Your first new `span` element should have a `class` attribute set to `name`.
|
||||
Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row > span')?.[0]?.classList?.contains('name'));
|
||||
const ths = [...document.querySelectorAll('th')];
|
||||
ths?.forEach(th => {
|
||||
assert(th?.children?.[0]?.classList?.contains('sr-only'));
|
||||
assert(th?.children?.[0]?.classList?.contains('year'));
|
||||
});
|
||||
```
|
||||
|
||||
Your last new `span` element should have a `class` attribute set to `current`.
|
||||
Your first `span` element should have the text `2019`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row > span')?.[3]?.classList?.contains('current'));
|
||||
assert(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');
|
||||
```
|
||||
|
||||
Your third `span` element should have the text `2021`.
|
||||
|
||||
```js
|
||||
assert(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'));
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -37,38 +74,48 @@ assert(document.querySelectorAll('.section > .row > span')?.[3]?.classList?.cont
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
|
||||
</p>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
--fcc-editable-region--
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total"></p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e3a4916fdb281b791892
|
||||
id: 61fd7648a7ba2e5882436831
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
@ -7,35 +7,34 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
Copy the four `span` elements within your `.row` element, and paste them into your other three `.row` elements within your `.section` element.
|
||||
Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second `.row` element should have the four `span` elements.
|
||||
Your `tbody` element should have four `tr` elements.
|
||||
|
||||
```js
|
||||
const target = document.querySelectorAll('.section > .row')[1];
|
||||
assert(target?.querySelectorAll('span')?.length === 4);
|
||||
assert(target?.querySelectorAll('span')?.[0]?.classList?.contains('name'));
|
||||
assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
|
||||
const children = [...document.querySelector('tbody')?.children];
|
||||
assert(children?.length === 4);
|
||||
children.forEach(child => assert(child?.localName === 'tr'));
|
||||
```
|
||||
|
||||
Your third `.row` element should have the four `span` elements.
|
||||
Your first three `tr` elements should have the `class` attribute set to `data`.
|
||||
|
||||
```js
|
||||
const target = document.querySelectorAll('.section > .row')[2];
|
||||
assert(target?.querySelectorAll('span')?.length === 4);
|
||||
assert(target?.querySelectorAll('span')?.[0]?.classList?.contains('name'));
|
||||
assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
|
||||
const children = [...document.querySelector('tbody')?.children];
|
||||
children.forEach((child, index) => {
|
||||
if (index < 3) {
|
||||
assert(child?.classList?.contains('data'));
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Your fourth `.row` element (your `.row total` element) should have the four `span` elements.
|
||||
Your fourth `tr` element should have the `class` attribute set to `total`.
|
||||
|
||||
```js
|
||||
const target = document.querySelectorAll('.section > .row')[3];
|
||||
assert(target?.querySelectorAll('span')?.length === 4);
|
||||
assert(target?.querySelectorAll('span')?.[0]?.classList?.contains('name'));
|
||||
assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
|
||||
const children = [...document.querySelector('tbody')?.children];
|
||||
assert(children?.[3]?.classList?.contains('total'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -46,41 +45,48 @@ assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total"></p>
|
||||
<tbody>
|
||||
</tbody>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e40e67d94029468e6b2d
|
||||
id: 61fd778081276b59d59abad6
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
@ -7,32 +7,64 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.section` element, create another `h2` element with the text `Liabilities`. Following that, create another `div` with the `class` set to `section`.
|
||||
In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash ` in a `span` element with the `class` set to `description`.
|
||||
|
||||
Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h2` element below your existing `.section` element.
|
||||
Your first `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.section')?.nextElementSibling?.localName === 'h2');
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Liabilities`.
|
||||
Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.section')?.nextElementSibling?.textContent === 'Liabilities');
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
|
||||
```
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.localName === 'div');
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` attribute set to `section`.
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('section'));
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
|
||||
```
|
||||
|
||||
Your first `td` element should have the text `$25`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.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');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$28`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -43,57 +75,56 @@ assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
--fcc-editable-region--
|
||||
|
||||
<tr class="data">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e5280857e72be1efc99d
|
||||
id: 61fd77f7ad2aeb5ae34d07d6
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
@ -7,48 +7,64 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
Copy the entire contents of your first `.section` element and paste them into your second `.section` element.
|
||||
In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking `, in a `span` element with the `class` attribute set to `description`.
|
||||
|
||||
Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second `.section` element should have four `p` elements.
|
||||
Your second `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p')?.length === 4);
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
|
||||
```
|
||||
|
||||
Your second `.section` element should have three `p` elements with the class set to `row`.
|
||||
Your `th` element should have the text `Checking Our primary transactional account.`.
|
||||
|
||||
```js
|
||||
const ps = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p'));
|
||||
assert(ps?.filter?.(p => p?.classList?.contains('row') && !p?.classList?.contains('total'))?.length === 3);
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
|
||||
```
|
||||
|
||||
Your second `.section` element should have a `p` element with the class `row` and `total`.
|
||||
You should wrap the text `Our primary transactional account.` in a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row.total')?.length === 1);
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
|
||||
```
|
||||
|
||||
Your `.row` elements should each have four `span` elements.
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
|
||||
```js
|
||||
const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
|
||||
assert(rows?.every?.(row => row?.querySelectorAll('span')?.length === 4));
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
Within each `.row` element, your first `span` element should have the class set to `name`.
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
|
||||
assert(rows?.every?.(row => row?.querySelectorAll('span')?.[0]?.classList?.contains('name')));
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
|
||||
```
|
||||
|
||||
Within each `.row` element, your last `span` element should have the class set to `current`.
|
||||
Your first `td` element should have the text `$54`.
|
||||
|
||||
```js
|
||||
const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
|
||||
assert(rows?.every?.(row => row?.querySelectorAll('span')?.[3]?.classList?.contains('current')));
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.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');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$53`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -59,60 +75,60 @@ assert(rows?.every?.(row => row?.querySelectorAll('span')?.[3]?.classList?.conta
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e55d97150c2ca7c9458a
|
||||
id: 61fd78621573aa5e8b512f5e
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
@ -7,32 +7,64 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
Below your second `.section` element, create another `h2` element with the text `Net Worth`. Follow that with a `div` element with the `class` set to `section`.
|
||||
In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings `, in a `span` element with the `class` attribute set to `description`.
|
||||
|
||||
Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h2` element below your second `.section` element.
|
||||
Your third `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.nextElementSibling?.localName === 'h2');
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Net Worth`.
|
||||
Your `th` element should have the text `Savings Funds set aside for emergencies.`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.nextElementSibling?.textContent === 'Net Worth');
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
|
||||
```
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
You should wrap the text `Funds set aside for emergencies.` in a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.localName === 'div');
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` attribute set to `section`.
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('section'));
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
|
||||
```
|
||||
|
||||
Your first `td` element should have the text `$500`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.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');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$728`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -43,87 +75,64 @@ assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
|
||||
<tr class="data">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e5946b7ea12d8ce7b1c2
|
||||
id: 61fd7a160ed17960e971f28b
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
@ -7,27 +7,58 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Copy one of your `.row total` elements, with its contents, and paste that into your third `.section` element. Do not copy the other elements.
|
||||
In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
|
||||
|
||||
Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your third `.section` element should have a `.row total` element.
|
||||
Your fourth `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total'));
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
|
||||
```
|
||||
|
||||
Your new `.row total` element should match the other `.row total` elements.
|
||||
Your `th` element should have the text `Total Assets`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(document.querySelectorAll('.row.total')?.[0]?.innerHTML, document.querySelectorAll('.row.total')?.[2]?.innerHTML);
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
|
||||
```
|
||||
|
||||
Your third `.section` element should not have any other elements within it.
|
||||
You should wrap the text `Assets` in a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.previousElementSibling === null);
|
||||
assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.nextElementSibling === null);
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > 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'));
|
||||
```
|
||||
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
|
||||
```
|
||||
|
||||
Your first `td` element should have the text `$579`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
|
||||
```
|
||||
|
||||
Your second `td` element should have the text `$736`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$809`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -38,90 +69,68 @@ assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e5d66b67e32e5f0f930e
|
||||
id: 61fd7b3fcaa5406257abc5d1
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
@ -7,43 +7,44 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can start filling in the data. In your first `.row` element, give the `span` elements the following text values in order: `Cash`, `$25`, `$30`, and `$28`. Give the following `.notes` element the text `This is the cash we currently have on hand.`.
|
||||
Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Cash`.
|
||||
Your second `table` element should have a `caption` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Cash');
|
||||
assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$25`.
|
||||
Your `caption` element should have the text `Liabilities`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$25');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$30`.
|
||||
Your second `table` element should have a `thead` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$30');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$28`.
|
||||
Your second `table` element should have a `tbody` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$28');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
|
||||
```
|
||||
|
||||
Your first `.notes` element should have the text `This is the cash we currently have on hand.`.
|
||||
Your `thead` element should be immediately below your `caption` element.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[0];
|
||||
assert(notes?.textContent === 'This is the cash we currently have on hand.');
|
||||
assert(document.querySelectorAll('table')?.[1]?.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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -54,95 +55,72 @@ assert(notes?.textContent === 'This is the cash we currently have on hand.');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<table>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e7150dc89231b01a3515
|
||||
id: 61fd8e491324ce717da97ffe
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
@ -7,43 +7,28 @@ dashedName: step-18
|
||||
|
||||
# --description--
|
||||
|
||||
In your second `.row` element, give the `span` elements the following text values in order: `Checking`, `$54`, `$56`, and `$53`. Give the following `.notes` element the text `Our primary transactional account.`.
|
||||
Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Checking`.
|
||||
Your `thead` element should have a `tr` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[1];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Checking');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$54`.
|
||||
Your `tr` element should have a `td` element as the first child.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[1];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$54');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$56`.
|
||||
Your `tr` element should have three `th` elements, after the `td` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[1];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$56');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$53`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[1];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$53');
|
||||
```
|
||||
|
||||
Your second `.notes` element should have the text `Our primary transactional account.`.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[1];
|
||||
assert(notes?.textContent === 'Our primary transactional account.');
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -54,95 +39,77 @@ assert(notes?.textContent === 'Our primary transactional account.');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e8957e614d3b8eeb770f
|
||||
id: 61fd8fd08af43372f02952d0
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
@ -7,43 +7,52 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
In your third `.row` element, give the `span` elements the following text values in order: `Savings`, `$500`, `$650`, and `$728`. Give the following `.notes` element the text `Funds set aside for emergencies.`.
|
||||
Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Savings`.
|
||||
Each of your `th` elements should have a `span` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Savings');
|
||||
const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
|
||||
ths?.forEach(th => {
|
||||
assert(th?.children?.length === 1);
|
||||
assert(th?.children?.[0]?.localName === 'span');
|
||||
});
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$500`.
|
||||
Each of your new `span` elements should have the `class` attribute set to `sr-only`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$500');
|
||||
const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
|
||||
ths?.forEach(th => {
|
||||
assert(th?.children?.[0]?.classList?.contains('sr-only'));
|
||||
});
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$650`.
|
||||
Your first `span` element should have the text `2019`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$650');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$728`.
|
||||
Your second `span` element should have the text `2020`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$728');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
|
||||
```
|
||||
|
||||
Your third `.notes` element should have the text `Funds set aside for emergencies.`.
|
||||
Your third `span` element should have the text `2021`.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[2];
|
||||
assert(notes?.textContent === 'Funds set aside for emergencies.');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.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);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -54,95 +63,83 @@ assert(notes?.textContent === 'Funds set aside for emergencies.');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e8eba043903cf68598cd
|
||||
id: 61fd9126aa72a474301fc49f
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
@ -7,36 +7,34 @@ dashedName: step-20
|
||||
|
||||
# --description--
|
||||
|
||||
In your first `.row total` element, give the `span` elements within the following text, in order: `Total`, `$579`, `$736`, and `$809`.
|
||||
Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Total`.
|
||||
Your `tbody` element should have four `tr` elements.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[3];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
|
||||
const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
|
||||
assert(children?.length === 4);
|
||||
children.forEach(child => assert(child?.localName === 'tr'));
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$579`.
|
||||
Your first three `tr` elements should have the `class` attribute set to `data`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[3];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$579');
|
||||
const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
|
||||
children.forEach((child, index) => {
|
||||
if (index < 3) {
|
||||
assert(child?.classList?.contains('data'));
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$736`.
|
||||
Your fourth `tr` element should have the `class` attribute set to `total`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[3];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$736');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$809`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[3];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$809');
|
||||
const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
|
||||
assert(children?.[3]?.classList?.contains('total'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -47,95 +45,83 @@ assert(row?.querySelectorAll('span')?.[3]?.textContent === '$809');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193e9f7a92e7e3e1810b2f4
|
||||
id: 61fd933ba685de776a94997e
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
@ -7,43 +7,64 @@ dashedName: step-21
|
||||
|
||||
# --description--
|
||||
|
||||
Now move on to your second `.section` element. In the first `.row` there, give the `span` elements the following text in order: `Loans`, `$500`, `$250`, `$0`. Give the `.notes` element below it the text `The outstanding balance on our startup loan.`.
|
||||
Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans `, within a `span` element with the `class` set to `description`.
|
||||
|
||||
Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Loans`.
|
||||
Your first `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Loans');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$500`.
|
||||
Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$500');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$250`.
|
||||
You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$250');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$0`.
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$0');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
Your fourth `.notes` element should have the text `The outstanding balance on our startup loan.`.
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[3];
|
||||
assert(notes?.textContent === 'The outstanding balance on our startup loan.');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -54,95 +75,91 @@ assert(notes?.textContent === 'The outstanding balance on our startup loan.');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ea793e49253eee1452d1
|
||||
id: 61fd94056e0355785fbba4d3
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
@ -7,43 +7,64 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `span` elements within your sixth `.row` element the following text, in order: `Expenses`, `$200`, `$300`, and `$400`. Then give the following `.notes` element the text `Annual anticipated expenses, such as payroll.`.
|
||||
Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses `, within a `span` element with the `class` set to `description`.
|
||||
|
||||
Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Expenses`.
|
||||
Your second `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Expenses');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$200`.
|
||||
Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$200');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$300`.
|
||||
You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$300');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$400`.
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$400');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
Your fifth `.notes` element should have the text `Annual anticipated expenses, such as payroll.`.
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[4];
|
||||
assert(notes?.textContent === 'Annual anticipated expenses, such as payroll.');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -54,95 +75,95 @@ assert(notes?.textContent === 'Annual anticipated expenses, such as payroll.');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ece0b46e03423cd66e78
|
||||
id: 61fd986ddbcbd47ba8fbc5ec
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
@ -7,43 +7,64 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
For your seventh `.row` element, give the `span` elements the following text, in order: `Credit`, `$50`, `$50`, and `$75`. Give the `.notes` element below it the text `The running balance on our line of credit.`.
|
||||
Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit `, within a `span` element with the `class` set to `description`.
|
||||
|
||||
Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Credit`.
|
||||
Your third `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Credit');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$50`.
|
||||
Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$50');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$50`.
|
||||
You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$50');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$75`.
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$75');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
Your fifth `.notes` element should have the text `The running balance on our line of credit.`.
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[5];
|
||||
assert(notes?.textContent === 'The running balance on our line of credit.');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -54,95 +75,99 @@ assert(notes?.textContent === 'The running balance on our line of credit.');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
</tr>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ed97ae313e4331c9078a
|
||||
id: 61fd990577d8227dd93fbeeb
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
@ -7,36 +7,64 @@ dashedName: step-24
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `span` elements within your second `.row total` element the following text, in order: `Total`, `$750`, `$600`, and `$475`.
|
||||
In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
|
||||
|
||||
Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Total`.
|
||||
Your fourth `tr` should have a `th` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$750`.
|
||||
Your `th` element should have the text `Total Liabilities`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$750');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$600`.
|
||||
You should wrap the text `Liabilities` in a `span` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$600');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$475`.
|
||||
Your `span` element should have the `class` attribute set to `sr-only`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$475');
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.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);
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -47,95 +75,103 @@ assert(row?.querySelectorAll('span')?.[3]?.textContent === '$475');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ededc017a2443f10429b
|
||||
id: 61fd9a4ff2fc4481b9157bd7
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
@ -7,36 +7,44 @@ dashedName: step-25
|
||||
|
||||
# --description--
|
||||
|
||||
In your final `.row total` element, give the `span` elements the following text, in order: `Total`, `-$171`, `$136`, and `$334`.
|
||||
For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Total`.
|
||||
Your third `table` element should have a `caption` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
|
||||
assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `-$171`.
|
||||
Your `caption` element should have the text `Net Worth`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '-$171');
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$136`.
|
||||
Your third `table` element should have a `thead` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$136');
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$334`.
|
||||
Your third `table` element should have a `tbody` element.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$334');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
Your `tbody` element should be immediately below your `thead` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -47,95 +55,107 @@ assert(row?.querySelectorAll('span')?.[3]?.textContent === '$334');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<table>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ee19d10be144d6bc9c46
|
||||
id: 61fd9ad665a4a282c8106be3
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
@ -7,22 +7,72 @@ dashedName: step-26
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have all of the financial data in place, you need to style your balance sheet so it looks visually appealing.
|
||||
|
||||
Start by creating a `body` selector, and give it a `text-align` property set to `center`.
|
||||
Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `body` selector.
|
||||
Your `thead` element should have a `tr` element.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
|
||||
```
|
||||
|
||||
Your `body` selector should have a `text-align` property set to `center`.
|
||||
Your `tr` element should have a `td` element as the first child.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.textAlign === 'center');
|
||||
assert(document.querySelectorAll('table')?.[2]?.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');
|
||||
```
|
||||
|
||||
Each of your `th` elements should have a `span` element.
|
||||
|
||||
```js
|
||||
const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
|
||||
ths?.forEach(th => {
|
||||
assert(th?.children?.length === 1);
|
||||
assert(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')];
|
||||
ths?.forEach(th => {
|
||||
assert(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');
|
||||
```
|
||||
|
||||
Your second `span` element should have the text `2020`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.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');
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,99 +83,116 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.textAlign === 'center')
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193f5169cdc684f60317783
|
||||
id: 61fd9b7285bde783ad5b8aac
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
@ -7,20 +7,76 @@ dashedName: step-27
|
||||
|
||||
# --description--
|
||||
|
||||
The browser defaults for font and color are not ideal. Give your `body` selector a `font-family` property set to `Tahoma` and a `color` property set to `#0a0a23`.
|
||||
Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
|
||||
|
||||
Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` selector should have a `font-family` property set to `Tahoma`.
|
||||
Your `tbody` element should have one `tr` element.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Tahoma');
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
|
||||
```
|
||||
|
||||
Your `body` selector should have a `color` property set to `#0a0a23`.
|
||||
Your `tr` element should have the `class` set to `total`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'rgb(10, 10, 35)');
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('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'));
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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'));
|
||||
```
|
||||
|
||||
You should have three `td` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,101 +87,122 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'rgb(10, 10,
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193f6615b1bd85076fc5ef2
|
||||
id: 61fd9d9fbdfe078800317055
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
@ -7,26 +7,20 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
The content within your balance sheet should be left-justified, while the sheet itself remains centered on the page. Create a `#sheet` selector and give it a `text-align` property set to `left` and a `max-width` property set to `500px`.
|
||||
Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `#sheet` selector.
|
||||
You should have an `html` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('html'));
|
||||
```
|
||||
|
||||
Your `#sheet` selector should have a `text-align` property set to `left`.
|
||||
Your `html` selector should have a `box-sizing` property set to `border-box`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.textAlign === 'left');
|
||||
```
|
||||
|
||||
Your `#sheet` selector should have a `max-width` property set to `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.maxWidth === '500px');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -37,104 +31,127 @@ assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.maxWidth === '500px')
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193f7074ca69153347fbc3a
|
||||
id: 61fda307bde0b091cf7d884a
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
@ -7,14 +7,26 @@ dashedName: step-29
|
||||
|
||||
# --description--
|
||||
|
||||
Your sheet has shifted back to the left side of the page, because you applied a fixed width. To resolve this, give your `#sheet` selector a `margin` property set to `auto`.
|
||||
Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#sheet` selector should have a `margin` property set to `auto`.
|
||||
You should have a `body` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.margin === 'auto');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -25,108 +37,132 @@ assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.margin === 'auto');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
color: #0a0a23;
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193f74b982e4c5449f51a47
|
||||
id: 61fda339eadcfd92a6812bed
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
@ -7,20 +7,24 @@ dashedName: step-30
|
||||
|
||||
# --description--
|
||||
|
||||
To make your sheet stand out from the page, you'll want to give it a border. Give the `#sheet` selector a `padding` property set to `10px` to create space between the content and the border, then give it a `border` property set to `2px solid #d0d0d5`.
|
||||
Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
|
||||
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#sheet` selector should have a `padding` property set to `10px`.
|
||||
You should have an `span[class~="sr-only"]` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.padding === '10px');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
|
||||
```
|
||||
|
||||
Your `#sheet` selector should have a `border` property set to `2px solid #d0d0d5`.
|
||||
Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.border === '2px solid rgb(208, 208, 213)');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,109 +35,137 @@ assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.border === '2px solid
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
color: #0a0a23;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193f7904dc7ee554d12571f
|
||||
id: 61fdac1e31692f9a9ad97295
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
@ -7,20 +7,28 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
The `AcmeWidgetCorp` text should be a bit smaller. Create a `#header h2` selector to target only the `h2` elements within your `#header` element, and give it a `font-size` property set to `1.3em`.
|
||||
The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
|
||||
|
||||
The `clip-path` property determines the shape the `clip` property should take. Use both the `clip-path` and `-webkit-clip-path` selectors to set the value to `inset(50%)`, forming the clip-path into a rectangle within the element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `header h2` selector.
|
||||
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('#header h2'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
|
||||
```
|
||||
|
||||
Your `header h2` selector should have a `font-size` property set to `1.3em`.
|
||||
Your `span[class~="sr-only"] ` selector should have a `clip-path` property set to `inset(50%)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.fontSize === '1.3em');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
|
||||
```
|
||||
|
||||
Your `span[class~="sr-only"]` selector should have a `-webkit-clip-path` property set to `inset(50%)`.
|
||||
|
||||
```js
|
||||
assert(/-webkit-clip-path\s*:\s*inset\(\s*50%\s*\)\s*(;|})/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,113 +39,140 @@ assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.fontSize === '1.3
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193f85ab1de4356da678090
|
||||
id: 61fdaea3999cb19d76ce717b
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
@ -7,26 +7,20 @@ dashedName: step-32
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to align the text content of your sheet so that it appears in columns. Start with a `.row` selector to target all of your elements that have the balance values in them. Give this selector a `display` property set to `flex`, and a `justify-content` property set to `flex-end`.
|
||||
Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row` selector.
|
||||
Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
|
||||
```
|
||||
|
||||
Your `.row` selector should have a `display` property set to `flex`.
|
||||
Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row')?.display === 'flex');
|
||||
```
|
||||
|
||||
Your `.row` selector should have a `justify-content` property set to `flex-end`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row')?.justifyContent === 'flex-end');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -37,117 +31,143 @@ assert(new __helpers.CSSHelp(document).getStyle('.row')?.justifyContent === 'fle
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193fa3224d7465850407d3d
|
||||
id: 61fdaf9ff894b6a084ecdc1b
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
@ -7,28 +7,20 @@ dashedName: step-33
|
||||
|
||||
# --description--
|
||||
|
||||
The `flex-end` setting has also brought your row's description text to the right of the element. To fix this, create a `.name` selector and give it a `width` property of `100%`, and a `text-align` property of `left`.
|
||||
|
||||
Because you're using `flex`, this tells your `.name` elements to take up 100% of the remaining available width, which allows the text to move to the left.
|
||||
To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.name` selector.
|
||||
Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.name'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
|
||||
```
|
||||
|
||||
Your `.name` selector should have a `width` property set to `100%`.
|
||||
Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.name')?.width === '100%');
|
||||
```
|
||||
|
||||
Your `.name` selector should have a `text-align` property set to `left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.name')?.textAlign === 'left');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,122 +31,145 @@ assert(new __helpers.CSSHelp(document).getStyle('.name')?.textAlign === 'left');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193fb8bef24145b57fbed00
|
||||
id: 61fdafe6f07fd7a1c6785bc2
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
@ -7,28 +7,26 @@ dashedName: step-34
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll need to adjust the layout of the dollar values. The CSS `:not()` selector allows you to target all elements matching a given selector *except* those which match the selector you provide within `:not()`.
|
||||
|
||||
Create a `span:not(.name)` selector to target all of your `span` elements except those with the `class` set to `name`. Give it a `margin-left` property set to `10px` and a `min-width` property set to `15%`.
|
||||
Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `span:not(.name)` selector.
|
||||
Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
|
||||
```
|
||||
|
||||
Your `span:not(.name)` selector should have a `margin-left` property set to `10px`.
|
||||
Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.marginLeft === '10px');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
|
||||
```
|
||||
|
||||
Your `span:not(.name)` selector should have a `min-width` property set to `15%`.
|
||||
Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.minWidth === '15%');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,127 +37,147 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.minWidth ===
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193fd22d907385efadb59c9
|
||||
id: 61fdb04d9939f0a26ca51c2b
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
@ -7,14 +7,32 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
The text does not look quite right. Typically, in an accounting sheet, the numeric columns are justified to the right. Give your `span:not(.name)` selector a `text-align` property set to `right`.
|
||||
Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span:not(.name)` selector should have a `text-align` property set to `right`.
|
||||
You should have an `h1` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.textAlign === 'right');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
Your `h1` selector should have a `margin` property set to `0 auto`.
|
||||
|
||||
```js
|
||||
assert(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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -25,130 +43,151 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.textAlign ==
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193fe24beedd361f34f8e96
|
||||
id: 620159cd5431aa34bc6a4c9c
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
@ -7,20 +7,32 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
CSS has an `[attribute=value]` selector which allows you to target any element where an attribute has a specific value. Create a `span[class="current"]` selector to target all of your `span` elements where the `class` is set to `current`. Give it a `font-style` property set to `italic`.
|
||||
Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `span[class="current"]` selector.
|
||||
You should have an `h1 .flex` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
|
||||
```
|
||||
|
||||
Your `span[class="current"]` selector should have a `font-style` property set to `italic`.
|
||||
Your `h1 .flex` selector should have a `display` property set to `flex`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]')?.fontStyle === 'italic');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
Your `h1 .flex` selector should have a `gap` property set to `1rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,133 +43,157 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]')?.fontSt
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193febd52ffb76345956072
|
||||
id: 62015a5da1c95c358f079ebb
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
@ -7,16 +7,22 @@ dashedName: step-37
|
||||
|
||||
# --description--
|
||||
|
||||
The rows on your sheet are difficult to read. You'll need to create some visual distinction to help your readers understand the document flow.
|
||||
The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
|
||||
|
||||
Start by giving your `.row` selector a `border-bottom` property set to `1px solid #0a0a23`.
|
||||
Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.row` selector should have a `border-bottom` property set to `1px solid #0a0a23`.
|
||||
You should have an `h1 .flex span:first-of-type` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row')?.borderBottom === '1px solid rgb(10, 10, 35)');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,135 +33,163 @@ assert(new __helpers.CSSHelp(document).getStyle('.row')?.borderBottom === '1px s
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.row {
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ff2b1198596496b81450
|
||||
id: 62015cd2654a1139321a89d2
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
@ -7,14 +7,20 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
The new border is very close to the text in your rows. Give your `.row` selector a `padding` property set to `4px` to add extra spacing around your text.
|
||||
The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.row` selector should have a `padding` property set to `4px`.
|
||||
You should have an `h1 .flex span:last-of-type` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row')?.padding === '4px');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -25,136 +31,167 @@ assert(new __helpers.CSSHelp(document).getStyle('.row')?.padding === '4px');
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.row {
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6193ff6c2a6138658b4ce2af
|
||||
id: 62015d8942384c3aed48329e
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
@ -7,22 +7,32 @@ dashedName: step-39
|
||||
|
||||
# --description--
|
||||
|
||||
Your rows need some background color to help differentiate the data.
|
||||
|
||||
The `:nth-child()` selector allows you to target elements based on their position in a group of sibling elements. Create a `.row:nth-child(odd)` selector to target all `.row` elements that are an odd child (child 1, child 3, etc). Give this selector a `background-color` property set to `#dfdfe2`.
|
||||
You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row:nth-child(odd)` selector.
|
||||
You should have a `section` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('section'));
|
||||
```
|
||||
|
||||
Your `.row:nth-child(odd)` selector should have a `background-color` property set to `#dfdfe2`.
|
||||
Your `section` selector should have a `max-width` property set to `40rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)')?.backgroundColor === 'rgb(223, 223, 226)');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,140 +43,171 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)')?.backgro
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
.row {
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6194034278b71f6940a50d91
|
||||
id: 620167374bb8b4455cd11125
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
@ -7,28 +7,38 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
You'll notice that this change has made all of your `.row` elements have the new background color. This is because the `nth-child()` selector looks at the position relative to all element siblings.
|
||||
|
||||
The `nth-of-type()` selector, however, looks at an element's position relative only to the elements matching the selector in the sibling group. Change your `.row:nth-child(odd)` selector to be `.row:nth-of-type(odd)`, and you should see the difference.
|
||||
The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should change your selector to be `.row:nth-of-type(odd)`.
|
||||
You should have a `#years` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years'));
|
||||
```
|
||||
|
||||
You should not have a `.row:nth-child(odd)` selector.
|
||||
Your `#years` selector should have a `display` property set to `flex`.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
|
||||
```
|
||||
|
||||
Your `.row:nth-of-type(odd)` selector should have a `background-color` property set to `#dfdfe2`.
|
||||
Your `#years` selector should have a `justify-content` property set to `flex-end`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)')?.backgroundColor === 'rgb(223, 223, 226)');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
Your `#years` selector should have a `top` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,142 +49,177 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)')?.backg
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.row:nth-child(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 619403dacf51db6a79b47b52
|
||||
id: 620174ed519dd7506c1a4b61
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
@ -7,20 +7,20 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
Now target your even `.row` elements using another `:nth-of-type()` selector, and give them a `background-color` property set to `#d0d0d5`.
|
||||
Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row:nth-of-type(even)` selector.
|
||||
Your `#years` should have a `color` property set to `#fff`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
Your `.row:nth-of-type(even)` selector should have a `background-color` property set to `#d0d0d5`.
|
||||
Your `#years` should have a `background-color` property set to `#0a0a23`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)')?.backgroundColor === 'rgb(208, 208, 213)');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,143 +31,183 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)')?.backgro
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
}
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6194079d7cbf586eba9539ff
|
||||
id: 620175b3710a0951cfa86edf
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
@ -7,28 +7,36 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Your last `.row` element in each section should stand out, as this is your "total" row. The `:last-child` selector allows you to target the matching element that is the final child in a group of siblings.
|
||||
The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
|
||||
|
||||
Create a `.row:last-child` selector and give it a `background-color` property set to `transparent`. Also set the `margin-bottom` property to `30px` to create some extra space between your sections.
|
||||
```css
|
||||
.example {
|
||||
margin: 10px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
```
|
||||
|
||||
Ensure your years do not get hidden by setting a `z-index` of `999`. Then, give it a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row:last-child` selector.
|
||||
Your `#years` selector should have a `z-index` property set to `999`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:last-child'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999');
|
||||
```
|
||||
|
||||
Your `.row:last-child` selector should have a `background-color` property set to `transparent`.
|
||||
Your `#years` selector should have a `margin` property set to `0 -2px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.backgroundColor === 'transparent');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
|
||||
```
|
||||
|
||||
Your `.row:last-child` selector should have a `margin-bottom` property set to `30px`.
|
||||
Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.marginBottom === '30px');
|
||||
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));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,147 +47,184 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.marginBottom
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 619409a3b1ec0b727ac2ab30
|
||||
id: 6201782cc420715562f36271
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
@ -7,22 +7,34 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
The `[attribute~=value]` selector allows you to target elements where the attribute *includes* the value. Create a `p[class~="total"]` selector to target all of your `p` elements where the `class` includes `total` (such as your `.row total` elements). Give this selector a `border-bottom` property set to `4px double #0a0a23` to help divide your sections, and set the `font-weight` to `bold` to draw attention to them.
|
||||
Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
|
||||
|
||||
This may seem the same as using the `.total` class selector. However, CSS is parsed top-down. Your `.row` selector comes after this new selector, and would overwrite the `.total` selector. Because `p[class~="total"]` has a higher <dfn>selector specificity</dfn>, it takes priority even though it comes earlier in the stylesheet.
|
||||
Give your new selector a bold font, a width of `4.5rem`, and text aligned to the right.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `p[class~="total"]` selector.
|
||||
You should have a `#years span[class]` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
|
||||
```
|
||||
|
||||
Your `p[class~="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
|
||||
Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]')?.borderBottom === '4px double rgb(10, 10, 35)');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,152 +45,189 @@ assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]')?.borderBott
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 61940bfdc4e2a874af766567
|
||||
id: 620179bc0a6a2358c72b90ad
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
@ -7,24 +7,20 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
Arguably the most important part of a balance sheet is the totals. You want to be able to quickly cycle through the total values on your sheet. This can be achieved by using the `tabindex` attribute. Give each of your `.row total` elements a `tabindex` attribute set to `1`.
|
||||
|
||||
It is important to note here that adjusting the `tabindex` value in this way can negatively affect the accessibility of your page, as it changes the flow of the document for assistive devices such as screen readers.
|
||||
You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Each of your `.row total` elements should have a `tabindex` attribute set to `1`.
|
||||
You should have a `.table-wrap` selector.
|
||||
|
||||
```js
|
||||
const rows = [...document.querySelectorAll('.row.total')];
|
||||
assert(rows?.every(row => row.getAttribute('tabindex') === '1'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
|
||||
```
|
||||
|
||||
You should not set the `tabindex` on any other elements.
|
||||
Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
|
||||
|
||||
```js
|
||||
const elements = [...document.querySelectorAll('*[tabindex]')];
|
||||
assert(elements?.every(element => element.classList.contains('row') && element.classList.contains('total')));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -35,155 +31,195 @@ assert(elements?.every(element => element.classList.contains('row') && element.c
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 61940e95c95cff77d0b2a310
|
||||
id: 62017b6f47454059bf2d3bd1
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
@ -7,20 +7,22 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
The `[attribute]` selector allows you to target elements that have *any* value set for the given attribute. Create a `.row[tabindex]:hover` selector to target your `.row` elements which have a specific `tabindex` value. Give that selector a `background-color` property of `#99c9ff`.
|
||||
Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
|
||||
|
||||
The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `span[class~="sr-only"]` class. This ensures that your earlier rules for the `sr-only` class are not overwritten.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row[tabindex]:hover` selector.
|
||||
You should have a `span:not(.sr-only)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
|
||||
```
|
||||
|
||||
Your `.row[tabindex]:hover` selector should have a `background-color` property set to `#99c9ff`.
|
||||
Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover')?.backgroundColor === 'rgb(153, 201, 255)');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,154 +33,196 @@ assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover')?.backgro
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 61940f551fa4db7967451be9
|
||||
id: 62017f47c87be96457c49f46
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
@ -7,28 +7,88 @@ dashedName: step-46
|
||||
|
||||
# --description--
|
||||
|
||||
You can see your changes when you hover over a total row, but it does not apply when you tab to them. An element that has been targeted by the tab key (or a mouse click) can be styled using the `:focus` selector.
|
||||
Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
|
||||
|
||||
Create a `.row[tabindex]:focus` selector, and give it a `background-color` property set to `#198eee` and a `color` property set to `white`. Then try experimenting with hovering and clicking on your rows.
|
||||
Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row[tabindex]:focus` selector.
|
||||
Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus'));
|
||||
// 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'));
|
||||
```
|
||||
|
||||
Your `.row[tabindex]:focus` selector should have a `background-color` property set to `#198eee`.
|
||||
Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.backgroundColor === 'rgb(25, 142, 238)');
|
||||
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
|
||||
assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
|
||||
```
|
||||
|
||||
Your `.row[tabindex]:focus` selector should have a `color` property set to `white`.
|
||||
Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.color === 'white');
|
||||
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
|
||||
assert(text.includes('clip-path: inset(50%) !important;'));
|
||||
```
|
||||
|
||||
Your `span[class~="sr-only"]` selector should have the `-webkit-clip-path` property set to `inset(50%) !important`.
|
||||
|
||||
```js
|
||||
// this one gets removed apparently
|
||||
assert(code.includes('-webkit-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;'));
|
||||
```
|
||||
|
||||
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;'));
|
||||
```
|
||||
|
||||
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;'));
|
||||
```
|
||||
|
||||
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;'));
|
||||
```
|
||||
|
||||
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;'));
|
||||
```
|
||||
|
||||
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;'));
|
||||
```
|
||||
|
||||
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;'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,161 +99,201 @@ assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.color =
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
span:not(.sr-only) {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6194108c6951ca7cae9596bd
|
||||
id: 62017fa5bbef406580ceb44f
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
@ -7,22 +7,26 @@ dashedName: step-47
|
||||
|
||||
# --description--
|
||||
|
||||
The `elem1 > elem2` selector allows you to target all `elem2` elements that are a direct child of an `elem1` element.
|
||||
|
||||
Create a `div > h2` rule to target all of your `h2` elements that are a direct child of a `div` element. Give the selector a `background-color` property set to `#99c9ff`.
|
||||
Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div > h2` selector.
|
||||
You should not have a `span:not(.sr-only)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2'));
|
||||
assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
|
||||
```
|
||||
|
||||
Your `div > h2` selector should have a `background-color` property set to `#99c9ff`.
|
||||
You should have a `span` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.backgroundColor === 'rgb(153, 201, 255)');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,166 +37,201 @@ assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.backgroundColor ===
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
.row[tabindex]:focus {
|
||||
background-color: #198eee;
|
||||
color: white;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
span:not(.sr-only) {
|
||||
font-weight: normal;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 619410f7040d427d9c782db7
|
||||
id: 62018243f046a368fab8ffb6
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
@ -7,14 +7,26 @@ dashedName: step-48
|
||||
|
||||
# --description--
|
||||
|
||||
You may have noticed that this affected your `AcmeWidgetCorp` text as well, because it is a direct child of a `div` element. Give your `#header h2` selector a `background` property set to `transparent` to fix this.
|
||||
Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#header h2` selector should have a `background` property set to `transparent`.
|
||||
You should have a `table` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.backgroundColor === 'transparent');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
Your `table` selector should have a `border` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -25,168 +37,203 @@ assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.backgroundColor =
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.row[tabindex]:focus {
|
||||
background-color: #198eee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6194114534b4547e5177cb2a
|
||||
id: 6201830cb0c74b69f1b41635
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
@ -7,20 +7,26 @@ dashedName: step-49
|
||||
|
||||
# --description--
|
||||
|
||||
Your row headers still need a bit of adjustment. Give your `div > h2` selector a `font-size` property set to `1.3em` and a `padding` property set to `0 4px`.
|
||||
Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div > h2` selector should have a `font-size` property set to `1.3em`.
|
||||
Your `table` selector should have a `width` property set to `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.fontSize === '1.3em');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
|
||||
```
|
||||
|
||||
Your `div > h2` selector should have a `padding` property set to `0 4px`.
|
||||
Your `table` selector should have a `position` property set to `relative`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.padding === '0px 4px');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,169 +37,207 @@ assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.padding === '0px 4p
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
.row[tabindex]:focus {
|
||||
background-color: #198eee;
|
||||
color: white;
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 619412990eaf9c80415b280d
|
||||
id: 620186f4b6b8356d2def576b
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
@ -7,22 +7,32 @@ dashedName: step-50
|
||||
|
||||
# --description--
|
||||
|
||||
The `elem1 ~ elem2` selector will target `elem2` elements where they are preceded by an `elem1` element. This means that any `elem2` element which has a sibling `elem1` somewhere *before* it within the same parent will be targeted.
|
||||
|
||||
Create a `div ~ h2` selector to target all of your `h2` elements except the first (as it does not have a `div` element as a sibling). Give this new selector a `font-weight` property set to `normal` to make your section text a bit less obtrusive.
|
||||
Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div ~ h2` selector.
|
||||
You should have a `table caption` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div ~ h2'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('table caption'));
|
||||
```
|
||||
|
||||
Your `div ~ h2` selector should have a `font-weight` property set to `normal`.
|
||||
Your `table caption` selector should have a `color` property set to `#356eaf`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div ~ h2')?.fontWeight === 'normal');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,170 +43,208 @@ assert(new __helpers.CSSHelp(document).getStyle('div ~ h2')?.fontWeight === 'nor
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
.row[tabindex]:focus {
|
||||
background-color: #198eee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
font-size: 1.3em;
|
||||
padding: 0 4px;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6194135942d5e08174b8bab1
|
||||
id: 62018ba1aa263770c953be66
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
@ -7,20 +7,26 @@ dashedName: step-51
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, the `elem1 + elem2` selector will target each `elem2` element that comes immediately after an `elem1` element. The notes in the balance sheet stand out too much. Create a `p + span` selector to target them, and set the `font-size` property to `0.8em`.
|
||||
Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `p + span` selector.
|
||||
Your `table caption` selector should have the `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
|
||||
```
|
||||
|
||||
Your `p + span` selector should have a `font-size` property set to `0.8em`.
|
||||
Your `table caption` selector should have the `top` property set to `-2.25rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontSize === '0.8em');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,177 +37,216 @@ assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontSize === '0.8em
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
.row[tabindex]:focus {
|
||||
background-color: #198eee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
font-size: 1.3em;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
div ~ h2 {
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 619413f5c1218b82b7b56a60
|
||||
id: 62018c3e94434a71af1d5eaa
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
@ -7,22 +7,32 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
For the final bit of styling, give the `p + span` selector a `font-style` set to `italic`, and a `color` set to `#3b3b4f`.
|
||||
|
||||
With that, you have successfully completed your balance sheet.
|
||||
Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container (because we are using flexbox).
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p + span` selector should have a `font-style` property set to `italic`.
|
||||
You should have a `tbody td` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontStyle === 'italic');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
|
||||
```
|
||||
|
||||
Your `p + span` selector should have a `color` property set to `#3b3b4f`.
|
||||
Your `tbody td` selector should have a `width` property set to `100vw`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span')?.color === 'rgb(59, 59, 79)');
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,357 +43,220 @@ assert(new __helpers.CSSHelp(document).getStyle('p + span')?.color === 'rgb(59,
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
font-size: 1.3em;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
div ~ h2 {
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
p + span {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Cash</span>
|
||||
<span>$25</span>
|
||||
<span>$30</span>
|
||||
<span class="current">$28</span>
|
||||
</p>
|
||||
<span class="notes">This is the cash we currently have on hand.</span>
|
||||
<p class="row">
|
||||
<span class="name">Checking</span>
|
||||
<span>$54</span>
|
||||
<span>$56</span>
|
||||
<span class="current">$53</span>
|
||||
</p>
|
||||
<span class="notes">Our primary transactional account.</span>
|
||||
<p class="row">
|
||||
<span class="name">Savings</span>
|
||||
<span>$500</span>
|
||||
<span>$650</span>
|
||||
<span class="current">$728</span>
|
||||
</p>
|
||||
<span class="notes">Funds set aside for emergencies.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$579</span>
|
||||
<span>$736</span>
|
||||
<span class="current">$809</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name">Loans</span>
|
||||
<span>$500</span>
|
||||
<span>$250</span>
|
||||
<span class="current">$0</span>
|
||||
</p>
|
||||
<span class="notes">The outstanding balance on our startup loan.</span>
|
||||
<p class="row">
|
||||
<span class="name">Expenses</span>
|
||||
<span>$200</span>
|
||||
<span>$300</span>
|
||||
<span class="current">$400</span>
|
||||
</p>
|
||||
<span class="notes">Annual anticipated expenses, such as payroll.</span>
|
||||
<p class="row">
|
||||
<span class="name">Credit</span>
|
||||
<span>$50</span>
|
||||
<span>$50</span>
|
||||
<span class="current">$75</span>
|
||||
</p>
|
||||
<span class="notes">The running balance on our line of credit.</span>
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>$750</span>
|
||||
<span>$600</span>
|
||||
<span class="current">$475</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total" tabindex="1">
|
||||
<span class="name">Total</span>
|
||||
<span>-$171</span>
|
||||
<span>$136</span>
|
||||
<span class="current">$334</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 1.3em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p[class~="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span[class="current"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
.row[tabindex]:focus {
|
||||
background-color: #198eee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
div ~ h2 {
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
p + span {
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
color: #3b3b4f;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -0,0 +1,256 @@
|
||||
---
|
||||
id: 62018ec29b3ae674f40bef31
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tbody th` selector.
|
||||
|
||||
```js
|
||||
assert(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)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,266 @@
|
||||
---
|
||||
id: 62019093fe30e278e797d2f6
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr[class="total"]` selector.
|
||||
|
||||
```js
|
||||
assert(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)');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,271 @@
|
||||
---
|
||||
id: 620191707bc65579ddd3ce15
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr[class="total"] th` selector.
|
||||
|
||||
```js
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,278 @@
|
||||
---
|
||||
id: 620192a767533a7ad19d96d7
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr.total td` selector.
|
||||
|
||||
```js
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,275 @@
|
||||
---
|
||||
id: 6201995d9ab88e80f1989dce
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
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)'));
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,279 @@
|
||||
---
|
||||
id: 620199c7a7a32c81d4db3410
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr.total:hover` selector.
|
||||
|
||||
```js
|
||||
assert(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)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,285 @@
|
||||
---
|
||||
id: 6201a1a7af32c287bd6b8183
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select your `td` elements with the `class` value of `current`, and make the font italic.
|
||||
|
||||
# --hints--
|
||||
|
||||
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"]'));
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,289 @@
|
||||
---
|
||||
id: 6201a1cc668a34888f5b2f52
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
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"]'));
|
||||
```
|
||||
|
||||
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)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
td.current {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,303 @@
|
||||
---
|
||||
id: 6201a20d742f5c89736c8cfb
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr.data th` selector.
|
||||
|
||||
```js
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
td.current {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
tr.data {
|
||||
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,321 @@
|
||||
---
|
||||
id: 6201a42e39bf3b95b6a33bf3
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr.data th .description` selector.
|
||||
|
||||
```js
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
td.current {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
tr.data {
|
||||
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
|
||||
}
|
||||
|
||||
tr.data th {
|
||||
text-align: left;
|
||||
padding-top: 0.3rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,297 @@
|
||||
---
|
||||
id: 6201a4adcc6414968b391592
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a `span` selector.
|
||||
|
||||
```js
|
||||
assert(!(new __helpers.CSSHelp(document).getStyle('span')));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
td.current {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
tr.data {
|
||||
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
|
||||
}
|
||||
|
||||
tr.data th {
|
||||
text-align: left;
|
||||
padding-top: 0.3rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
tr.data th .description {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding: 1rem 0 0.75rem;
|
||||
margin-right: -13.5rem;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,313 @@
|
||||
---
|
||||
id: 6201a5258af7b398b030bfaf
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr.data td` selector.
|
||||
|
||||
```js
|
||||
assert(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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
td.current {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
tr.data {
|
||||
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
|
||||
}
|
||||
|
||||
tr.data th {
|
||||
text-align: left;
|
||||
padding-top: 0.3rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
tr.data th .description {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding: 1rem 0 0.75rem;
|
||||
margin-right: -13.5rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,591 @@
|
||||
---
|
||||
id: 6201a59be346d399c21d10b1
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
|
||||
|
||||
With this, your balance sheet is complete!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr.data td:last-of-type` selector.
|
||||
|
||||
```js
|
||||
assert(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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
td.current {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
tr.data {
|
||||
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
|
||||
}
|
||||
|
||||
tr.data th {
|
||||
text-align: left;
|
||||
padding-top: 0.3rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
tr.data th .description {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding: 1rem 0 0.75rem;
|
||||
margin-right: -13.5rem;
|
||||
}
|
||||
|
||||
tr.data td {
|
||||
vertical-align: top;
|
||||
padding: 0.3rem 0.25rem 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AcmeWidgetCorp Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr[class="total"] th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
tr.total td {
|
||||
text-align: right;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
tr.total td:nth-of-type(3) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
tr.total:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
td.current {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
tr.data {
|
||||
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
|
||||
}
|
||||
|
||||
tr.data th {
|
||||
text-align: left;
|
||||
padding-top: 0.3rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
tr.data th .description {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding: 1rem 0 0.75rem;
|
||||
margin-right: -13.5rem;
|
||||
}
|
||||
|
||||
tr.data td {
|
||||
vertical-align: top;
|
||||
padding: 0.3rem 0.25rem 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
tr.data td:last-of-type {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user