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

fix(curriculum): tribute page (#45933)

Browse Source 
* fix: tribute page

* feat: query the dom for shaun
This commit is contained in:
Naomi Carrigan
2022-05-13 12:50:51 -07:00
committed by GitHub
parent 868284bc81
commit a0cafbe49e
2 changed files with 22 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md
View File

@@ -136,24 +136,21 @@ const el = document.getElementById('tribute-link')
assert(!!el && el.target === '_blank')
```
You should use an `#image` selector in your CSS to style the `#image` and pass the next three tests
Your `img` element should have a `display` of `block`
```js
const style = new __helpers.CSSHelp(document).getStyle('#image')
assert(!!style)
```
Your `#image` should have a `display` of `block`
```js
const style = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display')
const img = document.getElementById('image');
const imgStyle = window.getComputedStyle(img);
const style = imgStyle?.getPropertyValue('display')
assert(style === 'block')
```
Your `#image` should have a `max-width` of `100%`
```js
const style = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('max-width')
const img = document.getElementById('image');
const imgStyle = window.getComputedStyle(img);
const style = imgStyle?.getPropertyValue('max-width')
assert(style === '100%')
```
@@ -162,12 +159,11 @@ Your `#image` should have a `height` of `auto`
```js
// taken from the testable-projects repo
const img = document.getElementById('image');
const maxWidthValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('max-width')
const displayValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display')
const oldDisplayValue = img?.style.getPropertyValue('display');
const oldDisplayPriority = img?.style.getPropertyPriority('display');
const imgStyle = window.getComputedStyle(img);
const oldDisplayValue = imgStyle.getPropertyValue('display');
const oldDisplayPriority = imgStyle.getPropertyPriority('display');
img?.style.setProperty('display', 'none', 'important');
const heightValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('height')
const heightValue = imgStyle?.getPropertyValue('height')
img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
assert(heightValue === 'auto')
```

26
curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
View File

@@ -136,24 +136,21 @@ const el = document.getElementById('tribute-link')
assert(!!el && el.target === '_blank')
```
You should use an `#image` selector in your CSS to style the `#image` and pass the next three tests.
Your `img` element should have a `display` of `block`.
```js
const style = new __helpers.CSSHelp(document).getStyle('#image')
assert(!!style)
```
Your `#image` should have a `display` of `block`.
```js
const style = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display')
const img = document.getElementById('image');
const imgStyle = window.getComputedStyle(img);
const style = imgStyle?.getPropertyValue('display')
assert(style === 'block')
```
Your `#image` should have a `max-width` of `100%`.
```js
const style = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('max-width')
const img = document.getElementById('image');
const imgStyle = window.getComputedStyle(img);
const style = imgStyle?.getPropertyValue('max-width')
assert(style === '100%')
```
@@ -162,12 +159,11 @@ Your `#image` should have a `height` of `auto`.
```js
// taken from the testable-projects repo
const img = document.getElementById('image');
const maxWidthValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('max-width')
const displayValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display')
const oldDisplayValue = img?.style.getPropertyValue('display');
const oldDisplayPriority = img?.style.getPropertyPriority('display');
const imgStyle = window.getComputedStyle(img);
const oldDisplayValue = imgStyle.getPropertyValue('display');
const oldDisplayPriority = imgStyle.getPropertyPriority('display');
img?.style.setProperty('display', 'none', 'important');
const heightValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('height')
const heightValue = imgStyle?.getPropertyValue('height')
img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
assert(heightValue === 'auto')
```