diff --git a/curriculum/challenges/english/blocks/lab-business-card/6690e10ebe2181212abc9652.md b/curriculum/challenges/english/blocks/lab-business-card/6690e10ebe2181212abc9652.md index 72b4170b810..a562866541d 100644 --- a/curriculum/challenges/english/blocks/lab-business-card/6690e10ebe2181212abc9652.md +++ b/curriculum/challenges/english/blocks/lab-business-card/6690e10ebe2181212abc9652.md @@ -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--