Skip to content

Commit 22c7a7c

Browse files
author
Kuniwak
committed
Add examples of solution
1 parent 6ba6699 commit 22c7a7c

File tree

6 files changed

+474
-113
lines changed

6 files changed

+474
-113
lines changed

‎public/stage1/tests.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
1212
// 'change me!' を document.getElementById(elementId) に
1313
// 書き換え、ブラウザをリロードしてみてください。
1414
var elementId = 'firebrick';
15-
var element = 'change me!';
15+
var element = document.getElementById(elementId);
1616

1717
expect(element).to.be.instanceof(HTMLElement);
1818
expect(element).to.have.property('id', elementId);
@@ -27,7 +27,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
2727

2828
// 'change me!' を書き換えてください。
2929
var elementId = 'chocolate';
30-
var element = 'change me!';
30+
var element = document.getElementById(elementId);
3131

3232
expect(element).to.be.instanceof(HTMLElement);
3333
expect(element).to.have.property('id', elementId);
@@ -41,7 +41,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
4141

4242
// 'change me!' を書き換えてください。
4343
var elementClassName = 'mediumseagreen';
44-
var elements = 'change me!';
44+
var elements = document.getElementsByClassName(elementClassName);
4545

4646
expect(elements).to.have.length(1);
4747
expect(elements[0]).to.have.property('className', elementClassName);
@@ -55,7 +55,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
5555

5656
// 'change me!' を書き換えてください。
5757
var elementClassName = 'turquoise';
58-
var elements = 'change me!';
58+
var elements = document.getElementsByClassName(elementClassName);
5959

6060
expect(elements).to.have.length(2);
6161
expect(elements[0]).to.have.property('className', elementClassName);
@@ -70,7 +70,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
7070

7171
// 'change me!' を書き換えてください。
7272
var elementTagName = 'blockquote';
73-
var elements = 'change me!';
73+
var elements = document.getElementsByTagName(elementTagName);
7474

7575
expect(elements).to.have.length(1);
7676
expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
@@ -93,7 +93,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
9393
// すると、開発ツール上で <li id="brown">... が選択されます。
9494
// このことから、7 番の赤色の要素の ID は brown だということがわかります。
9595
// では、'change me!' を document.getElementById('brown') に書き換えてみましょう。
96-
var element = 'change me!';
96+
var element = document.getElementById('brown');
9797

