freeCodeCamp/part-088.md at b9c9a9522387ca8e450b5dd2b9a9ece87bdb4ded

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

14 KiB

Raw Blame History

id, title, challengeType, isHidden

id	title	challengeType	isHidden
5d822fd413a79914d39e9921	Part 88	0	true

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.

Instructions

Tests

tests:
  - text: test-text
    testString: 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]);

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: 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>

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: 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>

14 KiB Raw Blame History