diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 6a75f9c90f..3ee9ff3373 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -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": { diff --git a/client/src/pages/learn/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/index.md b/client/src/pages/learn/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/index.md new file mode 100644 index 0000000000..3064ac2853 --- /dev/null +++ b/client/src/pages/learn/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/index.md @@ -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. diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index a925d0bd69..dbc2a43ba0 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -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" } diff --git a/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json b/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json new file mode 100644 index 0000000000..f023fedd9e --- /dev/null +++ b/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json @@ -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" + ] + ] +} diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-001.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-001.md new file mode 100644 index 0000000000..82350bf963 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-001.md @@ -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 `` declaration. + +```js +assert(code.match(//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(//.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-002.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-002.md new file mode 100644 index 0000000000..a0b98f22a5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-002.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-003.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-003.md new file mode 100644 index 0000000000..e33823bcf7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-003.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +--fcc-editable-region-- +
+
+--fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-004.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-004.md new file mode 100644 index 0000000000..e7f4aad529 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-004.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-005.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-005.md new file mode 100644 index 0000000000..076f36934c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-005.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-006.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-006.md new file mode 100644 index 0000000000..2ac41d7e50 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-006.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-007.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-007.md new file mode 100644 index 0000000000..ad0761bfa0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-007.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +--fcc-editable-region-- + +--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-008.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-008.md new file mode 100644 index 0000000000..d47efae40a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-008.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-009.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-009.md new file mode 100644 index 0000000000..e6cfced0f1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-009.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+--fcc-editable-region-- +
+

+ +
+--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-010.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-010.md new file mode 100644 index 0000000000..a3ac6cbf3e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-010.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+--fcc-editable-region-- +
+

+ +

+ +

+ +
+--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-011.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-011.md new file mode 100644 index 0000000000..1be670f9d3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-011.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+--fcc-editable-region-- +

+ +

+--fcc-editable-region-- + +

+ +

+ +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-012.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-012.md new file mode 100644 index 0000000000..5034fa8b52 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-012.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+--fcc-editable-region-- +

+ + + + +

+ +

+ +

+ +

+--fcc-editable-region-- +
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-013.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-013.md new file mode 100644 index 0000000000..2d8a6036fa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-013.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-014.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-014.md new file mode 100644 index 0000000000..1785e231ee --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-014.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Liabilities

+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-015.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-015.md new file mode 100644 index 0000000000..fd5bb45be1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-015.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Liabilities

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-016.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-016.md new file mode 100644 index 0000000000..c1b06aeec8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-016.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Liabilities

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Net Worth

+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-017.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-017.md new file mode 100644 index 0000000000..4c791bb547 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-017.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+--fcc-editable-region-- +

+ + + + +

+ +--fcc-editable-region-- +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Liabilities

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-018.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-018.md new file mode 100644 index 0000000000..2b7bb39b9b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-018.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +--fcc-editable-region-- +

+ + + + +

+ +--fcc-editable-region-- +

+ + + + +

+ +

+ + + + +

+
+

Liabilities

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-019.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-019.md new file mode 100644 index 0000000000..a2ee4dabfd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-019.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +--fcc-editable-region-- +

+ + + + +

+ +--fcc-editable-region-- +

+ + + + +

+
+

Liabilities

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-020.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-020.md new file mode 100644 index 0000000000..f2debd0383 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-020.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +--fcc-editable-region-- +

+ + + + +

+--fcc-editable-region-- +
+

Liabilities

+
+

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-021.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-021.md new file mode 100644 index 0000000000..66b56a7114 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-021.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+--fcc-editable-region-- +

+ + + + +

+ +--fcc-editable-region-- +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-022.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-022.md new file mode 100644 index 0000000000..91bf239e30 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-022.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +--fcc-editable-region-- +

+ + + + +

+ +--fcc-editable-region-- +

+ + + + +

+ +

+ + + + +

+
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-023.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-023.md new file mode 100644 index 0000000000..2cf9464e02 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-023.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +--fcc-editable-region-- +

+ + + + +

+ +--fcc-editable-region-- +

+ + + + +

+
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-024.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-024.md new file mode 100644 index 0000000000..15547ee3b6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-024.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +--fcc-editable-region-- +

