CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-19 21:09:51 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

chore(curriculum): remove jquery from css flexbox (#57545)

Browse Source
This commit is contained in:
Anna 2024-12-17 08:11:45 -05:00 committed by GitHub
parent 2b942bf3a0
commit ff84453419
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 266 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
View File

@ -22,49 +22,66 @@ Add the CSS property `display: flex` to all of the following items - note that t
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
const followButton = document.querySelector('.follow-btn');
const displayStyle = window.getComputedStyle(followButton)['display'];
assert.isNotNull(followButton);
assert.notStrictEqual(displayStyle, 'none');
```
Your `header` should have a `display` property set to `flex`.
```js
assert($('header').css('display') == 'flex');
const header = document.querySelector('header');
const displayStyle = window.getComputedStyle(header)['display'];
assert.strictEqual(displayStyle, 'flex');
```
Your `footer` should have a `display` property set to `flex`.
```js
assert($('footer').css('display') == 'flex');
const footer = document.querySelector('footer');
const displayStyle = window.getComputedStyle(footer)['display'];
assert.strictEqual(displayStyle, 'flex');
```
Your `h3` should have a `display` property set to `flex`.
```js
assert($('h3').css('display') == 'flex');
const h3Element = document.querySelector('h3');
const displayStyle = window.getComputedStyle(h3Element)['display'];
assert.strictEqual(displayStyle, 'flex');
```
Your `h4` should have a `display` property set to `flex`.
```js
assert($('h4').css('display') == 'flex');
const h4Element = document.querySelector('h4');
const displayStyle = window.getComputedStyle(h4Element)['display'];
assert.strictEqual(displayStyle, 'flex');
```
Your `.profile-name` should have a `display` property set to `flex`.
```js
assert($('.profile-name').css('display') == 'flex');
const profileName = document.querySelector('.profile-name');
const displayStyle = window.getComputedStyle(profileName)['display'];
assert.strictEqual(displayStyle, 'flex');
```
Your `.follow-btn` should have a `display` property set to `flex`.
```js
assert($('.follow-btn').css('display') == 'flex');
const followButton = document.querySelector('.follow-btn');
const displayStyle = window.getComputedStyle(followButton)['display'];
assert.strictEqual(displayStyle, 'flex');
```
Your `.stats` should have a `display` property set to `flex`.
```js
assert($('.stats').css('display') == 'flex');
const stats = document.querySelector('.stats');
const displayStyle = window.getComputedStyle(stats)['display'];
assert.strictEqual(displayStyle, 'flex');
```
# --seed--
@ -142,18 +159,17 @@ assert($('.stats').css('display') == 'flex');
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
@ -171,7 +187,7 @@ assert($('.stats').css('display') == 'flex');
font-family: Arial, sans-serif;
}
header {
display: flex;
display: flex;
}
header .profile-thumbnail {
width: 50px;
@ -191,7 +207,8 @@ assert($('.stats').css('display') == 'flex');
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -226,7 +243,11 @@ assert($('.stats').css('display') == 'flex');
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -236,18 +257,17 @@ assert($('.stats').css('display') == 'flex');
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>

4
curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
View File

@ -31,7 +31,9 @@ Try the other options for the `align-items` property in the code editor to see t
The `#box-container` element should have an `align-items` property set to a value of `center`.
```js
assert($('#box-container').css('align-items') == 'center');
const boxContainer = document.querySelector('#box-container');
const alignment = window.getComputedStyle(boxContainer)['align-items'];
assert.strictEqual(alignment, 'center');
```
# --seed--

5
curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
View File

@ -31,7 +31,10 @@ Try the other options for the `justify-content` property in the code editor to s
The `#box-container` element should have a `justify-content` property set to a value of `center`.
```js
assert($('#box-container').css('justify-content') == 'center');
const boxContainer = document.querySelector('#box-container');
const justifyDirection =
window.getComputedStyle(boxContainer)['justify-content'];
assert.strictEqual(justifyDirection, 'center');
```
# --seed--

63
curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
View File

@ -20,13 +20,18 @@ Add the CSS property `flex-direction` to the header's `.profile-name` element an
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
const followButton = document.querySelector('.follow-btn');
const displayStyle = window.getComputedStyle(followButton)['display'];
assert.isNotNull(followButton);
assert.notStrictEqual(displayStyle, 'none');
```
The `.profile-name` element should have a `flex-direction` property set to `column`.
```js
assert($('.profile-name').css('flex-direction') == 'column');
const profileName = document.querySelector('.profile-name');
const flexDirection = window.getComputedStyle(profileName)['flex-direction'];
assert.strictEqual(flexDirection, 'column');
```
# --seed--
@ -38,7 +43,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
body {
font-family: Arial, sans-serif;
}
header, footer {
header,
footer {
display: flex;
flex-direction: row;
}
@ -61,7 +67,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -93,7 +100,11 @@ assert($('.profile-name').css('flex-direction') == 'column');
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -103,18 +114,17 @@ assert($('.profile-name').css('flex-direction') == 'column');
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
@ -131,7 +141,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
body {
font-family: Arial, sans-serif;
}
header, footer {
header,
footer {
display: flex;
flex-direction: row;
}
@ -154,7 +165,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -186,7 +198,11 @@ assert($('.profile-name').css('flex-direction') == 'column');
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -196,18 +212,17 @@ assert($('.profile-name').css('flex-direction') == 'column');
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>

57
curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
View File

@ -20,19 +20,22 @@ Add the CSS property `flex-direction` to both the `header` and `footer` and set
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
const followButton = document.querySelector('.follow-btn');
const displayStyle = window.getComputedStyle(followButton)['display'];
assert.isNotNull(followButton);
assert.notStrictEqual(displayStyle, 'none');
```
The `header` should have a `flex-direction` property set to `row`.
```js
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
assert.match(code, /header\s*?{[^}]*?flex-direction:\s*?row;/g);
```
The `footer` should have a `flex-direction` property set to `row`.
```js
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
assert.match(code, /footer\s*?{[^}]*?flex-direction:\s*?row;/g);
```
# --seed--
@ -66,7 +69,8 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -102,7 +106,11 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -112,18 +120,17 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
@ -162,7 +169,8 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -198,7 +206,11 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -208,18 +220,17 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>

4
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
View File

@ -22,7 +22,9 @@ Add the CSS property `display` to `#box-container` and set its value to `flex`.
`#box-container` should have the `display` property set to a value of `flex`.
```js
assert($('#box-container').css('display') == 'flex');
const boxContainer = document.querySelector('#box-container');
const displayStyle = window.getComputedStyle(boxContainer)['display'];
assert.strictEqual(displayStyle, 'flex');
```
# --seed--

63
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
View File

@ -20,13 +20,18 @@ Add the CSS property `align-items` to the header's `.follow-btn` element. Set th
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
const followButton = document.querySelector('.follow-btn');
const displayStyle = window.getComputedStyle(followButton)['display'];
assert.isNotNull(followButton);
assert.notStrictEqual(displayStyle, 'none');
```
The `.follow-btn` element should have the `align-items` property set to a value of `center`.
```js
assert($('.follow-btn').css('align-items') == 'center');
const followButton = document.querySelector('.follow-btn');
const alignItems = window.getComputedStyle(followButton)['align-items'];
assert.strictEqual(alignItems, 'center');
```
# --seed--
@ -38,7 +43,8 @@ assert($('.follow-btn').css('align-items') == 'center');
body {
font-family: Arial, sans-serif;
}
header, footer {
header,
footer {
display: flex;
flex-direction: row;
}
@ -63,7 +69,8 @@ assert($('.follow-btn').css('align-items') == 'center');
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -95,7 +102,11 @@ assert($('.follow-btn').css('align-items') == 'center');
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -105,18 +116,17 @@ assert($('.follow-btn').css('align-items') == 'center');
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
@ -133,7 +143,8 @@ assert($('.follow-btn').css('align-items') == 'center');
body {
font-family: Arial, sans-serif;
}
header, footer {
header,
footer {
display: flex;
flex-direction: row;
}
@ -158,7 +169,8 @@ assert($('.follow-btn').css('align-items') == 'center');
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -190,7 +202,11 @@ assert($('.follow-btn').css('align-items') == 'center');
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -200,18 +216,17 @@ assert($('.follow-btn').css('align-items') == 'center');
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>

8
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
View File

@ -22,13 +22,17 @@ Add the CSS property `align-self` to both `#box-1` and `#box-2`. Give `#box-1` a
The `#box-1` element should have the `align-self` property set to a value of `center`.
```js
assert($('#box-1').css('align-self') == 'center');
const boxOne = document.querySelector('#box-1');
const alignment = window.getComputedStyle(boxOne)['align-self'];
assert.strictEqual(alignment, 'center');
```
The `#box-2` element should have the `align-self` property set to a value of `flex-end`.
```js
assert($('#box-2').css('align-self') == 'flex-end');
const boxTwo = document.querySelector('#box-2');
const alignment = window.getComputedStyle(boxTwo)['align-self'];
assert.strictEqual(alignment, 'flex-end');
```
# --seed--

12
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
View File

@ -22,25 +22,29 @@ Set the initial size of the boxes using `flex-basis`. Add the CSS property `flex
The `#box-1` element should have the `flex-basis` property.
```js
assert($('#box-1').css('flex-basis') != 'auto');
const boxOne = document.querySelector('#box-1');
const flexBasis = window.getComputedStyle(boxOne)['flex-basis'];
assert.notStrictEqual(flexBasis, 'auto');
```
The `#box-1` element should have a `flex-basis` value of `10em`.
```js
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
assert.match(code, /#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g);
```
The `#box-2` element should have the `flex-basis` property.
```js
assert($('#box-2').css('flex-basis') != 'auto');
const boxTwo = document.querySelector('#box-2');
const flexBasis = window.getComputedStyle(boxTwo)['flex-basis'];
assert.notStrictEqual(flexBasis, 'auto');
```
The `#box-2` element should have a `flex-basis` value of `20em`.
```js
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
assert.match(code, /#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g);
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
View File

@ -20,7 +20,9 @@ Add the CSS property `flex-direction` to the `#box-container` element, and give
The `#box-container` element should have a `flex-direction` property set to `column`.
```js
assert($('#box-container').css('flex-direction') == 'column');
const boxContainer = document.querySelector('#box-container');
const flexDirection = window.getComputedStyle(boxContainer)['flex-direction'];
assert.strictEqual(flexDirection, 'column');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
View File

@ -24,7 +24,9 @@ Add the CSS property `flex-direction` to the `#box-container` element, and give
The `#box-container` element should have a `flex-direction` property set to `row-reverse`.
```js
assert($('#box-container').css('flex-direction') == 'row-reverse');
const boxContainer = document.querySelector('#box-container');
const flexDirection = window.getComputedStyle(boxContainer)['flex-direction'];
assert.strictEqual(flexDirection, 'row-reverse');
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
View File

@ -22,13 +22,17 @@ Add the CSS property `flex-grow` to both `#box-1` and `#box-2`. Give `#box-1` a
The `#box-1` element should have the `flex-grow` property set to a value of `1`.
```js
assert($('#box-1').css('flex-grow') == '1');
const boxOne = document.querySelector('#box-1');
const flexGrow = window.getComputedStyle(boxOne)['flex-grow'];
assert.equal(flexGrow, '1');
```
The `#box-2` element should have the `flex-grow` property set to a value of `2`.
```js
assert($('#box-2').css('flex-grow') == '2');
const boxTwo = document.querySelector('#box-2');
const flexGrow = window.getComputedStyle(boxTwo)['flex-grow'];
assert.equal(flexGrow, '2');
```
# --seed--

28
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
View File

@ -26,27 +26,33 @@ These values will cause `#box-1` to grow to fill the extra space at twice the ra
The `#box-1` element should have the `flex` property set to a value of `2 2 150px`.
```js
assert(
$('#box-1').css('flex-grow') == '2' &&
$('#box-1').css('flex-shrink') == '2' &&
$('#box-1').css('flex-basis') == '150px'
);
const boxOne = document.querySelector('#box-1');
const flexGrow = window.getComputedStyle(boxOne)['flex-grow'];
const flexShrink = window.getComputedStyle(boxOne)['flex-shrink'];
const flexBasis = window.getComputedStyle(boxOne)['flex-basis'];
assert.equal(flexGrow, '2');
assert.equal(flexShrink, '2');
assert.equal(flexBasis, '150px');
```
The `#box-2` element should have the `flex` property set to a value of `1 1 150px`.
```js
assert(
$('#box-2').css('flex-grow') == '1' &&
$('#box-2').css('flex-shrink') == '1' &&
$('#box-2').css('flex-basis') == '150px'
);
const boxTwo = document.querySelector('#box-2');
const flexGrow = window.getComputedStyle(boxTwo)['flex-grow'];
const flexShrink = window.getComputedStyle(boxTwo)['flex-shrink'];
const flexBasis = window.getComputedStyle(boxTwo)['flex-basis'];
assert.equal(flexGrow, '1');
assert.equal(flexShrink, '1');
assert.equal(flexBasis, '150px');
```
Your code should use the `flex` property for `#box-1` and `#box-2`.
```js
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
assert.lengthOf(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g), 2);
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
View File

@ -24,13 +24,17 @@ Add the CSS property `flex-shrink` to both `#box-1` and `#box-2`. Give `#box-1`
The `#box-1` element should have the `flex-shrink` property set to a value of `1`.
```js
assert($('#box-1').css('flex-shrink') == '1');
const boxOne = document.querySelector('#box-1');
const flexShrink = window.getComputedStyle(boxOne)['flex-shrink'];
assert.equal(flexShrink, '1');
```
The `#box-2` element should have the `flex-shrink` property set to a value of `2`.
```js
assert($('#box-2').css('flex-shrink') == '2');
const boxTwo = document.querySelector('#box-2');
const flexShrink = window.getComputedStyle(boxTwo)['flex-shrink'];
assert.equal(flexShrink, '2');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
View File

@ -26,7 +26,9 @@ The current layout has too many boxes for one row. Add the CSS property `flex-wr
The `#box-container` element should have the `flex-wrap` property set to a value of `wrap`.
```js
assert($('#box-container').css('flex-wrap') == 'wrap');
const boxContainer = document.querySelector('#box-container');
const flexWrap = window.getComputedStyle(boxContainer)['flex-wrap'];
assert.strictEqual(flexWrap, 'wrap');
```
# --seed--

66
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
View File

@ -20,16 +20,18 @@ Add the CSS property `justify-content` to the header's `.profile-name` element a
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
const followButton = document.querySelector('.follow-btn');
const displayStyle = window.getComputedStyle(followButton)['display'];
assert.isNotNull(followButton);
assert.notStrictEqual(displayStyle, 'none');
```
The `.profile-name` element should have the `justify-content` property set to any of these values: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, or `space-evenly`.
```js
assert(
code.match(
/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g
)
assert.match(
code,
/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g
);
```
@ -42,7 +44,8 @@ assert(
body {
font-family: Arial, sans-serif;
}
header, footer {
header,
footer {
display: flex;
flex-direction: row;
}
@ -66,7 +69,8 @@ assert(
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -98,7 +102,11 @@ assert(
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -108,18 +116,17 @@ assert(
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
@ -136,7 +143,8 @@ assert(
body {
font-family: Arial, sans-serif;
}
header, footer {
header,
footer {
display: flex;
flex-direction: row;
}
@ -160,7 +168,8 @@ assert(
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
header h3,
header h4 {
display: flex;
margin: 0;
}
@ -192,7 +201,11 @@ assert(
}
</style>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<img
src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
alt="Quincy Larson's profile picture"
class="profile-thumbnail"
/>
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
@ -202,18 +215,17 @@ assert(
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<p>
I meet so many people who are in search of that one trick that will help
them work smart. Even if you work smart, you still have to work hard.
</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
<hr />
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
<div class="Retweets"><strong>107</strong> Retweets</div>
<div class="likes"><strong>431</strong> Likes</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>

8
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
View File

@ -20,13 +20,17 @@ Add the CSS property `order` to both `#box-1` and `#box-2`. Give `#box-1` a valu
The `#box-1` element should have the `order` property set to a value of `2`.
```js
assert($('#box-1').css('order') == '2');
const boxOne = document.querySelector('#box-1');
const order = window.getComputedStyle(boxOne)['order'];
assert.strictEqual(order, '2');
```
The `#box-2` element should have the `order` property set to a value of `1`.
```js
assert($('#box-2').css('order') == '1');
const boxTwo = document.querySelector('#box-2');
const order = window.getComputedStyle(boxTwo)['order'];
assert.strictEqual(order, '1');
```
# --seed--