Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md
Shaun Hamilton ff20199e63 feat(curriculum): add tests to css variables skyline (#42067)
* add(tests): parts 1-2

* refactor for multi-file editor, and add temp css tests

* re-re-rebasing

* add link to subsequent challenges

* add test strings to 007-015

* add final tests 001-016

* fix 005-007, add 017-022 tests and test strings

* add: tests 021-030, and formatting

* add: 031-034 tests

* tests: add 035-046

* fix: test in 021

* tests: add 047-050

* format: 009, 051-118 remove css whitespace

* tests: add 051-078

* tests: add 079-105

* tests: add 104-118

* fix: empty -> isEmpty, and include -> match

* fix: correct editable region

* fix: formatting and spelling

* fix: test logic, and add TODO for whitespace

* fix: add final part solution 🤦‍♂️

* fix typo in part-006

* remove whitespace in prep

* getStyleDeclaration -> getStyle

* remove editable region from solution 🤦‍♂️

* fix: correct tests to fail on initial

* fix: add missing regex

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* fix: correct tests

* remove commas and stuff 🤷‍♂️

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* uppercaserise doctype

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add "the"

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* remove half-colon

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* use more boring form of the word "shoudl"

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add suggestions to tests

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md

* fix: the few commits I couldn't add on github

* fix: lesson 41

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2021-07-15 22:46:40 -05:00

2.3 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
5d822fd413a79914d39e98d8 Part 16 0 part-16

--description--

Use the same variable as the background-color of the .bb1b, .bb1c, and .bb1d classes to fill in the rest of the building.

--hints--

The background-color of the bb1b element should be set.

assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)

You should use var(--building-color1) to set the background-color of the .bb1b element.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)');

The background-color of the bb1c element should be set.

assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)

You should use var(--building-color1) to set the background-color of the .bb1c element.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)');

The background-color of the bb1d element should be set.

assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)

You should use var(--building-color1) to set the background-color of the .bb1d element.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)');

--seed--

--seed-contents--

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />   
  </head>

  <body>
    <div class="background-buildings">
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
    </div>
  </body>
</html>
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #999;
}

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
}
--fcc-editable-region--
.bb1b {
  width: 80%;
  height: 10%;
}

.bb1c {
  width: 90%;
  height: 10%;
}

.bb1d {
  width: 100%;
  height: 70%;
}
--fcc-editable-region--