3.3 KiB
3.3 KiB
| id | title | challengeType | isBeta |
|---|---|---|---|
| 5d822fd413a79914d39e98d8 | Part 16 | 0 | true |
Description
It's that simple. Use the same variable as the background-color of the bb1b, bb1c, and bb1d classes to fill in the rest of the building.
Instructions
Tests
tests:
- text: test-text
testString: const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1bStyle) && /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1cStyle) && /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1dStyle));
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%;
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>
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%;
background-color: var(--building-color1);
}
.bb1c {
width: 90%;
height: 10%;
background-color: var(--building-color1);
}
.bb1d {
width: 100%;
height: 70%;
background-color: var(--building-color1);
}
</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>