From ff84453419262f51ef6f07c3708374f6328cd783 Mon Sep 17 00:00:00 2001 From: Anna Date: Tue, 17 Dec 2024 08:11:45 -0500 Subject: [PATCH] chore(curriculum): remove jquery from css flexbox (#57545) --- ...add-flex-superpowers-to-the-tweet-embed.md | 74 ++++++++++++------- ...elements-using-the-align-items-property.md | 4 +- ...ents-using-the-justify-content-property.md | 5 +- ...y-to-create-a-column-in-the-tweet-embed.md | 63 ++++++++++------ ...perty-to-create-rows-in-the-tweet-embed.md | 57 ++++++++------ .../use-display-flex-to-position-two-boxes.md | 4 +- ...align-items-property-in-the-tweet-embed.md | 63 ++++++++++------ .../use-the-align-self-property.md | 8 +- ...erty-to-set-the-initial-size-of-an-item.md | 12 ++- ...lex-direction-property-to-make-a-column.md | 4 +- ...e-flex-direction-property-to-make-a-row.md | 4 +- ...-the-flex-grow-property-to-expand-items.md | 8 +- .../use-the-flex-shorthand-property.md | 28 ++++--- ...he-flex-shrink-property-to-shrink-items.md | 8 +- ...x-wrap-property-to-wrap-a-row-or-column.md | 4 +- ...ify-content-property-in-the-tweet-embed.md | 66 ++++++++++------- ...e-the-order-property-to-rearrange-items.md | 8 +- 17 files changed, 266 insertions(+), 154 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md index a05b3a39f98..e8abc41886b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md @@ -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');
-

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.

+

+ 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. +

1:32 PM - 12 Jan 2018 -
+