gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): lab-post-card no document.styleSheets (#59943)

Browse Source
This commit is contained in:
Shaun Hamilton
2025-04-24 16:37:09 +02:00
committed by GitHub
parent 27689faf41
commit 6a79b76441
1 changed files with 12 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
+12 -22
View File
@@ -165,12 +165,8 @@ Your `.read-more` element should have a hover effect.
const link = document.querySelector('.read-more');
assert.exists(link);
const stylesheet = [...document.styleSheets].find(sheet => [...sheet.rules].some(rule => rule.selectorText === '.read-more:hover'));
assert.exists(stylesheet);
const hoverRule = [...stylesheet.rules].find(rule => rule.selectorText === '.read-more:hover');
const hoverBackgroundColor = hoverRule.style.backgroundColor;
assert.isNotEmpty(hoverBackgroundColor);
const d = new __helpers.CSSHelp(document).getStyle('.read-more:hover');
assert.isNotEmpty(d.backgroundColor);
```
You should target `.read-more` and set its `color` property.
@@ -276,22 +272,16 @@ assert.isTrue(isMarginApplied(title));
assert.isTrue(isColorApplied(excerpt));
assert.isTrue(isMarginApplied(excerpt));
const styleSheets = [...document.styleSheets];
function hasSelectorWithColor(selector) {
return styleSheets.some(sheet => {
try {
return [...sheet.cssRules].some(rule => {
return rule.selectorText?.split(',').map(s => s.trim()).includes(selector) && rule.style.color;
});
} catch (e) {
return false;
}
});
}
assert.isTrue(hasSelectorWithColor('.post-title'));
assert.isTrue(hasSelectorWithColor('.post-excerpt'));
const styles = new __helpers.CSSHelp(document);
// Are CSS selectors used to style the elements:
const postTitle = [".post-title", ".post-excerpt, .post-title", ".post-title, .post-excerpt"].some(selector => {
return !!styles.getStyle(selector)?.getPropVal('color');
});
const postExcerpt = [".post-excerpt", ".post-excerpt, .post-title", ".post-title, .post-excerpt"].some(selector => {
return !!styles.getStyle(selector)?.getPropVal('color');
});
assert.isTrue(postTitle);
assert.isTrue(postExcerpt);
```
# --seed--