diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md new file mode 100644 index 00000000000..aa4866cb234 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -0,0 +1,63 @@ +--- +id: 5f07be6ef7412fbad0c5626b +title: ステップ 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +新しいコンテンツを追加する前に、`section` 要素を利用して猫の写真とこれから追加するコンテンツを分けましょう。 + +現在 `main` 要素内にあるすべての要素を、`section` 要素の中にネストしましょう。 + +# --hints-- + +`section` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```js +assert(document.querySelector('section')); +``` + +`section` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。 + +```js +assert(code.match(/<\/section\>/)); +``` + +`section` 要素全体が、`main` 要素の開始タグと終了タグの間にあるようにしてください。 + +```js +assert(document.querySelector('section').parentNode.nodeName === 'MAIN'); +``` + +既存の `h2` 要素、コメント、`p` 要素、アンカー (`a`) 要素が、`section` 要素の開始タグと終了タグの間にあるようにしてください。 + +```js +const childrenOfSection = [...document.querySelector('section').childNodes]; +const foundElems = childrenOfSection.filter((child) => { + return ['H2', 'A', 'P'].includes(child.nodeName); +}); +assert(foundElems.length === 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+--fcc-editable-region-- +
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md new file mode 100644 index 00000000000..0da53adcf04 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md @@ -0,0 +1,81 @@ +--- +id: 5f07c98cdb9413cbd4b16750 +title: ステップ 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +では新しいセクションを追加しましょう。 既存の `section` 要素の下に、2 つ目の `section` 要素を追加してください。 + +# --hints-- + +`section` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```js +assert(document.querySelectorAll('section').length >= 2); +``` + +`section` の開始タグは 1 つだけ追加してください。 余分なものは削除してください。 + +```js +assert(document.querySelectorAll('section').length === 2); +``` + +`section` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。 + +```js +assert(code.match(/<\/section>/g).length >= 2); +``` + +`section` の終了タグは 1 つだけ追加してください。 余分なものは削除してください。 + +```js +assert(code.match(/<\/section>/g).length === 2); +``` + +2 つ目の `section` 要素を 1 つ目の `section` 要素の中にネストしないでください。 + +```js +const childrenOf1stSection = [ + ...document.querySelector('main > section').children +]; +const foundElems = childrenOf1stSection.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(foundElems.length === 0); +``` + +両方の `section` 要素が、`main` 要素の開始タグと終了タグの間にあるようにしてください。 + +```js +const childrenOfMain = [...document.querySelector('main').children]; +const foundElems = childrenOfMain.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(foundElems.length === 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+--fcc-editable-region-- +
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md new file mode 100644 index 00000000000..974937aa9ec --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md @@ -0,0 +1,98 @@ +--- +id: 5f07fb1579dc934717801375 +title: ステップ 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +では新しいセクションを追加しましょう。 3 つ目の `section` 要素を、2 つ目の `section` 要素の下に追加してください。 + +# --hints-- + +`section` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```js +assert(document.querySelectorAll('section').length >= 3); +``` + +`section` の開始タグは 1 つだけ追加してください。 余分なものは削除してください。 + +```js +assert(document.querySelectorAll('section').length === 3); +``` + +`section` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。 + +```js +assert(code.match(/<\/section>/g).length >= 3); +``` + +`section` の終了タグは 1 つだけ追加してください。 余分なものは削除してください。 + +```js +assert(code.match(/<\/section>/g).length === 3); +``` + +すべての `section` 要素が、`main` 要素の開始タグと終了タグの間にあるようにしてください。 + +```js +const childrenOfMain = [...document.querySelector('main').children]; +const sectionElemsFound = childrenOfMain.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(sectionElemsFound.length === 3); +``` + +最後の `section` 要素には中身がないようにしてください。 最後の `section` 要素の中の HTML 要素やテキストは削除してください。 + +```js +assert($('main > section')[2].children.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+--fcc-editable-region-- +
+ + +``` +