jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-13 16:04:36 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): add CSS property checks for width and height in Colored Boxes lab (#65927)

Browse Source 
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Jeevankumar S
2026-03-05 15:34:20 +05:30
committed by GitHub
parent c646fc6a02
commit da10086379
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
curriculum/challenges/english/blocks/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
View File

@@ -64,18 +64,26 @@ colorGridChildren.forEach((child, index) => {
});
```
The `.color-box` element should have a set `width` and `height`.
The `.color-box` class should have the `width` and `height` properties set.
```js
const colorBox = document.querySelector('.color-box');
assert.exists(colorBox);
const cssHelp = new __helpers.CSSHelp(document);
assert.isNotEmpty(cssHelp.getStyle('.color-box')?.getPropVal('width', true));
assert.isNotEmpty(cssHelp.getStyle('.color-box')?.getPropVal('height', true));
```
const colorBoxStyles = getComputedStyle(colorBox);
const width = colorBoxStyles.width;
const height = colorBoxStyles.height;
The `.color-box` elements should always have a non-zero `width` and `height`. Try to resize the preview to a smaller size, make sure that the boxes do not disappear.
assert.notStrictEqual(width, '0px');
assert.notStrictEqual(height, '0px');
```js
const colorBoxes = document.querySelectorAll('.color-box');
assert.isNotEmpty(colorBoxes);
colorBoxes.forEach(box => {
const width = getComputedStyle(box).width;
const height = getComputedStyle(box).height;
assert.notStrictEqual(width, '0px');
assert.notStrictEqual(height, '0px');
});
```
The `.color1` element should have a hexadecimal background color.