freeCodeCamp/use-abbreviated-hex-code.english.md at 36cf2b1ca59103ededeaf39b7dfacb2969ac7f95

Files

Oliver Eyton-Williams f1c9b08cf3 fix(curriculum): add isHidden: false to challenges

This includes certificates (where it does nothing), but does not
include any translations.

2020-05-25 16:25:19 +05:30

3.6 KiB

Raw Blame History

id, title, challengeType, isHidden, videoUrl, forumTopicId

id	title	challengeType	isHidden	videoUrl	forumTopicId
bad87fee1348bd9aedf08719	Use Abbreviated Hex Code	0	false	https://scrimba.com/c/cRkpKAm	18338

Description

Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it. For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue. This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.

Instructions

Go ahead, try using the abbreviated hex codes to color the correct elements.

Color	Short Hex Code
Cyan	`#0FF`
Green	`#0F0`
Red	`#F00`
Fuchsia	`#F0F`

Tests

tests:
  - text: Your <code>h1</code> element with the text <code>I am red!</code> should be given the <code>color</code> red.
    testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
  - text: The abbreviated <code>hex code</code> for the color red should be used instead of the hex code <code>#FF0000</code>.
    testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
  - text: Your <code>h1</code> element with the text <code>I am green!</code> should be given the <code>color</code> green.
    testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
  - text: The abbreviated <code>hex code</code> for the color green should be used instead of the hex code <code>#00FF00</code>.
    testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
  - text: Your <code>h1</code> element with the text <code>I am cyan!</code> should be given the <code>color</code> cyan.
    testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
  - text: The abbreviated <code>hex code</code> for the color cyan should be used instead of the hex code <code>#00FFFF</code>.
    testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
  - text: Your <code>h1</code> element with the text <code>I am fuchsia!</code> should be given the <code>color</code> fuchsia.
    testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
  - text: The abbreviated <code>hex code</code> for the color fuchsia should be used instead of the hex code <code>#FF00FF</code>.
    testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));

Challenge Seed

<style>
  .red-text {
    color: #000000;
  }
  .fuchsia-text {
    color: #000000;
  }
  .cyan-text {
    color: #000000;
  }
  .green-text {
    color: #000000;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>

Solution

<style>
  .red-text {
    color: #F00;
  }
  .fuchsia-text {
    color: #F0F;
  }
  .cyan-text {
    color: #0FF;
  }
  .green-text {
    color: #0F0;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>

3.6 KiB Raw Blame History