feat(curriculum): balance sheet project (#44189)
* feat: initial infra * feat: create steps * chore: apply sem's review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * feat: write tests * chore: optional?.chaining?. * chore: gikf's suggestion Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * chore: rename * chore: * Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: manual review suggestions * chore: ????? Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
f613a1e5fd
commit
536a689d34
@ -102,7 +102,8 @@
|
||||
"title": "Learn Typography by Building a Nutrition Label",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": ["", ""] }
|
||||
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": ["", ""] },
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": ["", ""] }
|
||||
}
|
||||
},
|
||||
"javascript-algorithms-and-data-structures": {
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Learn More About CSS Pseudo Selectors By Building A Balance Sheet
|
||||
block: learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn More About CSS Pseudo Selectors By Building A Balance Sheet
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -83,5 +83,6 @@
|
||||
"learn-css-flexbox-by-building-a-photo-gallery": "HTML-CSS",
|
||||
"learn-css-grid-by-building-a-magazine": "HTML-CSS",
|
||||
"learn-typography-by-building-a-nutrition-label": "HTML-CSS",
|
||||
"learn-css-animation-by-building-a-ferris-wheel": "HTML-CSS"
|
||||
"learn-css-animation-by-building-a-ferris-wheel": "HTML-CSS",
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS"
|
||||
}
|
||||
|
||||
@ -0,0 +1,223 @@
|
||||
{
|
||||
"name": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet",
|
||||
"order": 43,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"6193d8081ec2531581ea7b98",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"6193da99ca92051a07fb8a13",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"6193dbfec896f21aed7d8114",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"6193dc549cb4031bc3a9c4e1",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"6193de38b3294e1e378f5bc3",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"6193de63d0fcab1f0b4112a0",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"6193ded40c51662155758987",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"6193df854916a52292a23aa9",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"6193dfd113955a238da1cc05",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"6193e2baa04690265435e25f",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"6193e2f62a56dc26fd594b77",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"6193e3a4916fdb281b791892",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"6193e40e67d94029468e6b2d",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"6193e5280857e72be1efc99d",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"6193e55d97150c2ca7c9458a",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"6193e5946b7ea12d8ce7b1c2",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"6193e5d66b67e32e5f0f930e",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"6193e7150dc89231b01a3515",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"6193e8957e614d3b8eeb770f",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6193e8eba043903cf68598cd",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"6193e9f7a92e7e3e1810b2f4",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"6193ea793e49253eee1452d1",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"6193ece0b46e03423cd66e78",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"6193ed97ae313e4331c9078a",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"6193ededc017a2443f10429b",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"6193ee19d10be144d6bc9c46",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"6193f5169cdc684f60317783",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"6193f6615b1bd85076fc5ef2",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"6193f7074ca69153347fbc3a",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"6193f74b982e4c5449f51a47",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"6193f7904dc7ee554d12571f",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"6193f85ab1de4356da678090",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"6193fa3224d7465850407d3d",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"6193fb8bef24145b57fbed00",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"6193fd22d907385efadb59c9",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"6193fe24beedd361f34f8e96",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"6193febd52ffb76345956072",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"6193ff2b1198596496b81450",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"6193ff6c2a6138658b4ce2af",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"6194034278b71f6940a50d91",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"619403dacf51db6a79b47b52",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"6194079d7cbf586eba9539ff",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"619409a3b1ec0b727ac2ab30",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"61940bfdc4e2a874af766567",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"61940e95c95cff77d0b2a310",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"61940f551fa4db7967451be9",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"6194108c6951ca7cae9596bd",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"619410f7040d427d9c782db7",
|
||||
"Step 48"
|
||||
],
|
||||
[
|
||||
"6194114534b4547e5177cb2a",
|
||||
"Step 49"
|
||||
],
|
||||
[
|
||||
"619412990eaf9c80415b280d",
|
||||
"Step 50"
|
||||
],
|
||||
[
|
||||
"6194135942d5e08174b8bab1",
|
||||
"Step 51"
|
||||
],
|
||||
[
|
||||
"619413f5c1218b82b7b56a60",
|
||||
"Step 52"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 6193d8081ec2531581ea7b98
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `<!DOCTYPE html>` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE html>/i));
|
||||
```
|
||||
|
||||
Your code should have an `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('html')?.length === 1);
|
||||
```
|
||||
|
||||
Your code should have a `head` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('head')?.length === 1);
|
||||
```
|
||||
|
||||
Your code should have a `body` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('body')?.length === 1);
|
||||
```
|
||||
|
||||
Your `head` element should come before your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.previousElementSibling?.tagName === 'HEAD');
|
||||
```
|
||||
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
The other `meta` element should have the `charset` attribute set to `UTF-8`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your project should have a title of `AcmeWidgetCorp Balance Sheet`.
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
assert(/<link/.test(code))
|
||||
```
|
||||
|
||||
Your `href` attribute should have the value `./styles.css`.
|
||||
|
||||
```js
|
||||
assert(/href\s*=\s*('|")(\.\/)?styles\.css\1/.test(code));
|
||||
```
|
||||
|
||||
Your `rel` attribute should have the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(/rel\s*=\s*('|")\s*stylesheet\s*\1/.test(code));
|
||||
```
|
||||
|
||||
Your `type` attribute should have the value `text/css`.
|
||||
|
||||
```js
|
||||
assert(/type\s*=\s*('|")\s*text\/css\s*\1/.test(code));
|
||||
```
|
||||
|
||||
Your `link` element should have `href="./styles.css"`, `rel="stylesheet"`, and `type="text/css"` attributes
|
||||
|
||||
```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));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 6193da99ca92051a07fb8a13
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `div` element should be within your `body` 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');
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 6193dbfec896f21aed7d8114
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `#sheet` element, create a new `div` and give it an `id` set to `header`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#sheet > div')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `div` element should have an `id` attribute set to `header`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet > div')?.getAttribute('id') === 'header');
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<div id="sheet">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 6193dc549cb4031bc3a9c4e1
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h1` element within your `#header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > h1')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `h1` element should have the text `Balance Sheet`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h1')?.textContent === 'Balance Sheet');
|
||||
```
|
||||
|
||||
You should create a new `h2` element within your `#header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > h2')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `AcmeWidgetCorp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h2')?.textContent === 'AcmeWidgetCorp');
|
||||
```
|
||||
|
||||
Your `h1` element should come before your `h2` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h1')?.nextElementSibling?.localName === 'h2');
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 6193de38b3294e1e378f5bc3
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element within your `#header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > p')?.length === 1);
|
||||
```
|
||||
|
||||
Your `p` element should come after your `h2` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#header > h2')?.nextElementSibling?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have a `class` attribute set to `row`.
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
# --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>
|
||||
<div id="sheet">
|
||||
--fcc-editable-region--
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 6193de63d0fcab1f0b4112a0
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `span` element should have the text `2019`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > .row > span')?.[0]?.textContent === '2019');
|
||||
```
|
||||
|
||||
Your second `span` element should have the text `2020`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > .row > span')?.[1]?.textContent === '2020');
|
||||
```
|
||||
|
||||
Your third `span` element should have the text `2021`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#header > .row > span')?.[2]?.textContent === '2021');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
--fcc-editable-region--
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6193ded40c51662155758987
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h2` element within your `#sheet` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#sheet > h2')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `h2` element should come after your `#header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet > h2')?.previousElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Assets`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet > h2')?.textContent === 'Assets');
|
||||
```
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 6193df854916a52292a23aa9
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element within your `.section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `p` element should have a `class` attribute set to `row`.
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 6193dfd113955a238da1cc05
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Copy the `.row` and `.notes` elements and paste two more sets, so that your `.section` has three of each.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three `.row` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.row').length === 4);
|
||||
```
|
||||
|
||||
You should have three `.notes` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.notes').length === 3);
|
||||
```
|
||||
|
||||
Your `.row` elements should all be within your `.section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row').length === 3);
|
||||
```
|
||||
|
||||
Your `.notes` elements should all be within your `.section` 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'));
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 6193e2baa04690265435e25f
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the final `.notes` element, create a `p` element with a `class` of `row` and `total`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element within your `.section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.length === 4);
|
||||
```
|
||||
|
||||
Your new `p` element should have a `class` attribute set to `row total`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.[3]?.classList?.contains('row'));
|
||||
assert(document.querySelectorAll('.section > p')?.[3]?.classList?.contains('total'));
|
||||
```
|
||||
|
||||
Your new `p` element should be the last element in the `.section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > p')?.[3]?.nextElementSibling === null);
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--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>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 6193e2f62a56dc26fd594b77
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `.row` element (in your `.section` element) should have four `span` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row > span')?.length === 4);
|
||||
```
|
||||
|
||||
Your first new `span` element should have a `class` attribute set to `name`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row > span')?.[0]?.classList?.contains('name'));
|
||||
```
|
||||
|
||||
Your last new `span` element should have a `class` attribute set to `current`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section > .row > span')?.[3]?.classList?.contains('current'));
|
||||
```
|
||||
|
||||
# --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>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
|
||||
</p>
|
||||
--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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 6193e3a4916fdb281b791892
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second `.row` element should have the four `span` 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'));
|
||||
```
|
||||
|
||||
Your third `.row` element should have the four `span` elements.
|
||||
|
||||
```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'));
|
||||
```
|
||||
|
||||
Your fourth `.row` element (your `.row total` element) should have the four `span` elements.
|
||||
|
||||
```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'));
|
||||
```
|
||||
|
||||
# --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>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row"></p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total"></p>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 6193e40e67d94029468e6b2d
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h2` element below your existing `.section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.section')?.nextElementSibling?.localName === 'h2');
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Liabilities`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.section')?.nextElementSibling?.textContent === 'Liabilities');
|
||||
```
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` attribute set to `section`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('section'));
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 6193e5280857e72be1efc99d
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Copy the entire contents of your first `.section` element and paste them into your second `.section` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second `.section` element should have four `p` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p')?.length === 4);
|
||||
```
|
||||
|
||||
Your second `.section` element should have three `p` elements with the class set to `row`.
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
Your second `.section` element should have a `p` element with the class `row` and `total`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row.total')?.length === 1);
|
||||
```
|
||||
|
||||
Your `.row` elements should each have four `span` elements.
|
||||
|
||||
```js
|
||||
const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
|
||||
assert(rows?.every?.(row => row?.querySelectorAll('span')?.length === 4));
|
||||
```
|
||||
|
||||
Within each `.row` element, your first `span` element should have the class set to `name`.
|
||||
|
||||
```js
|
||||
const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
|
||||
assert(rows?.every?.(row => row?.querySelectorAll('span')?.[0]?.classList?.contains('name')));
|
||||
```
|
||||
|
||||
Within each `.row` element, your last `span` element should have the class set to `current`.
|
||||
|
||||
```js
|
||||
const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
|
||||
assert(rows?.every?.(row => row?.querySelectorAll('span')?.[3]?.classList?.contains('current')));
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 6193e55d97150c2ca7c9458a
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `h2` element below your second `.section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.nextElementSibling?.localName === 'h2');
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Net Worth`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[1]?.nextElementSibling?.textContent === 'Net Worth');
|
||||
```
|
||||
|
||||
You should create a new `div` element within your `#sheet` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` attribute set to `section`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('section'));
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 6193e5946b7ea12d8ce7b1c2
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your third `.section` element should have a `.row total` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total'));
|
||||
```
|
||||
|
||||
Your new `.row total` element should match the other `.row total` elements.
|
||||
|
||||
```js
|
||||
assert.deepEqual(document.querySelectorAll('.row.total')?.[0]?.innerHTML, document.querySelectorAll('.row.total')?.[2]?.innerHTML);
|
||||
```
|
||||
|
||||
Your third `.section` element should not have any other elements within it.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.previousElementSibling === null);
|
||||
assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.nextElementSibling === null);
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6193e5d66b67e32e5f0f930e
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
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.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Cash`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Cash');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$25`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$25');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$30`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$30');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$28`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[0];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$28');
|
||||
```
|
||||
|
||||
Your first `.notes` element should have the text `This is the cash we currently have on hand.`.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[0];
|
||||
assert(notes?.textContent === 'This is the cash we currently have on hand.');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<div id="sheet">
|
||||
<div id="header">
|
||||
<h1>Balance Sheet</h1>
|
||||
<h2>AcmeWidgetCorp</h2>
|
||||
<p class="row">
|
||||
<span>2019</span>
|
||||
<span>2020</span>
|
||||
<span class="current">2021</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Assets</h2>
|
||||
<div class="section">
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6193e7150dc89231b01a3515
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
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.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Checking`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[1];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Checking');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$54`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[1];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$54');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$56`.
|
||||
|
||||
```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.');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6193e8957e614d3b8eeb770f
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
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.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Savings`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Savings');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$500`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$500');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$650`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$650');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$728`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[2];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$728');
|
||||
```
|
||||
|
||||
Your third `.notes` element should have the text `Funds set aside for emergencies.`.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[2];
|
||||
assert(notes?.textContent === 'Funds set aside for emergencies.');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Liabilities</h2>
|
||||
<div class="section">
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 6193e8eba043903cf68598cd
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Total`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[3];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$579`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[3];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$579');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$736`.
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
--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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6193e9f7a92e7e3e1810b2f4
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
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.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Loans`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Loans');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$500`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$500');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$250`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$250');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$0`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[4];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$0');
|
||||
```
|
||||
|
||||
Your fourth `.notes` element should have the text `The outstanding balance on our startup loan.`.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[3];
|
||||
assert(notes?.textContent === 'The outstanding balance on our startup loan.');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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">
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6193ea793e49253eee1452d1
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
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.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Expenses`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Expenses');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$200`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$200');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$300`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$300');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$400`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[5];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$400');
|
||||
```
|
||||
|
||||
Your fifth `.notes` element should have the text `Annual anticipated expenses, such as payroll.`.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[4];
|
||||
assert(notes?.textContent === 'Annual anticipated expenses, such as payroll.');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6193ece0b46e03423cd66e78
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
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.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Credit`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Credit');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$50`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$50');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$50`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$50');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$75`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[6];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$75');
|
||||
```
|
||||
|
||||
Your fifth `.notes` element should have the text `The running balance on our line of credit.`.
|
||||
|
||||
```js
|
||||
const notes = document.querySelectorAll('.section > .notes')?.[5];
|
||||
assert(notes?.textContent === 'The running balance on our line of credit.');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<p class="row">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
<span class="notes"></span>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Net Worth</h2>
|
||||
<div class="section">
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 6193ed97ae313e4331c9078a
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `span` elements within your second `.row total` element the following text, in order: `Total`, `$750`, `$600`, and `$475`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Total`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `$750`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '$750');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$600`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$600');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$475`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[7];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$475');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
--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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 6193ededc017a2443f10429b
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In your final `.row total` element, give the `span` elements the following text, in order: `Total`, `-$171`, `$136`, and `$334`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `span` element should have the text `Total`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
|
||||
```
|
||||
|
||||
The second `span` element should have the text `-$171`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[1]?.textContent === '-$171');
|
||||
```
|
||||
|
||||
The third `span` element should have the text `$136`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[2]?.textContent === '$136');
|
||||
```
|
||||
|
||||
The fourth `span` element should have the text `$334`.
|
||||
|
||||
```js
|
||||
const row = document.querySelectorAll('.section > .row')?.[8];
|
||||
assert(row?.querySelectorAll('span')?.[3]?.textContent === '$334');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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">
|
||||
--fcc-editable-region--
|
||||
<p class="row total">
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="current"></span>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
<footer>Last Updated: December 2021</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 6193ee19d10be144d6bc9c46
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `body` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Your `body` selector should have a `text-align` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 6193f5169cdc684f60317783
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` selector should have a `font-family` property set to `Tahoma`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Tahoma');
|
||||
```
|
||||
|
||||
Your `body` selector should have a `color` property set to `#0a0a23`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 6193f6615b1bd85076fc5ef2
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `#sheet` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet'));
|
||||
```
|
||||
|
||||
Your `#sheet` selector should have a `text-align` property set to `left`.
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 6193f7074ca69153347fbc3a
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#sheet` selector should have a `margin` property set to `auto`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.margin === 'auto');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 6193f74b982e4c5449f51a47
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#sheet` selector should have a `padding` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.padding === '10px');
|
||||
```
|
||||
|
||||
Your `#sheet` selector should have a `border` property set to `2px solid #d0d0d5`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.border === '2px solid rgb(208, 208, 213)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Tahoma;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#sheet {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 6193f7904dc7ee554d12571f
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `header h2` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#header h2'));
|
||||
```
|
||||
|
||||
Your `header h2` selector should have a `font-size` property set to `1.3em`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.fontSize === '1.3em');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 6193f85ab1de4356da678090
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row'));
|
||||
```
|
||||
|
||||
Your `.row` selector should have a `display` property set to `flex`.
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 6193fa3224d7465850407d3d
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.name` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.name'));
|
||||
```
|
||||
|
||||
Your `.name` selector should have a `width` property set to `100%`.
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 6193fb8bef24145b57fbed00
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
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 the `: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%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `span:not(.name)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)'));
|
||||
```
|
||||
|
||||
Your `span:not(.name)` selector should have a `margin-left` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.marginLeft === '10px');
|
||||
```
|
||||
|
||||
Your `span:not(.name)` selector should have a `min-width` property set to `15%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.minWidth === '15%');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 6193fd22d907385efadb59c9
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span:not(.name)` selector should have a `text-align` property set to `right`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.textAlign === 'right');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,163 @@
|
||||
---
|
||||
id: 6193fe24beedd361f34f8e96
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `span[class="current"]` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]'));
|
||||
```
|
||||
|
||||
Your `span[class="current"]` selector should have a `font-style` property set to `italic`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]')?.fontStyle === '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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
span:not(.name) {
|
||||
margin-left: 10px;
|
||||
min-width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 6193febd52ffb76345956072
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
Start by giving your `.row` selector a `border-bottom` property set to `1px solid #0a0a23`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.row` selector should have a `border-bottom` property set to `1px solid #0a0a23`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row')?.borderBottom === '1px solid rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 6193ff2b1198596496b81450
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.row` selector should have a `padding` property set to `4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row')?.padding === '4px');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #0a0a23;
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,172 @@
|
||||
---
|
||||
id: 6193ff6c2a6138658b4ce2af
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row:nth-child(odd)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)'));
|
||||
```
|
||||
|
||||
Your `.row:nth-child(odd)` selector should have a `background-color` property set to `#dfdfe2`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)')?.backgroundColor === 'rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,180 @@
|
||||
---
|
||||
id: 6194034278b71f6940a50d91
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should change your selector to be `.row:nth-of-type(odd)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)'));
|
||||
```
|
||||
|
||||
You should not have a `.row:nth-child(odd)` selector.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)'));
|
||||
```
|
||||
|
||||
Your `.row:nth-of-type(odd)` selector should have a `background-color` property set to `#dfdfe2`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)')?.backgroundColor === 'rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 619403dacf51db6a79b47b52
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row:nth-of-type(even)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)'));
|
||||
```
|
||||
|
||||
Your `.row:nth-of-type(even)` selector should have a `background-color` property set to `#d0d0d5`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)')?.backgroundColor === 'rgb(208, 208, 213)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,185 @@
|
||||
---
|
||||
id: 6194079d7cbf586eba9539ff
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row:last-child` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:last-child'));
|
||||
```
|
||||
|
||||
Your `.row:last-child` selector should have a `background-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.backgroundColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `.row:last-child` selector should have a `margin-bottom` property set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.marginBottom === '30px');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.row:nth-of-type(odd) {
|
||||
background-color: #dfdfe2;
|
||||
}
|
||||
|
||||
.row:nth-of-type(even) {
|
||||
background-color: #d0d0d5;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 619409a3b1ec0b727ac2ab30
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `p[class~="total"]` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]'));
|
||||
```
|
||||
|
||||
Your `p[class~="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]')?.borderBottom === '4px double rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,189 @@
|
||||
---
|
||||
id: 61940bfdc4e2a874af766567
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Each of your `.row total` elements should have a `tabindex` attribute set to `1`.
|
||||
|
||||
```js
|
||||
const rows = [...document.querySelectorAll('.row.total')];
|
||||
assert(rows?.every(row => row.getAttribute('tabindex') === '1'));
|
||||
```
|
||||
|
||||
You should not set the `tabindex` on any other elements.
|
||||
|
||||
```js
|
||||
const elements = [...document.querySelectorAll('*[tabindex]')];
|
||||
assert(elements?.every(element => element.classList.contains('row') && element.classList.contains('total')));
|
||||
```
|
||||
|
||||
# --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>
|
||||
--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>
|
||||
</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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 61940e95c95cff77d0b2a310
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row[tabindex]:hover` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover'));
|
||||
```
|
||||
|
||||
Your `.row[tabindex]:hover` selector should have a `background-color` property set to `#99c9ff`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover')?.backgroundColor === '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>
|
||||
<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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 61940f551fa4db7967451be9
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
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 `:active` selector.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.row[tabindex]:focus` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus'));
|
||||
```
|
||||
|
||||
Your `.row[tabindex]:focus` selector should have a `background-color` property set to `#198eee`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.backgroundColor === 'rgb(25, 142, 238)');
|
||||
```
|
||||
|
||||
Your `.row[tabindex]:focus` selector should have a `color` property set to `white`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.color === 'white');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,193 @@
|
||||
---
|
||||
id: 6194108c6951ca7cae9596bd
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div > h2` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2'));
|
||||
```
|
||||
|
||||
Your `div > h2` selector should have a `background-color` property set to `#99c9ff`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.backgroundColor === '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>
|
||||
<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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 619410f7040d427d9c782db7
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#header h2` selector should have a `background` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.backgroundColor === 'transparent');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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;
|
||||
}
|
||||
|
||||
--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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,194 @@
|
||||
---
|
||||
id: 6194114534b4547e5177cb2a
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div > h2` selector should have a `font-size` property set to `1.3em`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.fontSize === '1.3em');
|
||||
```
|
||||
|
||||
Your `div > h2` selector should have a `padding` property set to `0 4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.padding === '0px 4px');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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 {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 619412990eaf9c80415b280d
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div ~ h2` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div ~ h2'));
|
||||
```
|
||||
|
||||
Your `div ~ h2` selector should have a `font-weight` property set to `normal`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div ~ h2')?.fontWeight === 'normal');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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 {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row[tabindex]:hover {
|
||||
background-color: #99c9ff;
|
||||
}
|
||||
|
||||
div > h2 {
|
||||
background-color: #99c9ff;
|
||||
font-size: 1.3em;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,202 @@
|
||||
---
|
||||
id: 6194135942d5e08174b8bab1
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `p + span` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span'));
|
||||
```
|
||||
|
||||
Your `p + span` selector should have a `font-size` property set to `0.8em`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontSize === '0.8em');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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 {
|
||||
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 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,384 @@
|
||||
---
|
||||
id: 619413f5c1218b82b7b56a60
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p + span` selector should have a `font-style` property set to `italic`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontStyle === 'italic');
|
||||
```
|
||||
|
||||
Your `p + span` selector should have a `color` property set to `#3b3b4f`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p + span')?.color === 'rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
<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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p + span {
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
color: #3b3b4f;
|
||||
}
|
||||
```
|
||||
@ -32,5 +32,6 @@
|
||||
"learn-css-grid-by-building-a-magazine": "Learn CSS Grid by Building a Magazine",
|
||||
"learn-typography-by-building-a-nutrition-label": "Learn Typography by Building a Nutrition Label",
|
||||
"learn-css-animation-by-building-a-ferris-wheel": "Learn CSS Animation by Building a Ferris Wheel",
|
||||
"learn-accessibility-by-building-a-quiz": "Learn Accessibility by Building a Quiz"
|
||||
"learn-accessibility-by-building-a-quiz": "Learn Accessibility by Building a Quiz",
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user