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.7 KiB
3.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5d822fd413a79914d39e98e6 | Part 30 | 0 | part-30 |
--description--
Nest six div elements within .foreground-buildings and give them the classes of fb1 through fb6 in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
--hints--
You should create a new div with a class of fb1.
assert.exists(document.querySelector('div.fb1'));
You should create a new div with a class of fb2.
assert.exists(document.querySelector('div.fb2'));
You should create a new div with a class of fb3.
assert.exists(document.querySelector('div.fb3'));
You should create a new div with a class of fb4.
assert.exists(document.querySelector('div.fb4'));
You should create a new div with a class of fb5.
assert.exists(document.querySelector('div.fb5'));
You should create a new div with a class of fb6.
assert.exists(document.querySelector('div.fb6'));
You should place these new div elements within the .foreground-buildings element.
assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
You should place the new div elements in the correct order.
function __t(a, b) {
return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
}
assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
--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>
--fcc-editable-region--
<div class="foreground-buildings"></div>
--fcc-editable-region--
</body>
</html>
:root {
--building-color1: #aa80ff;
--building-color2: #66cc99;
--building-color3: #cc6699;
--building-color4: #538cc6;
}
* {
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;
}
.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);
}
.bb3 {
width: 10%;
height: 55%;
background-color: var(--building-color3);
}
.bb4 {
width: 11%;
height: 58%;
background-color: var(--building-color4);
}
.foreground-buildings {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}