ff20199e63
* add(tests): parts 1-2 * refactor for multi-file editor, and add temp css tests * re-re-rebasing * add link to subsequent challenges * add test strings to 007-015 * add final tests 001-016 * fix 005-007, add 017-022 tests and test strings * add: tests 021-030, and formatting * add: 031-034 tests * tests: add 035-046 * fix: test in 021 * tests: add 047-050 * format: 009, 051-118 remove css whitespace * tests: add 051-078 * tests: add 079-105 * tests: add 104-118 * fix: empty -> isEmpty, and include -> match * fix: correct editable region * fix: formatting and spelling * fix: test logic, and add TODO for whitespace * fix: add final part solution 🤦♂️ * fix typo in part-006 * remove whitespace in prep * getStyleDeclaration -> getStyle * remove editable region from solution 🤦♂️ * fix: correct tests to fail on initial * fix: add missing regex Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * fix: correct tests * remove commas and stuff 🤷♂️ Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * uppercaserise doctype Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add "the" Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * remove half-colon Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * use more boring form of the word "shoudl" Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add suggestions to tests * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md * fix: the few commits I couldn't add on github * fix: lesson 41 Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
3.4 KiB
3.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5d822fd413a79914d39e98e1 | Part 25 | 0 | part-25 |
--description--
That one used the fallback value as well? I see the problem now! The variables you declared in .bb1 do not cascade to the .bb2 and .bb3 sibling elements. That's just how CSS works. Because of this, variables are often declared in the :root selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the :root selector to the top of your stylesheet, and move all your variable declarations there.
--hints--
You should declare a :root selector at the top of the stylesheet.
assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
You should define --building-color1 with a value of #aa80ff in the :root selector.
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
You should define --building-color2 with a value of #66cc99 in the :root selector.
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
You should define --building-color3 with a value of #cc6699 in the :root selector.
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
You should remove the custom property variables from .bb1.
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<title>freeCodeCamp Skyline Project</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="background-buildings">
<div></div>
<div></div>
<div class="bb1">
<div class="bb1a"></div>
<div class="bb1b"></div>
<div class="bb1c"></div>
<div class="bb1d"></div>
</div>
<div class="bb2"></div>
<div class="bb3"></div>
<div></div>
<div class="bb4"></div>
<div></div>
<div></div>
</div>
</body>
</html>
--fcc-editable-region--
* {
border: 1px solid black;
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
overflow: hidden;
}
.background-buildings {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
}
.bb1 {
width: 10%;
height: 70%;
display: flex;
flex-direction: column;
align-items: center;
--building-color1: #aa80ff;
--building-color2: #66cc99;
--building-color3: #cc6699;
}
--fcc-editable-region--
.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);
}
.bb2 {
width: 10%;
height: 50%;
background-color: var(--building-color2, green);
}
.bb3 {
width: 10%;
height: 55%;
background-color: var(--building-color3, pink);
}
.bb4 {
width: 11%;
height: 58%;
}