diff --git a/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json b/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json index 97dccaed95c..0cef9a57048 100644 --- a/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json +++ b/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json @@ -181,100 +181,104 @@ "title": "Step 43" }, { - "id": "615f6cc778f7698258467596", + "id": "667d1bb875f5961913176069", "title": "Step 44" }, { - "id": "615f6fddaac1e083502d3e6a", + "id": "615f6cc778f7698258467596", "title": "Step 45" }, { - "id": "615f70077a4ff98424236c1e", + "id": "615f6fddaac1e083502d3e6a", "title": "Step 46" }, { - "id": "615f72a872354a850d4f533e", + "id": "615f70077a4ff98424236c1e", "title": "Step 47" }, { - "id": "615f74a71f1e498619e38ee8", + "id": "615f72a872354a850d4f533e", "title": "Step 48" }, { - "id": "615f7ad94380408d971d14f6", + "id": "615f74a71f1e498619e38ee8", "title": "Step 49" }, { - "id": "615f7bc680f7168ea01ebf99", + "id": "615f7ad94380408d971d14f6", "title": "Step 50" }, { - "id": "615f7c71eab8218f846e4503", + "id": "615f7bc680f7168ea01ebf99", "title": "Step 51" }, { - "id": "615f7d489a581590d1350288", + "id": "615f7c71eab8218f846e4503", "title": "Step 52" }, { - "id": "615f7de4487b64919bb4aa5e", + "id": "615f7d489a581590d1350288", "title": "Step 53" }, { - "id": "615f7e7281626a92bbd62da8", + "id": "615f7de4487b64919bb4aa5e", "title": "Step 54" }, { - "id": "615f7ecb09de9a938ef94756", + "id": "615f7e7281626a92bbd62da8", "title": "Step 55" }, { - "id": "615f7fa959ab75948f96a0d6", + "id": "615f7ecb09de9a938ef94756", "title": "Step 56" }, { - "id": "615f808d85793195b0f53be9", + "id": "615f7fa959ab75948f96a0d6", "title": "Step 57" }, { - "id": "615f829d07b18f96f6f6684b", + "id": "615f808d85793195b0f53be9", "title": "Step 58" }, { - "id": "615f83ef928ec9982b785b6a", + "id": "615f829d07b18f96f6f6684b", "title": "Step 59" }, { - "id": "615f84f246e8ba98e3cd97be", + "id": "615f83ef928ec9982b785b6a", "title": "Step 60" }, { - "id": "615f887466db4ba14b5342cc", + "id": "615f84f246e8ba98e3cd97be", "title": "Step 61" }, { - "id": "615f89e055040ba294719d2f", + "id": "615f887466db4ba14b5342cc", "title": "Step 62" }, { - "id": "615f8bfe0f30a1a3c340356b", + "id": "615f89e055040ba294719d2f", "title": "Step 63" }, { - "id": "615f8f1223601fa546e93f31", + "id": "615f8bfe0f30a1a3c340356b", "title": "Step 64" }, { - "id": "615f905fbd1017a65ca224eb", + "id": "615f8f1223601fa546e93f31", "title": "Step 65" }, { - "id": "615f94786869e1a7fec54375", + "id": "615f905fbd1017a65ca224eb", "title": "Step 66" }, { - "id": "615f951dff9317a900ef683f", + "id": "615f94786869e1a7fec54375", "title": "Step 67" + }, + { + "id": "615f951dff9317a900ef683f", + "title": "Step 68" } ] } \ No newline at end of file diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md index c843342439d..74ebd1c18c8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md @@ -7,7 +7,7 @@ dashedName: step-43 # --description-- -After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Wrap the text `Total Fat` in a `span` element with the `class` of `bold`. Wrap the text `10%` in another `span` element with the `class` of `bold`. Finally, nest the `Total Fat` `span` element and the text `8g` in an additional `span` element for alignment. +After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`. # --hints-- @@ -23,22 +23,22 @@ Your new `p` element should have the text `Total Fat 8g 10%`. assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/)); ``` -Your `p` element should have three `span` elements. +Your `p` element should have two `span` elements. ```js -assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` One `span` element should wrap the text `Total Fat`. ```js -assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.innerText === 'Total Fat'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); ``` The `span` element around `Total Fat` should have the `class` set to `bold`. ```js -assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.className === 'bold'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); ``` A `span` element should wrap the text `10%`. @@ -53,12 +53,6 @@ The `span` element around `10%` should have the `class` set to `bold`. assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold'); ``` -A `span` element should have the text `Total Fat 8g`. - -```js -assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g/)); -``` - # --seed-- ## --seed-contents-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md index 07e12417a55..de2aab31501 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md @@ -1,8 +1,8 @@ --- id: 615f6cc778f7698258467596 -title: Step 44 +title: Step 45 challengeType: 0 -dashedName: step-44 +dashedName: step-45 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md index adf5aa23be3..5f2aad0b622 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md @@ -1,8 +1,8 @@ --- id: 615f6fddaac1e083502d3e6a -title: Step 45 +title: Step 46 challengeType: 0 -dashedName: step-45 +dashedName: step-46 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md index 36be7b4049e..2e1a5c3f796 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md @@ -1,8 +1,8 @@ --- id: 615f70077a4ff98424236c1e -title: Step 46 +title: Step 47 challengeType: 0 -dashedName: step-46 +dashedName: step-47 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md index 9efb21af257..1d696789f31 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md @@ -1,8 +1,8 @@ --- id: 615f72a872354a850d4f533e -title: Step 47 +title: Step 48 challengeType: 0 -dashedName: step-47 +dashedName: step-48 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md index ff3c272798d..96cbc9639f9 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md @@ -1,8 +1,8 @@ --- id: 615f74a71f1e498619e38ee8 -title: Step 48 +title: Step 49 challengeType: 0 -dashedName: step-48 +dashedName: step-49 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md index 4172622316e..986cfd9077c 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md @@ -1,8 +1,8 @@ --- id: 615f7ad94380408d971d14f6 -title: Step 49 +title: Step 50 challengeType: 0 -dashedName: step-49 +dashedName: step-50 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md index 552d8d73f9b..aac27eb5b6d 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md @@ -1,8 +1,8 @@ --- id: 615f7bc680f7168ea01ebf99 -title: Step 50 +title: Step 51 challengeType: 0 -dashedName: step-50 +dashedName: step-51 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md index dcdcd75bb31..6504be1b042 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md @@ -1,8 +1,8 @@ --- id: 615f7c71eab8218f846e4503 -title: Step 51 +title: Step 52 challengeType: 0 -dashedName: step-51 +dashedName: step-52 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md index 29fed221251..b038b1dfc23 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md @@ -1,8 +1,8 @@ --- id: 615f7d489a581590d1350288 -title: Step 52 +title: Step 53 challengeType: 0 -dashedName: step-52 +dashedName: step-53 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md index 5ccebcaba77..ce39f09eae5 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md @@ -1,13 +1,15 @@ --- id: 615f7de4487b64919bb4aa5e -title: Step 53 +title: Step 54 challengeType: 0 -dashedName: step-53 +dashedName: step-54 --- # --description-- -After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` of `bold`. Wrap the text `0%` in another `span` element, with the `class` of `bold`. Finally, nest the `Cholesterol` `span` element and the text `0mg` in an additional `span` element for alignment. +After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`. + +Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index 2b2158d940b..f165c8568fd 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -1,13 +1,15 @@ --- id: 615f7e7281626a92bbd62da8 -title: Step 54 +title: Step 55 challengeType: 0 -dashedName: step-54 +dashedName: step-55 --- # --description-- -Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Wrap the text `Sodium` in a `span` element with a `class` attribute set to `bold`. Wrap the `7%` text in another `span` element with the `class` set to `bold`. Also add an additional `span` element around `Sodium 160mg` for aligning it correctly. +Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others. + +Then, add an additional `span` element around `Sodium 160mg` for alignment again. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md index e1d73afb7d5..58d410f432a 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md @@ -1,13 +1,13 @@ --- id: 615f7ecb09de9a938ef94756 -title: Step 55 +title: Step 56 challengeType: 0 -dashedName: step-55 +dashedName: step-56 --- # --description-- -Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element around the `Total Carbohydrate 37g` text to have it aligned to the left and `13%` to the right. +Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md index a7b99d026c4..15003310e7c 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md @@ -1,8 +1,8 @@ --- id: 615f7fa959ab75948f96a0d6 -title: Step 56 +title: Step 57 challengeType: 0 -dashedName: step-56 +dashedName: step-57 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md index ed558199175..b47f77498e2 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md @@ -1,8 +1,8 @@ --- id: 615f808d85793195b0f53be9 -title: Step 57 +title: Step 58 challengeType: 0 -dashedName: step-57 +dashedName: step-58 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md index e4baa0707cb..d7b411b930c 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md @@ -1,8 +1,8 @@ --- id: 615f829d07b18f96f6f6684b -title: Step 58 +title: Step 59 challengeType: 0 -dashedName: step-58 +dashedName: step-59 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md index 0dc35820454..1c85a5b53a2 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md @@ -1,8 +1,8 @@ --- id: 615f83ef928ec9982b785b6a -title: Step 59 +title: Step 60 challengeType: 0 -dashedName: step-59 +dashedName: step-60 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md index aaf2ace3289..a39f4b879ce 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md @@ -1,8 +1,8 @@ --- id: 615f84f246e8ba98e3cd97be -title: Step 60 +title: Step 61 challengeType: 0 -dashedName: step-60 +dashedName: step-61 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md index ffd837e5ede..d4af4e85bd4 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md @@ -1,8 +1,8 @@ --- id: 615f887466db4ba14b5342cc -title: Step 61 +title: Step 62 challengeType: 0 -dashedName: step-61 +dashedName: step-62 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md index 6718bf34d3f..0477e6cf301 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md @@ -1,8 +1,8 @@ --- id: 615f89e055040ba294719d2f -title: Step 62 +title: Step 63 challengeType: 0 -dashedName: step-62 +dashedName: step-63 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md index d95e4c924e5..1f4bf4fb226 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md @@ -1,8 +1,8 @@ --- id: 615f8bfe0f30a1a3c340356b -title: Step 63 +title: Step 64 challengeType: 0 -dashedName: step-63 +dashedName: step-64 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md index 38b871e93f4..9734aee18e8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md @@ -1,8 +1,8 @@ --- id: 615f8f1223601fa546e93f31 -title: Step 64 +title: Step 65 challengeType: 0 -dashedName: step-64 +dashedName: step-65 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md index 17b5acd5d9c..c098518ca56 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md @@ -1,8 +1,8 @@ --- id: 615f905fbd1017a65ca224eb -title: Step 65 +title: Step 66 challengeType: 0 -dashedName: step-65 +dashedName: step-66 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md index e8cf9b1fd24..0dd1ac2ee22 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md @@ -1,8 +1,8 @@ --- id: 615f94786869e1a7fec54375 -title: Step 66 +title: Step 67 challengeType: 0 -dashedName: step-66 +dashedName: step-67 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md index e83b6d7d805..845b9f2d7fe 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -1,8 +1,8 @@ --- id: 615f951dff9317a900ef683f -title: Step 67 +title: Step 68 challengeType: 0 -dashedName: step-67 +dashedName: step-68 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/667d1bb875f5961913176069.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/667d1bb875f5961913176069.md new file mode 100644 index 00000000000..170468d17b2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/667d1bb875f5961913176069.md @@ -0,0 +1,147 @@ +--- +id: 667d1bb875f5961913176069 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment. + +# --hints-- + +You should have a `span` element around the code `Total Fat 8g`. + +```js +assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^Total Fat<\/span> 8g\s?$/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Nutrition Label + + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+
+

Amount per serving

+

Calories

+
+ 230 +
+
+
+

% Daily Value *

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

Total Fat 8g 10%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, .medium { + background-color: black; + border: 0; +} + +.medium { + height: 5px; +} + +.small-text { + font-size: 0.85rem; +} + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { + margin: -5px -2px; + font-size: 2em; + font-weight: 700; +} + +.calories-info span { + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; +} +```