gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
fa84f6c449e615298c40fb5de94c43419b1d5db3
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.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

7.1 KiB
Raw Blame History

id, title, challengeType, dashedName
id title challengeType dashedName
5d822fd413a79914d39e9915 Part 106 0 part-106

--description--

You don't need the background-color for this building anymore so you can remove that property.

--hints--

You should remove the background-color of .fb5.

assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);

--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></div>
      <div></div>
      <div class="bb1 building-wrap">
        <div class="bb1a bb1-window"></div>
        <div class="bb1b bb1-window"></div>
        <div class="bb1c bb1-window"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2">
        <div class="bb2a"></div>
        <div class="bb2b"></div>
      </div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4 building-wrap">
        <div class="bb4a"></div>
        <div class="bb4b"></div>
        <div class="bb4c window-wrap">
          <div class="bb4-window"></div>
          <div class="bb4-window"></div>
          <div class="bb4-window"></div>
          <div class="bb4-window"></div>
        </div>
      </div>
      <div></div>
      <div></div>
    </div>

    <div class="foreground-buildings">
      <div></div>
      <div></div>
      <div class="fb1 building-wrap">
        <div class="fb1a"></div>
        <div class="fb1b"></div>
        <div class="fb1c"></div>
      </div>
      <div class="fb2">
        <div class="fb2a"></div>
        <div class="fb2b window-wrap">
          <div class="fb2-window"></div>
          <div class="fb2-window"></div>
          <div class="fb2-window"></div>
        </div>
      </div>
      <div></div>
      <div class="fb3 building-wrap">
        <div class="fb3a window-wrap">
          <div class="fb3-window"></div>
          <div class="fb3-window"></div>
          <div class="fb3-window"></div>
        </div>
        <div class="fb3b"></div>
        <div class="fb3a"></div>
        <div class="fb3b"></div>
      </div>
      <div class="fb4">
        <div class="fb4a"></div>
        <div class="fb4b">
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
        </div>
      </div>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

:root {
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
  --building-color3: #cc6699;
  --building-color4: #538cc6;
  --window-color1: #bb99ff;
  --window-color2: #8cd9b3;
  --window-color3: #d98cb3;
  --window-color4: #8cb3d9;
}

* {
  border: 1px solid black;
  box-sizing: border-box;
}

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

.background-buildings, .foreground-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  position: absolute;
  top: 0;
}

.building-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.window-wrap {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
  width: 10%;
  height: 70%;
}

.bb1a {
  width: 70%;
}
  
.bb1b {
  width: 80%;
}
  
.bb1c {
  width: 90%;
}

.bb1d {
  width: 100%;
  height: 70%;
  background: linear-gradient(
      var(--building-color1) 50%,
      var(--window-color1)
    );
}

.bb1-window {
  height: 10%;
  background: linear-gradient(
      var(--building-color1),
      var(--window-color1)
    );
}

.bb2 {
  width: 10%;
  height: 50%;
}

.bb2a {
  border-bottom: 5vh solid var(--building-color2);
  border-left: 5vw solid transparent;
  border-right: 5vw solid transparent;
}

.bb2b {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      var(--building-color2),
      var(--building-color2) 6%,
      var(--window-color2) 6%,
      var(--window-color2) 9%
    );
}

.bb3 {
  width: 10%;
  height: 55%;
  background: repeating-linear-gradient(
      90deg,
      var(--building-color3),
      var(--building-color3),
      var(--window-color3) 15%
    );
}

.bb4 {
  width: 11%;
  height: 58%;
}

.bb4a {
  width: 3%;
  height: 10%;
  background-color: var(--building-color4);
}

.bb4b {
  width: 80%;
  height: 5%;
  background-color: var(--building-color4);
}
  
.bb4c {
  width: 100%;
  height: 85%;
  background-color: var(--building-color4);
}

.bb4-window {
  width: 18%;
  height: 90%;
  background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
  width: 10%;
  height: 60%;
}

.fb1a {
  border-bottom: 7vh solid var(--building-color4);
  border-left: 2vw solid transparent;
  border-right: 2vw solid transparent;
}

.fb1b {
  width: 60%;
  height: 10%;
  background-color: var(--building-color4);
}
  
.fb1c {
  width: 100%;
  height: 80%;
  background: repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    ),
    repeating-linear-gradient(
      var(--building-color4),
      var(--building-color4) 10%,
      var(--window-color4) 10%,
      var(--window-color4) 90%
    );
}

.fb2 {
  width: 10%;
  height: 40%;
}

.fb2a {
  width: 100%;
  border-bottom: 10vh solid var(--building-color3);
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
}

.fb2b {
  width: 100%;
  height: 75%;
  background-color: var(--building-color3);
}

.fb2-window {
  width: 22%;
  height: 100%;
  background-color: var(--window-color3);
}

.fb3 {
  width: 10%;
  height: 35%;
}
  
.fb3a {
  width: 80%;
  height: 15%;
  background-color: var(--building-color1);
}
  
.fb3b {
  width: 100%;
  height: 35%;
  background-color: var(--building-color1);
}

.fb3-window {
  width: 25%;
  height: 80%;
  background-color: var(--window-color1);
}

.fb4 {
  width: 8%;
  height: 45%;
  position: relative;
  left: 10%;
}

.fb4a {
  border-top: 5vh solid transparent;
  border-left: 8vw solid var(--building-color1);
}

.fb4b {
  width: 100%;
  height: 89%;
  background-color: var(--building-color1);
  display: flex;
  flex-wrap: wrap;
}

.fb4-window {
  width: 30%;
  height: 10%;
  border-radius: 50%;
  background-color: var(--window-color1);
  margin: 10%;
}
--fcc-editable-region--
.fb5 {
  width: 10%;
  height: 33%;
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
  background: repeating-linear-gradient(
      var(--building-color2),
      var(--building-color2) 5%,
      transparent 5%,
      transparent 10%
    ),
    repeating-linear-gradient(
      90deg,
      var(--building-color2),
      var(--building-color2) 12%,
      var(--window-color2) 12%,
      var(--window-color2) 44%
    );
}
--fcc-editable-region--
.fb6 {
  width: 9%;
  height: 38%;
  background-color: var(--building-color3);
}