freeCodeCamp/part-096.md at 06da30e48acfdf57610152d1d95bd49837dee896

Files

Randell Dawson b9c9a95223 chore(learn): Renamed all project-based curriculum project step filenames to use 3-digit format of part-ddd.md (#39463 )

* fix: renamed basic html cat photo app steps

* fix: renamed css-variables project steps

* fix: renamed d3-dashboard filenames

* fix: renamed rpg-game filenames

* fix: renamed functional-progamming-spreadsheet filenames

* fix: renamed calorie-counter project filenames

2020-09-16 11:54:12 +05:30

15 KiB

Raw Blame History

id, title, challengeType, isHidden

id	title	challengeType	isHidden
5d822fd413a79914d39e9929	Part 96	0	true

Description

Only three more building to go. Nest two new div elements within the fb4 element and give them the classes of fb4a and fb4b, in that order. Remember that you sort of flipped the location of fb4 and fb5, so it's the rightmost purple building you are working on now.

Instructions

Tests

tests:
  - text: test-text
    testString: const fb4 = $(".fb4").children("div"); assert(fb4.length === 2 && fb4[0] === $("div.fb4a")[0] && fb4[1] === $("div.fb4b")[0]);

Challenge Seed

<!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: #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%;
        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 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>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Solution

<!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: #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%;
        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 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>
      </div>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

15 KiB Raw Blame History