3.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf08719	Usa código hexadecimal (hex code) abreviado	0	https://scrimba.com/c/cRkpKAm	18338	use-abbreviated-hex-code

--description--

Muchas personas se sienten abrumadas por tener más de 16 millones de colores posibles. Además, los códigos hexadecimales resultan difíciles de recordar. Afortunadamente, puedes abreviar gran parte de ellos.

Por ejemplo, el código hexadecimal #FF0000 del color rojo puede acortarse a #F00. Esta forma abreviada utiliza un dígito para el rojo, un dígito para el verde, y un dígito para el azul.

Esto reduce el número total de colores posibles a alrededor de 4.000. Sin embargo, los navegadores interpretarán que #FF0000 y #F00 son exactamente el mismo color.

--instructions--

¡Pruébalo! Intenta usar los códigos hexadecimales abreviados para asignar colores a los elementos como se indica a continuación.

Color	Hex code abreviado
Cyan (cian)	`#0FF`
Green (verde)	`#0F0`
Red (rojo)	`#F00`
Fuchsia (fucsia)	`#F0F`

--hints--

Debes asignar al elemento h1 que tiene el texto I am red! ("¡Soy de color rojo!) el color rojo.

assert($('.red-text').css('color') === 'rgb(255, 0, 0)');

Debes usar el hex code abreviado para el color rojo en lugar del código hexadecimal #FF0000.

assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));

Debes asignar al elemento h1 que tiene el texto I am green! ("¡Soy de color verde!) el color verde.

assert($('.green-text').css('color') === 'rgb(0, 255, 0)');

Debes usar el hex code abreviado para el color verde en lugar del código hexadecimal #00FF00.

assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));

Debes asignar al elemento h1 que tiene el texto I am cyan! ("¡Soy de color cian!) el color cian.

assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');

Debes usar el hex code abreviado para el color cian en lugar del código hexadecimal #00FFFF.

assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));

Debes asignar al elemento h1 que tiene el texto I am fuchsia! ("¡Soy de color fucsia!) el color fucsia.

assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');

Debes usar el hex code abreviado para el color fucsia en lugar del código hexadecimal #FF00FF.

assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));

--seed--

--seed-contents--

<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>

--solutions--

<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.4 KiB Raw Blame History