From 9cabc1db5c6f10271cca7229e0103e2cc5ee0660 Mon Sep 17 00:00:00 2001 From: Kris Koishigawa Date: Thu, 16 Dec 2021 16:26:53 +0900 Subject: [PATCH] feat: add more tests, fix wording and some CSS values --- .../step-008.md | 2 +- .../step-011.md | 2 +- .../step-012.md | 8 +++--- .../step-013.md | 2 +- .../step-015.md | 4 +-- .../step-016.md | 10 ++++++- .../step-017.md | 6 ++--- .../step-018.md | 10 +++++-- .../step-019.md | 26 +++++++++++++++++-- .../step-020.md | 20 +++++++++++++- .../step-021.md | 8 +++++- .../step-022.md | 14 +++++++--- .../step-023.md | 26 ++++++++++++++++--- .../step-024.md | 6 ++--- .../step-025.md | 10 +++++-- .../step-026.md | 6 ++--- .../step-027.md | 6 ++--- .../step-028.md | 6 ++--- .../step-029.md | 6 ++--- .../step-030.md | 6 ++--- .../step-031.md | 6 ++--- .../step-032.md | 8 +++--- .../step-033.md | 10 +++---- .../step-034.md | 26 ++++++++++++++----- .../step-035.md | 8 +++--- 25 files changed, 173 insertions(+), 69 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md index c8c04bb16c..40367e9c13 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md @@ -21,7 +21,7 @@ Create a new CSS rule that targets the `h1` element, and set the `text-align` pr # --hints-- -You should create an `h1` selector. +You should use an `h1` selector. ```js assert(new __helpers.CSSHelp(document).getStyle('h1')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md index 854aad12bb..6709dda70d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md @@ -27,7 +27,7 @@ You should create a `class` selector to target the `marker` `class`. assert(new __helpers.CSSHelp(document).getStyle('.marker')); ``` -Your `marker` CSS rule should have a `background-color` property set to `red`. +Your `.marker` CSS rule should have a `background-color` property set to `red`. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md index fde65d750b..ebe8571900 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md @@ -7,19 +7,19 @@ dashedName: step-12 # --description-- -Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the `marker` element is empty, it doesn't have any width or height by default. +Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the `marker` `div` element is empty, it doesn't have any width or height by default. -In your `marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`. +In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`. # --hints-- -Your `marker` CSS rule should have a `width` property set to `200px`. +Your `.marker` CSS rule should have a `width` property set to `200px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px'); ``` -Your `marker` CSS rule should have a `height` property set to `25px`. +Your `.marker` CSS rule should have a `height` property set to `25px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md index 0da4749b51..f629edfe7d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md @@ -15,7 +15,7 @@ To center your marker on the page, set its `margin` property to `auto`. This set # --hints-- -Your `marker` CSS rule should have a `margin` property set to `auto`. +Your `.marker` CSS rule should have a `margin` property set to `auto`. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md index 819a2f9b82..4bedf7485e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md @@ -11,11 +11,11 @@ While you have three separate `marker` elements, they look like one big rectangl When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value. -In your `marker` CSS rule, set the `margin` property to `10px auto`. +In your `.marker` CSS rule, set the `margin` property to `10px auto`. # --hints-- -Your `marker` CSS rule should have a `margin` property set to `10px auto`. +Your `.marker` CSS rule should have a `margin` property set to `10px auto`. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md index e95c88915e..16e5a947db 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md @@ -15,10 +15,18 @@ First, add the `class` `one` to the first `marker` `div` element. # --hints-- -Test 1 +You should add the `class` `one` to the first `marker` `div` element in the `container` `div`. ```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('one')); +``` +Your first `marker` `div` should have the classes `marker` and `one`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('one')); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-017.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-017.md index 4b77e1ac69..208e1edb18 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-017.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-017.md @@ -7,14 +7,14 @@ dashedName: step-17 # --description-- -Next, remove the `background-color` property and its value from the `marker` CSS rule. +Next, remove the `background-color` property and its value from the `.marker` CSS rule. # --hints-- -Test 1 +Your `.marker` CSS rule should not have a `background-color` property and value. ```js - +assert(!code.includes('background-color') && !new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md index d1535f641a..7b9b4fcb9c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md @@ -7,14 +7,20 @@ dashedName: step-18 # --description-- -Then, create a new CSS rule that targets the class `one` and set its `background-color` property to `red`. +Then, create a new CSS rule that targets the `class` `one` and set its `background-color` property to `red`. # --hints-- -Test 1 +You should use a `class` selector to target the `class` `one`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.one')); +``` +Your `.one` CSS rule should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md index 813444b2bb..886d9c9080 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md @@ -7,14 +7,36 @@ dashedName: step-19 # --description-- -Add the `class` `two` to the second `marker` `div`, and the `class` `three` to the third marker `div`. +Add the `class` `two` to the second `marker` `div`, and the `class` `three` to the third `marker` `div`. # --hints-- -Test 1 +You should add the `class` `two` to the second `marker` `div` element in the `container` `div`. ```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('two')); +``` +Your second `marker` `div` should have the classes `marker` and `two`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two')); +``` + +You should add the `class` `three` to the third `marker` `div` element in the `container` `div`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('three')); +``` + +Your third `marker` `div` should have the classes `marker` and `three`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('three')); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md index fa645e7f53..73dd634c8d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md @@ -13,10 +13,28 @@ Also, create a separate CSS rule that targets the `class` `three` and set its `b # --hints-- -Test 1 +You should use a `class` selector to target the `class` `two`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.two')); +``` +Your `.two` CSS rule should have a `background-color` property set to `green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); +``` + +You should use a `class` selector to target the `class` `three`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')); +``` + +Your `.three` CSS rule should have a `background-color` property set to `blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md index 8b5eaed43f..9f8fb56bde 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md @@ -15,10 +15,16 @@ Create a new CSS rule that targets the `container` `class` and set its `backgrou # --hints-- -Test 1 +You should use a `class` selector to target the `container` `class`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.container')); +``` +Your `.container` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-022.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-022.md index 567a1825dc..af7414e0be 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-022.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-022.md @@ -7,22 +7,28 @@ dashedName: step-22 # --description-- -A function is a piece of code that can take input and perform a specific action. The CSS `rgb` function accepts a values, or arguments, for red, green and blue, and produces a color: +A function is a piece of code that can take an input and perform a specific action. The CSS `rgb` function accepts a values, or arguments, for red, green, and blue, and produces a color: ```css rgb(red, green, blue); ``` -Each red, green, and blue value is a number from 0 to 255. 0 means that there's 0% of that color, and is black. 255 means that there's 100% of that color. +Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color. -In the `one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`. +In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`. # --hints-- -Test 1 +Your `.one` CSS rule should not use the `red` color keyword to set the `background-color` property. ```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red'); +``` +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-023.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-023.md index 9d606eda50..5e3175ae95 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-023.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-023.md @@ -7,16 +7,36 @@ dashedName: step-23 # --description-- -Notice that the `background-color` for `one` is still red. This is because you set the red value of the `rgb` function to the max of 255, or 100% red, and set both the green and blue values to 0. +Notice that the `background-color` for your marker is still red. This is because you set the red value of the `rgb` function to the max of `255`, or 100% red, and set both the green and blue values to `0`. -Now do the same for the other colors. In the `two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green. And in the `three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue. +Now use the `rgb` function to set the other colors. + +In the `.two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green, and `0` for the other values. And in the `.three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue, and `0` for the other values. # --hints-- -Test 1 +Your `.two` CSS rule should not use the `green` color keyword to set the `background-color` property. ```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green'); +``` +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +Your `.three` CSS rule should not use the `blue` color keyword to set the `background-color` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-024.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-024.md index f7868f4ce3..f8f86fc843 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-024.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-024.md @@ -9,14 +9,14 @@ dashedName: step-24 While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green. -In the `two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity. +In the `two` CSS rule, set the green value in the `rgb` function to `128` to lower its intensity. # --hints-- -Test 1 +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 0)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-025.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-025.md index f99265467b..06215e6ecb 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-025.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-025.md @@ -9,14 +9,20 @@ dashedName: step-25 Now add a little more vertical space between your markers and the edge of the `container` element they're in. -Use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier. +In the `.container` CSS rule, use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier. # --hints-- -Test 1 +You should not remove the `background-color` property and its value from the `.container` CSS rule. ```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); +``` +Your `.container` CSS rule should have a `padding` property set to `10px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-026.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-026.md index 6207947d65..964766f03b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-026.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-026.md @@ -9,14 +9,14 @@ dashedName: step-26 In the additive RGB color model, primary colors are colors that, when combined, create pure white. But for this to happen, each color needs to be at its highest intensity. -Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `two` CSS rule, set green back to the max value of `255`. +Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `.two` CSS rule, set green back to the max value of `255`. # --hints-- -Test 1 +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-027.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-027.md index 64fc87ceb4..fc74492fbc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-027.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-027.md @@ -9,14 +9,14 @@ dashedName: step-27 Now that you have the primary RGB colors, it's time to combine them. -For the `rgb` function in the `container` rule, set the red, green, and blue values to the max of `255`. +For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`. # --hints-- -Test 1 +Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-028.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-028.md index 6a465267ee..256363bf31 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-028.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-028.md @@ -9,14 +9,14 @@ dashedName: step-28 Secondary colors are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values. -To create the first secondary color, yellow, update the `rgb` function in the `one` CSS rule to combine pure red and pure green. +To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green. # --hints-- -Test 1 +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-029.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-029.md index 8cea54a8a5..9217b6d4c6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-029.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-029.md @@ -7,14 +7,14 @@ dashedName: step-29 # --description-- -To create the next secondary color, cyan, update the `rgb` function in the `two` CSS rule to combine pure green and pure blue. +To create the next secondary color, cyan, update the `rgb` function in the `.two` CSS rule to combine pure green and pure blue. # --hints-- -Test 1 +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-030.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-030.md index 224ff5346e..6bc59a682d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-030.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-030.md @@ -7,14 +7,14 @@ dashedName: step-30 # --description-- -To create the final secondary color, magenta, update the `rgb` function in the `three` CSS rule to combine pure blue and pure red. +To create the final secondary color, magenta, update the `rgb` function in the `.three` CSS rule to combine pure blue and pure red. # --hints-- -Test 1 +Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 255)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-031.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-031.md index c4a832410d..f7949d090e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-031.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-031.md @@ -9,14 +9,14 @@ dashedName: step-31 Now that you're familiar with secondary colors, you'll learn how to create tertiary colors. Tertiary colors are created by combining a primary with a nearby secondary color. -To create the tertiary color orange, update the `rgb` function in `one` so that red is at the max value, and set green to `128`. +To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule so that red is at the max value, and set green to `127`. # --hints-- -Test 1 +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 127, 0)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-032.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-032.md index 7504e6cc63..26770e0a75 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-032.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-032.md @@ -9,14 +9,14 @@ dashedName: step-32 Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. This is because orange is the combination of red and yellow, and falls between the two colors on the color wheel. -To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in `two` so that green is at the max value, and set blue to `128`. +To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in the `.two` CSS rule so that green is at the max value, and set blue to `127`. # --hints-- -Test 1 +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 127)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)'); ``` # --seed-- @@ -63,7 +63,7 @@ h1 { } .one { - background-color: rgb(255, 128, 0); + background-color: rgb(255, 127, 0); } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-033.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-033.md index 75e41b9fd2..6e30853a82 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-033.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-033.md @@ -7,14 +7,14 @@ dashedName: step-33 # --description-- -And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in `three` so that blue is at the max value, and set red to `128`. +And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in the `.three` CSS rule so that blue is at the max value, and set red to `127`. # --hints-- -Test 1 +Your `.three` CSS rule should have a `background-color` property set to `rgb(127, 0, 255)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)'); ``` # --seed-- @@ -61,11 +61,11 @@ h1 { } .one { - background-color: rgb(255, 128, 0); + background-color: rgb(255, 127, 0); } .two { - background-color: rgb(0, 255, 128); + background-color: rgb(0, 255, 127); } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-034.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-034.md index 4f7b8127e4..41a84196e6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-034.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-034.md @@ -9,18 +9,30 @@ dashedName: step-34 There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta). -To create chartreuse green, update the `rgb` function in `one` so that red is at `128`, and set green to the max value. +To create chartreuse green, update the `rgb` function in the `.one` rule so that red is at `127`, and set green to the max value. -For azure, update the `rgb` function in `two` so that green is at `128` and blue is at the max value. +For azure, update the `rgb` function in the `.two` rule so that green is at `127` and blue is at the max value. -And for rose, which is sometimes called bright pink, update the `rgb` function in `three` so that green is at `128` and red is at the max value. +And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` rule so that blue is at `127` and red is at the max value. # --hints-- -Test 1 +Your `.one` CSS rule should have a `background-color` property set to `rgb(127, 255, 0)`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)'); +``` +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)'); ``` # --seed-- @@ -68,15 +80,15 @@ h1 { --fcc-editable-region-- .one { - background-color: rgb(255, 128, 0); + background-color: rgb(255, 127, 0); } .two { - background-color: rgb(0, 255, 128); + background-color: rgb(0, 255, 127); } .three { - background-color: rgb(128, 0, 255); + background-color: rgb(127, 0, 255); } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-035.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-035.md index 1ebc420a33..040c747771 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-035.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-035.md @@ -9,7 +9,7 @@ dashedName: step-35 Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design. -First, in `one`, `two`, and `three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. +First, in the `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. # --hints-- @@ -64,15 +64,15 @@ h1 { --fcc-editable-region-- .one { - background-color: rgb(128, 255, 0); + background-color: rgb(127, 255, 0); } .two { - background-color: rgb(0, 128, 255); + background-color: rgb(0, 127, 255); } .three { - background-color: rgb(255, 0, 128); + background-color: rgb(255, 0, 127); } --fcc-editable-region--