diff --git a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml index d4a087750e..370bbf5475 100644 --- a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml +++ b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml @@ -1,5 +1,5 @@ id: 561abd10cb81ac38a17513bc -title: JavaScript Algorithms and Data Structures Certification +title: Legacy JavaScript Algorithms and Data Structures Certification certification: javascript-algorithms-and-data-structures challengeType: 7 isPrivate: true diff --git a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml index c66b758bcf..8329efcdcb 100644 --- a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml +++ b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml @@ -1,5 +1,5 @@ id: 658180220947283cdc0689ce -title: JavaScript 算法和數據結構（Beta）認證 +title: JavaScript Algorithms and Data Structures Certification certification: javascript-algorithms-and-data-structures-v8 challengeType: 7 isPrivate: true diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md index 66480b5fff..066a37eceb 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md @@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border` class 爲 `blue-box` 的元素的 `margin` 應設置爲 `-15px`。 ```js -assert($('.blue-box').css('margin-top') === '-15px'); +const blueBox = document.querySelector('.blue-box'); +const marginTop = window.getComputedStyle(blueBox)["margin-top"]; +assert.strictEqual(marginTop, "-15px"); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md index 425dcfade1..51d36422da 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md @@ -38,35 +38,42 @@ Remember that you can apply multiple classes to an element using its `class` att Your `img` element should have the class `smaller-image`. ```js -assert($('img').hasClass('smaller-image')); +assert.isTrue(document.querySelector('img').classList.contains('smaller-image')); ``` Your `img` element should have the class `thick-green-border`. ```js -assert($('img').hasClass('thick-green-border')); +assert.isTrue(document.querySelector('img').classList.contains('thick-green-border')); ``` Your image should have a border width of `10px`. ```js -assert( - $('img').hasClass('thick-green-border') && - parseInt($('img').css('border-top-width'), 10) >= 8 && - parseInt($('img').css('border-top-width'), 10) <= 12 -); +// Note: to any future maintainers, the read width of the border is dependent on +// the zoom. For example we cannot match 10px exactly because if a campers set the zoom to 110% +// it will be read as 9~px. +const image = document.querySelector('img'); +const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"]; +const widthNumber = parseInt(imageBorderTopWidth); +assert.isAtLeast(widthNumber, 8); +assert.isAtMost(widthNumber, 12); ``` Your image should have a border style of `solid`. ```js -assert($('img').css('border-right-style') === 'solid'); +const image = document.querySelector('img'); +const borderRightStyle = window.getComputedStyle(image)["border-right-style"]; +assert.strictEqual(borderRightStyle, 'solid'); ``` The border around your `img` element should be green. ```js -assert($('img').css('border-left-color') === 'rgb(0, 128, 0)'); +const image = document.querySelector('img'); +const borderLeftColor = window.getComputedStyle(image)["border-left-color"]; +assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md index e4aba4a670..833707a940 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md @@ -22,25 +22,33 @@ CSS 允許你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-le class 爲 `blue-box` 的元素的上外邊距屬性值 `margin` 應爲 `40px`。 ```js -assert($('.blue-box').css('margin-top') === '40px'); +const blueBox = document.querySelector('.blue-box'); +const marginTop = window.getComputedStyle(blueBox)['margin-top']; +assert.strictEqual(marginTop, '40px'); ``` class 爲 `blue-box` 的元素的右外邊距屬性值 `margin` 應爲 `20px`。 ```js -assert($('.blue-box').css('margin-right') === '20px'); +const blueBox = document.querySelector('.blue-box'); +const marginRight = window.getComputedStyle(blueBox)['margin-right']; +assert.strictEqual(marginRight, '20px'); ``` class 爲 `blue-box` 的元素的下外邊距屬性值 `margin` 應爲 `20px`。 ```js -assert($('.blue-box').css('margin-bottom') === '20px'); +const blueBox = document.querySelector('.blue-box'); +const marginBottom = window.getComputedStyle(blueBox)['margin-bottom']; +assert.strictEqual(marginBottom, '20px'); ``` class 爲 `blue-box` 的元素的左外邊距屬性值 `margin` 應爲 `40px`。 ```js -assert($('.blue-box').css('margin-left') === '40px'); +const blueBox = document.querySelector('.blue-box'); +const marginLeft = window.getComputedStyle(blueBox)['margin-left']; +assert.strictEqual(marginLeft,'40px'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md index 532da6f8dc..a6cf427e59 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md @@ -22,25 +22,33 @@ CSS 允許你使用 `padding-top`、`padding-right`、`padding-bottom`、`paddin class 爲 `blue-box` 的元素的上內邊距屬性值 `padding` 應爲 `40px`。 ```js -assert($('.blue-box').css('padding-top') === '40px'); +const blueBox = document.querySelector('.blue-box'); +const paddingTop = window.getComputedStyle(blueBox)['padding-top']; +assert.strictEqual(paddingTop, '40px'); ``` class 爲 `blue-box` 的元素的右內邊距屬性值 `padding` 應爲 `20px`。 ```js -assert($('.blue-box').css('padding-right') === '20px'); +const blueBox = document.querySelector('.blue-box'); +const paddingRight = window.getComputedStyle(blueBox)['padding-right']; +assert.strictEqual(paddingRight, '20px'); ``` class 爲 `blue-box` 的元素的下內邊距屬性值 `padding` 應爲 `20px`。 ```js -assert($('.blue-box').css('padding-bottom') === '20px'); +const blueBox = document.querySelector('.blue-box'); +const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom']; +assert.strictEqual(paddingBottom, '20px'); ``` class 爲 `blue-box` 的元素的左內邊距屬性值 `padding` 應爲 `40px`。 ```js -assert($('.blue-box').css('padding-left') === '40px'); +const blueBox = document.querySelector('.blue-box'); +const paddingLeft = window.getComputedStyle(blueBox)['padding-left']; +assert.strictEqual(paddingLeft, '40px'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md index c9c99cb8fe..4cafd83a72 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md @@ -22,18 +22,23 @@ Your cat photo currently has sharp corners. We can round out those corners with 圖片元素應有 `thick-green-border` class。 ```js -assert($('img').hasClass('thick-green-border')); +assert.isTrue(document.querySelector('img').classList.contains('thick-green-border')); ``` 圖片的邊框半徑應爲 `10px`。 ```js -assert( - $('img').css('border-top-left-radius') === '10px' && - $('img').css('border-top-right-radius') === '10px' && - $('img').css('border-bottom-left-radius') === '10px' && - $('img').css('border-bottom-right-radius') === '10px' -); +const image = document.querySelector('img'); +const style = window.getComputedStyle(image); +const borderTopLeftRadius = style['border-top-left-radius']; +const borderTopRightRadius = style['border-top-right-radius']; +const borderBottomLeftRadius = style['border-bottom-left-radius']; +const borderBottomRightRadius = style['border-bottom-right-radius']; + +assert.strictEqual(borderTopLeftRadius, '10px'); +assert.strictEqual(borderTopRightRadius, '10px'); +assert.strictEqual(borderBottomLeftRadius, '10px'); +assert.strictEqual(borderBottomRightRadius, '10px'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md index 7cb62e68d7..840770171d 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md @@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border` class 爲 `blue-box` 的元素的 `margin` 值應爲 `20px`。 ```js -assert($('.blue-box').css('margin-top') === '20px'); +const blueBox = document.querySelector('.blue-box'); +const marginTop = window.getComputedStyle(blueBox)['margin-top']; +assert.strictEqual(marginTop, '20px'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md index c756bc66a0..5a29598272 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md @@ -30,7 +30,9 @@ Now let's put our Cat Photo App away for a little while and learn more about sty `blue-box` 這一 class 應將元素的 `padding` 值設置爲 `20px`。 ```js -assert($('.blue-box').css('padding-top') === '20px'); +const blueBox = document.querySelector('.blue-box'); +const paddingTop = window.getComputedStyle(blueBox)['padding-top']; +assert.strictEqual(paddingTop, '20px'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md index 1d49492240..a8ed8ae6c7 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md @@ -30,21 +30,13 @@ It looks like there is a problem with the variables supplied to the `.penguin-to The fallback value of `black` should be used in the `background` property of the `penguin-top` class. ```js -assert( - code.match( - /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi - ) -); +assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi); ``` The fallback value of `black` should be used in `background` property of the `penguin-bottom` class. ```js -assert( - code.match( - /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi - ) -); +assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md index 000f556c4e..3f64540f77 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md @@ -22,17 +22,13 @@ When you create your variables in `:root` they will set the value of that variab 應在 `penguin` class 裏重定義 `--penguin-belly` 的變量值，新的值應爲 `white`。 ```js -assert( - code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi) -); +assert.match(__helpers.removeCssComments(code), /\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi); ``` `penguin` 類不應包含 `background-color` 屬性。 ```js -assert( - code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g) -); +assert.match(__helpers.removeCssComments(code), /^((?!background-color\s*?:\s*?)[\s\S])*$/g); ``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md index 1ec9e8ca66..597cd0f5dc 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md @@ -32,19 +32,19 @@ Change your `h2` element's style so that its text color is red. Your `h2` element should have a `style` declaration. ```js -assert($('h2').attr('style')); +assert.exists(document.querySelector('h2').getAttribute('style')); ``` Your `h2` element should have color set to `red`. ```js -assert($('h2')[0].style.color === 'red'); +assert.strictEqual(document.querySelector('h2').style.color, 'red'); ``` Your `style` declaration should end with a `;` . ```js -assert($('h2').attr('style') && $('h2').attr('style').endsWith(';')); +assert.isTrue(document.querySelector('h2').getAttribute('style').endsWith(';')); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md index 90010f4794..0943967c8e 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md @@ -26,7 +26,7 @@ h1 { 在 `style` 樣式聲明區域裏，`p` 元素的 `font-size` 的值應爲 `16px`。 請注意，瀏覽器和文本縮放應設置爲 100％。 ```js -assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i)); +assert.match(__helpers.removeCssComments(code), /p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md index fa726acba5..98a1d04df8 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md @@ -26,9 +26,7 @@ To create a CSS variable, you just need to give it a name with two hyphens in fr 應在 `penguin` class 裏聲明 `--penguin-skin` 變量，且賦值爲 `gray`。 ```js -assert( - code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi) -); +assert.match(__helpers.removeHtmlComments(code), /\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md index af399b4bed..6a5c2fbc19 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md @@ -28,19 +28,21 @@ You can set an element's background color with the `background-color` property. `div` 元素應有 `silver-background` class。 ```js -assert($('div').hasClass('silver-background')); +assert.isTrue(document.querySelector('div').classList.contains('silver-background')); ``` `div` 元素背景顏色應設置爲銀色。 ```js -assert($('div').css('background-color') === 'rgb(192, 192, 192)'); +const div = document.querySelector('div'); +const backgroundColor = window.getComputedStyle(div)['background-color']; +assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)'); ``` class 名 `silver-background` 應該定義在 `style` 元素內；`background-color` 的屬性值應爲 `silver`。 ```js -assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/)); +assert.match(__helpers.removeHtmlComments(code), /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md index 319bba7340..c02c96cade 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md @@ -40,37 +40,29 @@ GENERIC_NAME 是可選的，它用來指明在其他字體不可用時的後備 應引入 `Lobster` 字體。 ```js -assert($('link[href*="googleapis" i]').length); +assert.exists(document.querySelector('link[href*="googleapis" i]')); ``` `h2` 元素應使用 `Lobster` 字體。 ```js -assert( - $('h2') - .css('font-family') - .match(/lobster/i) -); +const h2 = document.querySelector('h2'); +const fontFamily = window.getComputedStyle(h2)['font-family']; +assert.match(fontFamily, /lobster/i); ``` 應使用元素選擇器（`h2`）來改變字體樣式。 ```js -assert( - /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test( - code - ) -); +assert.match(__helpers.removeHtmlComments(code), /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi); ``` `p` 元素應保持使用 `monospace` 字體。 ```js -assert( - $('p') - .css('font-family') - .match(/monospace/i) -); +const paragraphElement = document.querySelector('p'); +const fontFamily = window.getComputedStyle(paragraphElement)['font-family']; +assert.match(fontFamily, /monospace/i); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md index c95407712b..126faaa5b6 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md @@ -23,12 +23,10 @@ It looks like a variable is being used to set the background color of the `.red- Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration. ```js -assert( - code - .replace(/\s/g, '') - .match( - /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi - ) +const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code)); +assert.match( + spacelessCode, + /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi ); ``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md index 12cd4925e1..34cc47148b 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md @@ -24,8 +24,9 @@ CSS 變量經常會定義在 :root 元素內，這樣就可被所有 應在 `:root` 裏聲明 `--penguin-belly` 變量並賦值 `pink`。 ```js -assert( - code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi) +assert.match( + __helpers.removeCssComments(code), + /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi ); ``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md index 482bf22628..550e857005 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md @@ -26,61 +26,57 @@ First, create an `h1` element with the text `Hello World`. 應創建一個 `h1` 元素。 ```js -assert($('h1').length > 0); +assert.isNotEmpty(document.querySelectorAll('h1')); ``` `h1` 元素的內容文本應爲 `Hello World`。 ```js -assert( - $('h1').length > 0 && - $('h1') - .text() - .match(/hello world/i) +assert.match( + document.querySelector('h1').textContent, + /hello world/i ); ``` 確保 `h1` 元素具有結束標籤。 ```js -assert( - code.match(/<\/h1>/g) && - code.match(/

/g).length === code.match(/

/g); +assert.match(commentlessCode, /

/g), commentlessCode.match(/

0 && - $('h1') - .css('font-family') - .match(/monospace/i) -); +const h1Element = document.querySelector('h1'); +const fontFamily = window.getComputedStyle(h1Element)['font-family']; +assert.include(fontFamily.toLowerCase(), "monospace"); ``` `h1` 元素應該繼承 `body` 的 `green` 顏色屬性。 ```js -assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'); +const h1Element = document.querySelector('h1'); +const color = window.getComputedStyle(h1Element)['color']; +assert.strictEqual(color, 'rgb(0, 128, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md index 9764db4f73..e399e3d734 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md @@ -20,13 +20,15 @@ In addition to pixels, you can also specify the `border-radius` using a percenta 圖片的邊框圓角應設置爲 `50%`，這樣圖片就會是圓形的。 ```js -assert(parseInt($('img').css('border-top-left-radius')) > 48); +const image = document.querySelector('img'); +const borderTopLeftRadius = window.getComputedStyle(image)['border-top-left-radius']; +assert.strictEqual(parseInt(borderTopLeftRadius), 50); ``` `border-radius` 的值應爲 `50%`。 ```js -assert(code.match(/50%/g)); +assert.match(__helpers.removeCssComments(code), /50%/g); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md index 3ee390ba2c..807dde8f41 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md @@ -32,39 +32,41 @@ color: red !important; `h1` 元素應包含 `pink-text` class。 ```js -assert($('h1').hasClass('pink-text')); +assert.isTrue(document.querySelector('h1').classList.contains('pink-text')); ``` `h1` 元素應包含 `blue-text` class。 ```js -assert($('h1').hasClass('blue-text')); +assert.isTrue(document.querySelector('h1').classList.contains('blue-text')); ``` `h1` 元素應有 `id`， 值爲 `orange-text`。 ```js -assert($('h1').attr('id') === 'orange-text'); +assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text'); ``` `h1` 元素應有一個內聯樣式 `color: white`。 ```js -assert(code.match(//gi)); +assert.notMatch(__helpers.removeHtmlComments(code), //gi); ``` `h1` 元素的字體顏色應爲橘色。 ```js -assert($('h1').css('color') === 'rgb(255, 165, 0)'); +const h1Element = document.querySelector('h1'); +const color = window.getComputedStyle(h1Element)['color']; +assert.strictEqual(color, 'rgb(255, 165, 0)'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md index 3eeffbc98f..92c52caa97 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md @@ -28,31 +28,33 @@ So we've proven that id declarations override class declarations, regardless of `h1` 元素應包含 `pink-text` class。 ```js -assert($('h1').hasClass('pink-text')); +assert.isTrue(document.querySelector('h1').classList.contains('pink-text')); ``` `h1` 元素應包含 `blue-text` class。 ```js -assert($('h1').hasClass('blue-text')); +assert.isTrue(document.querySelector('h1').classList.contains('blue-text')); ``` `h1` 的 id 屬性值應爲 `orange-text`。 ```js -assert($('h1').attr('id') === 'orange-text'); +assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text'); ``` `h1` 元素應含有行內樣式。 ```js -assert(document.querySelector('h1[style]')); +assert.exists(document.querySelector('h1[style]')); ``` `h1` 元素的字體顏色應該爲白色。 ```js -assert($('h1').css('color') === 'rgb(255, 255, 255)'); +const h1Element = document.querySelector('h1'); +const color = window.getComputedStyle(h1Element)['color']; +assert.strictEqual(color, 'rgb(255, 255, 255)'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md index e3f7e8de44..95eda8f2ee 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md @@ -34,25 +34,27 @@ class="class1 class2" `h1` 元素應包含 `pink-text` class。 ```js -assert($('h1').hasClass('pink-text')); +assert.isTrue(document.querySelector('h1').classList.contains('pink-text')); ``` `h1` 元素應包含 `blue-text` class。 ```js -assert($('h1').hasClass('blue-text')); +assert.isTrue(document.querySelector('h1').classList.contains('blue-text')); ``` `blue-text` 和 `pink-text` 需同時應用於 `h1` 元素上。 ```js -assert($('.pink-text').hasClass('blue-text')); +assert.isTrue(document.querySelector('.pink-text').classList.contains('blue-text')); ``` `h1` 元素的顏色應爲藍色。 ```js -assert($('h1').css('color') === 'rgb(0, 0, 255)'); +const h1Element = document.querySelector('h1'); +const color = window.getComputedStyle(h1Element)['color']; +assert.strictEqual(color, 'rgb(0, 0, 255)'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md index a40148901b..207d277b63 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md @@ -26,19 +26,21 @@ Sometimes your HTML elements will receive multiple styles that conflict with one `h1` 元素應含有 `pink-text` class。 ```js -assert($('h1').hasClass('pink-text')); +assert.isTrue(document.querySelector('h1').classList.contains('pink-text')); ``` `
- Quincy Larson's profile picture + Quincy Larson's profile picture

Quincy Larson

@ossia

@@ -236,18 +257,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 -
+