9898
expect(element).to.have.property(secret('vq'), secret('oebja'));
9999
});
@@ -102,7 +102,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
102102
it('8 番の橙色の要素が1つ取得できる', function() {
103103

104104
// 'change me!' を書き換えてください。
105-
var element = 'change me!';
105+
var element = document.getElementById('darkorange');
106106

107107
expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
108108
});
@@ -111,7 +111,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
111111
it('9 番の緑色の要素が1つ取得できる', function() {
112112

113113
// 'change me!' を書き換えてください。
114-
var elements = 'change me!';
114+
var elements = document.getElementsByClassName('limegreen');
115115

116116
expect(elements).to.have.length(1);
117117
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('yvzrterra'));
@@ -121,7 +121,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
121121
it('10 番の水色の要素が2つ取得できる', function() {
122122

123123
// 'change me!' を書き換えてください。
124-
var elements = 'change me!';
124+
var elements = document.getElementsByClassName('mediumturquoise');
125125

126126
expect(elements).to.have.length(2);
127127
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr'));
@@ -135,7 +135,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
135135
//
136136
// なお、11 番の青色の要素は li 要素ではありません！
137137
// よくみると、色がついているのはさらに内側の要素のようです。
138-
var elements = 'change me!';
138+
var elements = document.getElementsByTagName('p');
139139

140140
expect(elements).to.have.length(1);
141141
expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C'));
@@ -152,7 +152,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
152152
//
153153
// 'change me!' を document.querySelector('#firebrick') に
154154
// 書き換えてください。
155-
var element = 'change me!';
155+
var element = document.querySelector('#firebrick');
156156

157157
expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
158158

@@ -164,7 +164,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
164164
it('2 番の橙色の要素を querySelector を使って1つ取得できる', function() {
165165

166166
// 'change me!' を書き換えてください。
167-
var element = 'change me!';
167+
var element = document.querySelector('#chocolate');
168168

169169
expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
170170

@@ -176,7 +176,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
176176
it('3 番の緑色の要素を querySelector を使って1つ取得できる', function() {
177177

178178
// 'change me!' を書き換えてください。
179-
var element = 'change me!';
179+
var element = document.querySelector('.mediumseagreen');
180180

181181
expect(element).to.have.property(secret('pynffAnzr'), secret('zrqvhzfrnterra'));
182182
});
@@ -185,7 +185,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
185185
it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function() {
186186

187187
// 'change me!' を書き換えてください。
188-
var elements = 'change me!';
188+
var elements = document.querySelectorAll('.turquoise');
189189

190190
expect(elements).to.have.length(2);
191191
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr'));
@@ -196,7 +196,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
196196
it('5 番の青色の要素を querySelector を使って1つ取得できる', function() {
197197

198198
// 'change me!' を書き換えてください。
199-
var element = 'change me!';
199+
var element = document.querySelector('blockquote');
200200

201201
expect(element).to.have.property(secret('gntAnzr'), secret('OYBPXDHBGR'));
202202
});
@@ -205,7 +205,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
205205
it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() {
206206

207207
// 'change me!' を書き換えてください。
208-
var element = 'change me!';
208+
var element = document.querySelector('[data-js-training="blueviolet"]');
209209

210210
expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
211211
secret('oyhrivbyrg'));
@@ -220,7 +220,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
220220
//
221221
// 'change me!' を '.js-training:nth-child(2) li'
222222
// に書き換えてください。
223-
var selector = 'change me!';
223+
var selector = '.js-training:nth-child(2) li';
224224

225225
var element = document.querySelector(selector);
226226
expect(selector).to.not.have.string('#');
@@ -231,7 +231,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
231231
it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function() {
232232

233233
// 'change me!' を書き換えてください。
234-
var selector = 'change me!';
234+
var selector = '.js-training:nth-child(2) :nth-child(2)';
235235

236236
var element = document.querySelector(selector);
237237
expect(selector).to.not.have.string('#');
@@ -245,7 +245,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
245245
it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() {
246246

247247
// 'change me!' を書き換えてください。
248-
var selector = 'change me!';
248+
var selector = '.js-training + .js-training > :last-child';
249249

250250
var element = document.querySelector(selector);
251251
expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/);
@@ -265,7 +265,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
265265
// 基本的な使い方は document.querySelectorAll と同じです。
266266
//
267267
// 'change me!' を $('#brown') に書き換えてください。
268-
var $element = 'change me!';
268+
var $element = $('#brown');
269269

270270
expect($element).to.be.instanceof(jQuery);
271271
expect($element).to.have.id(secret('oebja'));
@@ -275,7 +275,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
275275
it('8 番の橙色の要素を jQuery を使って1つ取得できる', function() {
276276

277277
// 'change me!' を書き換えてください。
278-
var $element = 'change me!';
278+
var $element = $('#darkorange');
279279

280280
expect($element).to.be.instanceof(jQuery);
281281
expect($element).to.have.id(secret('qnexbenatr'));
@@ -288,7 +288,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
288288
it('9 番の緑色の要素を jQuery を使って1つ取得できる', function() {
289289

290290
// 'change me!' を書き換えてください。
291-
var $element = 'change me!';
291+
var $element = $('.limegreen');
292292

293293
expect($element).to.be.instanceof(jQuery);
294294
expect($element).to.have.class(secret('yvzrterra'));
@@ -298,7 +298,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
298298
it('10 番の水色の要素を jQuery を使って2つ取得できる', function() {
299299

300300
// 'change me!' を書き換えてください。
301-
var $element = 'change me!';
301+
var $element = $('.mediumturquoise');
302302

303303
expect($element).to.be.instanceof(jQuery);
304304
expect($element).to.have.length(2);
@@ -309,7 +309,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
309309
it('11 番の青色の要素を jQuery を使って1つ取得できる', function() {
310310

311311
// 'change me!' を書き換えてください。
312-
var $element = 'change me!';
312+
var $element = $('p');
313313

314314
expect($element).to.be.instanceof(jQuery);
315315
expect($element).to.have.length(1);
@@ -320,7 +320,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
320320
it('12 番の紫色の要素を jQuery を使って1つ取得できる', function() {
321321

322322
// 'change me!' を書き換えてください。
323-
var $element = 'change me!';
323+
var $element = $('[data-js-training="darkorchid"]');
324324

325325
expect($element).to.be.instanceof(jQuery);
326326
expect($element).to.have.length(1);
@@ -334,7 +334,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
334334
it('動いている寿司要素を取得する', function() {
335335

336336
// 'change me!' を書き換えてください。
337-
var element = 'change me!';
337+
var element = document.querySelector('x-flying-sushi-monster');
338338

339339
expect(element).to.have.deep.property(
340340
secret('grkgPbagrag'), '\uD83C\uDF63');

0 commit comments

Comments
 (0)