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

13 KiB

Raw Blame History

id, title, challengeType, dashedName

id	title	challengeType	dashedName
5d822fd413a79914d39e9921	Part 88	0	part-88

--description--

For the next building, nest four div elements within fb3 with classes of fb3a, fb3b, fb3a again, and fb3b again, in that order. This building will have four sections and the top two will be almost the same as the bottom two.

--hints--

test-text

const fb3 = $('.fb3').children('div');
console.log(fb3);
assert(
  fb3.length === 4 &&
    fb3[0] === $('div.fb3a')[0] &&
    fb3[1] === $('div.fb3b')[0] &&
    fb3[2] === $('div.fb3a')[1] &&
    fb3[3] === $('div.fb3b')[1]
);

--seed--

--seed-contents--

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <style>
      :root {
        --building-color1: #aa80ff;
        --building-color2: #66cc99;
        --building-color3: #cc6699;
        --building-color4: #538cc6;
        --window-color1: black;
        --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%;
        background-color: var(--building-color1);
      }
  
      .fb4 {
        width: 8%;
        height: 45%;
        background-color: var(--building-color1);
        position: relative;
        left: 10%;
      }
      
      .fb5 {
        width: 10%;
        height: 33%;
        background-color: var(--building-color2);
        position: relative;
        right: 10%;
      }

      .fb6 {
        width: 9%;
        height: 38%;
        background-color: var(--building-color3);
      }
    </style>
  </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"></div>
      <div class="fb4"></div>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

--solutions--

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <style>
      :root {
        --building-color1: #aa80ff;
        --building-color2: #66cc99;
        --building-color3: #cc6699;
        --building-color4: #538cc6;
        --window-color1: black;
        --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%;
        background-color: var(--building-color1);
      }
  
      .fb4 {
        width: 8%;
        height: 45%;
        background-color: var(--building-color1);
        position: relative;
        left: 10%;
      }
      
      .fb5 {
        width: 10%;
        height: 33%;
        background-color: var(--building-color2);
        position: relative;
        right: 10%;
      }

      .fb6 {
        width: 9%;
        height: 38%;
        background-color: var(--building-color3);
      }
    </style>
  </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">
        <div class="fb3a"></div>
        <div class="fb3b"></div>
        <div class="fb3a"></div>
        <div class="fb3b"></div>
      </div>
      <div class="fb4"></div>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

13 KiB Raw Blame History