From a0cafbe49e1fee0b42428146ab3ffcc971e9a4b3 Mon Sep 17 00:00:00 2001 From: Naomi Carrigan Date: Fri, 13 May 2022 12:50:51 -0700 Subject: [PATCH] fix(curriculum): tribute page (#45933) * fix: tribute page * feat: query the dom for shaun --- .../build-a-tribute-page.md | 26 ++++++++----------- .../build-a-tribute-page.md | 26 ++++++++----------- 2 files changed, 22 insertions(+), 30 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md index 231292b4373..99d996b1aad 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md @@ -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') ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md index eedd2c75135..889d92b859c 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md @@ -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') ```