2.9 KiB

Raw Blame History

id	title	challengeType	dashedName
5d822fd413a79914d39e98d7	Part 15	0	part-15

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

--hints--

test-text

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
  )
);

--seed--

--seed-contents--

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

--solutions--

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

2.9 KiB Raw Blame History