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

refactor(curriculum): reorder user stories and hints for lab-business-card (#64491)

Browse Source 
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Gary Yeung
2025-12-12 00:53:55 +08:00
committed by GitHub
parent 2d3f436bb9
commit 4dfbfc784d
1 changed files with 107 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
curriculum/challenges/english/blocks/lab-business-card/6690e10ebe2181212abc9652.md
View File

@@ -12,14 +12,8 @@ demoType: onClick
**User Stories:**
1. You should link the style sheet `styles.css` using the `link` tag in the `head` section of the HTML file.
1. Your page background should be `rosybrown`. The overall font should be `Arial`, with a fallback of `sans-serif`.
1. All of the `p` elements should have a top and bottom `margin` of `5px`.
1. All links on the page should not be underlined.
1. You should have a `div` with a `class` attribute with a value of `business-card` that will contain all the other elements.
1. The `.business-card` selector should have properties to set the element as `300px` wide and a background color of your choice. Also you should set a `padding` of `20px` all around and a top `margin` of `100px`. The text should be center aligned and the font size should be `16px`. The left and right margins should be set to `auto`.
1. Inside the `.business-card` element, there should be an `img` element with a `class` attribute with a value of `profile-image`. You can set the image source to `https://cdn.freecodecamp.org/curriculum/labs/flower.jpg` if you like. There should be an `alt` with a meaningful description.
1. The `.profile-image` selector should have a `max-width` property with a value of `100%`.
1. Inside the `.business-card` element, after the `img` element, you should have three `p` elements with a `class` attribute that has, respectively, a value of `full-name`, `designation`, and `company`.
1. The first `p` element should contain your name.
1. The second `p` element should contain your designation.
@@ -30,111 +24,21 @@ demoType: onClick
1. There should be an `hr` element after the `a` element containing the portfolio link.
1. You should have another `div` element with a `class` attribute with a value of `social-media`. Within this element, there should be an `h2` element with the text `Connect with me`.
1. Inside the `.social-media` elements, there should be three `a` elements. The `a` elements should have the text `Twitter`, `LinkedIn` and `GitHub` respectively with links to valid websites.
1. You should link the style sheet `styles.css` using the `link` tag in the `head` section of the HTML file.
1. Your page background should be `rosybrown`. The overall font should be `Arial`, with a fallback of `sans-serif`.
1. The `.business-card` selector should have properties to set the element as `300px` wide and a background color of your choice. Also you should set a `padding` of `20px` all around and a top `margin` of `100px`. The text should be center aligned and the font size should be `16px`. The left and right margins should be set to `auto`.
1. The `.profile-image` selector should have a `max-width` property with a value of `100%`.
1. All of the `p` elements should have a top and bottom `margin` of `5px`.
1. All links on the page should not be underlined.
# --hints--
Your `link` element should be within your `head` element.
```js
const link = document.querySelector('head > link');
assert.isNotNull(link);
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
const linkRelValue = document.querySelector('link')?.getAttribute('rel');
assert.strictEqual(linkRelValue, 'stylesheet');
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
const linkHrefValue = document.querySelector('link')?.dataset?.href;
assert.strictEqual(linkHrefValue, 'styles.css');
```
You should set the page background color in the `body` selector to `rosybrown`.
```js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background-color'), 'rosybrown');
```
You should set the page font to `Arial` in the `body` element with a fallback of `sans-serif`.
```js
const el = new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('font-family');
const condition1= el === 'Arial, sans-serif';
const condition2= el === '"Arial", sans-serif';
assert.isTrue(condition1 || condition2);
```
Your `p` elements should have a top and bottom `margin` of `5px`.
```js
const marginTop = new __helpers.CSSHelp(document).getStyle('p')?.getPropVal('margin-top');
const marginBottom = new __helpers.CSSHelp(document).getStyle('p')?.getPropVal('margin-bottom');
assert.equal(marginTop, '5px');
assert.equal(marginBottom, '5px');
```
The links of the page should have no underline.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.getPropVal('text-decoration'), 'none');
```
You should have one main `div` with a `class` attribute with a value of `business-card`.
```js
assert.strictEqual(document.querySelector('div')?.getAttribute('class'), 'business-card');
```
Your `.business-card` selector should have a `width` property with a value of `300px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('width'), '300px');
```
Your `.business-card` selector should have a `background-color` property with a valid color value.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.business-card')?.backgroundColor);
```
Your `.business-card` selector should have a `padding` property with a value of `20px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('padding'), '20px');
```
Your `.business-card` selector should have a top margin of `100px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('margin-top'), '100px');
```
The text inside the `.business-card` element should be center-aligned.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('text-align'), 'center');
```
The font size of the text inside the `.business-card` element should be `16px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('font-size'), '16px');
```
The left and right margins of the `.business-card` element should be set to `auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('margin-left'), 'auto');
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('margin-right'), 'auto');
```
Inside the `.business-card` element, there should be an `img` element with a `class` attribute with a value of`profile-image`.
```js
@@ -153,12 +57,6 @@ The `alt` attribute of the image should be set to a meaningful description.
assert.isAbove(document.querySelector('img')?.alt.length, 0);
```
Your `.profile-image` selector should have a `max-width` property with a value of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.profile-image')?.getPropVal('max-width'), '100%');
```
Inside the `.business-card` element, after the `img` element, there should be a `p` element with a `class` attribute with a value of `full-name`.
```js
@@ -292,6 +190,107 @@ The `href` of the third `a` element should point to a valid link.
assert.isAbove(document.querySelectorAll('.social-media a')[2]?.getAttribute('href')?.length, 0);
```
Your `link` element should be within your `head` element.
```js
const link = document.querySelector('head > link');
assert.isNotNull(link);
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
const linkRelValue = document.querySelector('link')?.getAttribute('rel');
assert.strictEqual(linkRelValue, 'stylesheet');
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
const linkHrefValue = document.querySelector('link')?.dataset?.href;
assert.strictEqual(linkHrefValue, 'styles.css');
```
You should set the page background color in the `body` selector to `rosybrown`.
```js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background-color'), 'rosybrown');
```
You should set the page font to `Arial` in the `body` element with a fallback of `sans-serif`.
```js
const el = new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('font-family');
const condition1= el === 'Arial, sans-serif';
const condition2= el === '"Arial", sans-serif';
assert.isTrue(condition1 || condition2);
```
Your `.business-card` selector should have a `width` property with a value of `300px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('width'), '300px');
```
Your `.business-card` selector should have a `background-color` property with a valid color value.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.business-card')?.backgroundColor);
```
Your `.business-card` selector should have a `padding` property with a value of `20px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('padding'), '20px');
```
Your `.business-card` selector should have a top margin of `100px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('margin-top'), '100px');
```
The text inside the `.business-card` element should be center-aligned.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('text-align'), 'center');
```
The font size of the text inside the `.business-card` element should be `16px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('font-size'), '16px');
```
The left and right margins of the `.business-card` element should be set to `auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('margin-left'), 'auto');
assert.equal(new __helpers.CSSHelp(document).getStyle('.business-card')?.getPropVal('margin-right'), 'auto');
```
Your `.profile-image` selector should have a `max-width` property with a value of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.profile-image')?.getPropVal('max-width'), '100%');
```
Your `p` elements should have a top and bottom `margin` of `5px`.
```js
const marginTop = new __helpers.CSSHelp(document).getStyle('p')?.getPropVal('margin-top');
const marginBottom = new __helpers.CSSHelp(document).getStyle('p')?.getPropVal('margin-bottom');
assert.equal(marginTop, '5px');
assert.equal(marginBottom, '5px');
```
The links of the page should have no underline.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.getPropVal('text-decoration'), 'none');
```
# --seed--
## --seed-contents--