Oliver Eyton-Williams ee1e8abd87

feat(curriculum): restore seed + solution to Chinese (#40683 )

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>

2021-01-12 19:31:00 -07:00

2.6 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf07756	Override All Other Styles by using Important	0	https://scrimba.com/c/cm24rcp	18249	override-all-other-styles-by-using-important

--description--

Yay! We just proved that inline styles will override all the CSS declarations in your style element.

But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.

In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important

Let's go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and inline styles.

--instructions--

Let's add the keyword !important to your pink-text element's color declaration to make 100% sure that your h1 element will be pink.

An example of how to do this is:

color: red !important;

--hints--

Your h1 element should have the class pink-text.

assert($('h1').hasClass('pink-text'));

Your h1 element should have the class blue-text.

assert($('h1').hasClass('blue-text'));

Your h1 element should have the id of orange-text.

assert($('h1').attr('id') === 'orange-text');

Your h1 element should have the inline style of color: white.

assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));

Your pink-text class declaration should have the !important keyword to override all other declarations.

assert(
  code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
);

Your h1 element should be pink.

assert($('h1').css('color') === 'rgb(255, 192, 203)');

--seed--

--seed-contents--

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

--solutions--

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

2.6 KiB Raw Blame History