+ + + + +

+--fcc-editable-region-- +
+

Net Worth

+
+

+ + + + +

+
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-025.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-025.md new file mode 100644 index 0000000000..c69d8abdfe --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-025.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+--fcc-editable-region-- +

+ + + + +

+--fcc-editable-region-- +
+
+ + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-026.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-026.md new file mode 100644 index 0000000000..7876791cc3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-026.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-027.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-027.md new file mode 100644 index 0000000000..087ec6f2e5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-027.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```css +--fcc-editable-region-- +body { + text-align: center; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-028.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-028.md new file mode 100644 index 0000000000..6504424902 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-028.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```css +body { + text-align: center; + font-family: Tahoma; + color: #0a0a23; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-029.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-029.md new file mode 100644 index 0000000000..5b7401989c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-029.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```css +body { + text-align: center; + font-family: Tahoma; + color: #0a0a23; +} + +--fcc-editable-region-- +#sheet { + text-align: left; + max-width: 500px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-030.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-030.md new file mode 100644 index 0000000000..0ac61b3a76 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-030.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-031.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-031.md new file mode 100644 index 0000000000..26ffae7fe7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-031.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-032.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-032.md new file mode 100644 index 0000000000..301430b229 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-032.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-033.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-033.md new file mode 100644 index 0000000000..e6c3998830 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-033.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-034.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-034.md new file mode 100644 index 0000000000..bc0aefd6d5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-034.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-035.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-035.md new file mode 100644 index 0000000000..39fce2e761 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-035.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-036.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-036.md new file mode 100644 index 0000000000..e89d060513 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-036.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-037.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-037.md new file mode 100644 index 0000000000..710c99bcd1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-037.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-038.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-038.md new file mode 100644 index 0000000000..a70f189267 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-038.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-039.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-039.md new file mode 100644 index 0000000000..7c812448e9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-039.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-040.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-040.md new file mode 100644 index 0000000000..c19b5c9942 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-040.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-041.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-041.md new file mode 100644 index 0000000000..2758fba303 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-041.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-042.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-042.md new file mode 100644 index 0000000000..8cc7872422 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-042.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-043.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-043.md new file mode 100644 index 0000000000..164df72263 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-043.md @@ -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 selector specificity, 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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-044.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-044.md new file mode 100644 index 0000000000..4bc3b90f98 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-044.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +--fcc-editable-region-- +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+--fcc-editable-region-- + + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-045.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-045.md new file mode 100644 index 0000000000..818f4b4cc8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-045.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-046.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-046.md new file mode 100644 index 0000000000..030106a454 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-046.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-047.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-047.md new file mode 100644 index 0000000000..39c38baedf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-047.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-048.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-048.md new file mode 100644 index 0000000000..c2c33a5cdb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-048.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-049.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-049.md new file mode 100644 index 0000000000..a143e3b50c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-049.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-050.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-050.md new file mode 100644 index 0000000000..87bc1df6f7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-050.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-051.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-051.md new file mode 100644 index 0000000000..b2cf43d73c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-051.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-052.md b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-052.md new file mode 100644 index 0000000000..d58b3ca47f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-052.md @@ -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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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 + + + + + + AcmeWidgetCorp Balance Sheet + + + +
+ +

Assets

+
+

+ Cash + $25 + $30 + $28 +

+ This is the cash we currently have on hand. +

+ Checking + $54 + $56 + $53 +

+ Our primary transactional account. +

+ Savings + $500 + $650 + $728 +

+ Funds set aside for emergencies. +

+ Total + $579 + $736 + $809 +

+
+

Liabilities

+
+

+ Loans + $500 + $250 + $0 +

+ The outstanding balance on our startup loan. +

+ Expenses + $200 + $300 + $400 +

+ Annual anticipated expenses, such as payroll. +

+ Credit + $50 + $50 + $75 +

+ The running balance on our line of credit. +

+ Total + $750 + $600 + $475 +

+
+

Net Worth

+
+

+ Total + $-171 + $136 + $334 +

+
+
+ + + +``` + +```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; +} +``` diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json index a0a192fe54..7fda46a4d7 100644 --- a/utils/preformatted-block-names.json +++ b/utils/preformatted-block-names.json @@ -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" }