freeCodeCamp/part-15.md at 4f1be63055a305fde01ec43be6b2e3bd4e38d880

Kris Koishigawa 4f1be63055 feat(learn): sync master and next-curriculum branches

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

3.1 KiB

Raw Blame History

id, title, challengeType, isHidden

id	title	challengeType	isHidden
5d822fd413a79914d39e98d7	Part 15	0	true

Description

To use a variable, just put the variable name in parenthesis with var in front of them like this: var(--variable-name). Add your variable as the value of the background-color property of the bb1a class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of #999. So #999 will be used as the value for the background-color property.

Instructions

Tests

tests:
  - text: test-text
    testString: const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1aStyle));

Challenge Seed

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <style>
      * {
        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%;
      }
  
      .bb1b {
        width: 80%;
        height: 10%;
      }
  
      .bb1c {
        width: 90%;
        height: 10%;
      }

      .bb1d {
        width: 100%;
        height: 70%;
      }
    </style>
  </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>

Solution

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <style>
      * {
        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);
      }
  
      .bb1b {
        width: 80%;
        height: 10%;
      }
  
      .bb1c {
        width: 90%;
        height: 10%;
      }

      .bb1d {
        width: 100%;
        height: 70%;
      }
    </style>
  </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>

3.1 KiB Raw Blame History