Skip to content

Commit b5aecbe

Browse files
masazdreammasazdream
masazdream
authored and
masazdream
committed
stage2, stage3, stage4
1 parent af4aa3c commit b5aecbe

3 files changed

Lines changed: 73 additions & 37 deletions

File tree

‎public/stage2/tests.js‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
1111
//
1212
// var element = document.getElementById('firebrick');
1313
// element.textContent = element.textContent + element.textContent;
14-
var element = 'change me!';
15-
14+
var element = document.getElementById('firebrick');
15+
element.textContent = element.textContent + element.textContent;
1616

1717
expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
1818
expect(element).to.have.deep.property(
@@ -24,7 +24,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
2424

2525
// ここにコードを記述してください。
2626
// 変更した DOM 要素は element 変数に代入してください。
27-
var element = 'change me!';
27+
var element = document.getElementById('chocolate');
28+
element.textContent = element.textContent + element.textContent;
2829

2930

3031
expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
@@ -40,8 +41,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
4041

4142
// ここにコードを記述してください。
4243
// 変更した DOM 要素は element 変数に代入してください。
43-
var element = 'change me!';
44-
44+
var element = document.getElementsByClassName('mediumseagreen')[0];
45+
element.style.backgroundColor = 'limegreen';
4546

4647
expect(element).to.have.property(
4748
secret('pynffAnzr'), secret('zrqvhzfrnterra'));
@@ -58,7 +59,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
5859

5960
// ここにコードを記述してください。
6061
// 変更した DOM 要素は element 変数に代入してください。
61-
var element = 'change me!';
62+
var element = document.getElementsByClassName('turquoise')[0];
63+
element.style.opacity = 0.5;
6264

6365

6466
expect(element).to.have.property(
@@ -76,8 +78,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
7678

7779
// ここにコードを記述してください。
7880
// 変更した DOM 要素は element 変数に代入してください。
79-
var element = 'change me!';
80-
81+
var element = document.getElementsByTagName('blockquote')[0];
82+
element.style.transform = 'rotate(10deg)';
8183

8284
expect(element).to.have.property(
8385
secret('gntAnzr'), secret('OYBPXDHBGR'));
@@ -97,8 +99,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
9799
//
98100
// なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
99101
// 使う方法を使ってください。
100-
var element = 'change me!';
101-
102+
var element = document.querySelector('li[data-js-training="blueviolet"]');
103+
element.style.position = 'relative';
104+
element.style.top = '-20px';
102105

103106
expect(element).to.have.deep.property(
104107
secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg'));
@@ -127,8 +130,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
127130
//
128131
// var $element = $('#brown');
129132
// $element.text($element.text() + $element.text());
130-
var $element = 'change me!';
131-
133+
var $element = $('#brown');
134+
$element.text($element.text() + $element.text());
132135

133136
expect($element).to.be.instanceof(jQuery);
134137
expect($element).to.have.id(secret('oebja'));
@@ -140,8 +143,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
140143

141144
// ここにコードを記述してください。
142145
// 変更した DOM 要素は $element 変数に代入してください。
143-
var $element = 'change me!';
144-
146+
var $element = $('#darkorange');
147+
$element.text($element.text() + $element.text());
145148

146149
expect($element).to.be.instanceof(jQuery);
147150
expect($element).to.have.id(secret('qnexbenatr'));
@@ -156,8 +159,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
156159

157160
// ここにコードを記述してください。
158161
// 変更した DOM 要素は $element 変数に代入してください。
159-
var $element = 'change me!';
160-
162+
var $element = $('.limegreen');
163+
$element.css('background-color', 'mediumseagreen');
161164

162165
expect($element).to.be.instanceof(jQuery);
163166
expect($element).to.have.class(secret('yvzrterra'));
@@ -173,8 +176,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
173176

174177
// ここにコードを記述してください。
175178
// 変更した DOM 要素は $element 変数に代入してください。
176-
var $element = 'change me!';
177-
179+
var $element = $('.mediumturquoise');
180+
$element.css('opacity', '0.5');
178181

179182
expect($element).to.be.instanceof(jQuery);
180183
expect($element).to.have.class(secret('zrqvhzghedhbvfr'));
@@ -186,7 +189,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
186189

187190
// ここにコードを記述してください。
188191
// 変更した DOM 要素は $element 変数に代入してください。
189-
var $element = 'change me!';
192+
var $element = $("li>p");
193+
$element.css('transform', 'rotate(10deg)');
190194

191195

192196
expect($element).to.be.instanceof(jQuery);
@@ -205,8 +209,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
205209
//
206210
// なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
207211
// 使う方法を使ってください。
208-
var $element = 'change me!';
209-
212+
var $element = $('[data-js-training=darkorchid]');
213+
$element.css('position', 'relative');
214+
$element.css('top', '-20px');
210215

211216
expect($element).to.be.instanceof(jQuery);
212217
expect($element).to.have.data(secret('wfGenvavat'), secret('qnexbepuvq'));

‎public/stage3/tests.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
1111
// var element = document.querySelector('#firebrick');
1212
// var ghost = document.querySelector('.firebrick-ghost');
1313
// element.removeChild(ghost);
14-
14+
var element = document.querySelector('#firebrick');
15+
var ghost = document.querySelector('.firebrick-ghost');
16+
element.removeChild(ghost);
1517

1618
var firebrick = document.getElementById('firebrick');
1719
expect(firebrick.childNodes.length).to.equal(1);
@@ -22,7 +24,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
2224
it('2 番の要素からインベーダー要素を除去する', function() {
2325

2426
// ここにコードを記述してください。
25-
27+
var element = document.getElementById('chocolate');
28+
var invador = document.getElementsByClassName('chocolate-space-invader')[0];
29+
element.removeChild(invador);
2630

2731
var darkorange = document.getElementById('chocolate');
2832
expect(darkorange.childNodes.length).to.equal(1);
@@ -33,8 +37,11 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
3337
it('3 番の要素の左右の幽霊要素をすべて除去する', function() {
3438

3539
// ここにコードを記述してください。
36-
37-
40+
var element = document.querySelector('.mediumseagreen');
41+
while(document.querySelector('.mediumseagreen-ghosts')){
42+
var ghosts = document.querySelector('.mediumseagreen-ghosts');
43+
element.removeChild(ghosts);
44+
}
3845
var darkorange = document.querySelector('.mediumseagreen');
3946
expect(darkorange).to.have.property('textContent', '3\uD83C\uDF3F');
4047
});
@@ -45,7 +52,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
4552
elementToAdd.textContent = '\uD83D\uDC2C';
4653

4754
// 上の elementToAdd を追加するコードをここに記述してください。
48-
55+
var element = document.querySelector('.turquoise');
56+
element.appendChild(elementToAdd);
4957

5058
var turquoise = document.querySelector('.turquoise');
5159
expect(turquoise.childNodes.length).to.equal(2);
@@ -60,7 +68,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
6068

6169
// 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを
6270
// ここに記述してください。
63-
71+
var element = document.querySelector('li>blockquote');
72+
element.insertBefore(elementToAdd, element.firstChild);
6473

6574
var blockquote = document.querySelector('blockquote');
6675
expect(blockquote.childNodes.length).to.equal(2);
@@ -79,7 +88,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
7988
// ここに以下のコードを記述してください。
8089
//
8190
// $('.brown-ghost').remove();
82-
91+
$('.brown-ghost').remove();
8392

8493
var $brown = $('#brown');
8594
expect($brown.children()).to.have.length(0);
@@ -90,7 +99,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
9099
it('7 番の要素からインベーダー要素を除去する', function() {
91100

92101
// ここにコードを記述してください。
93-
102+
$('.darkorange-space-invader').remove();
94103

95104
var $darkorange = $('#darkorange');
96105
expect($darkorange.children()).to.have.length(0);
@@ -104,7 +113,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
104113
it('8 番の要素の左右の幽霊要素をすべて除去する', function() {
105114

106115
// ここにコードを記述してください。
107-
116+
$('.limegreen-ghosts').remove();
108117

109118
var $limegreen = $('.limegreen');
110119
expect($limegreen).to.have.text('8\uD83C\uDF3F');
@@ -115,7 +124,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
115124
var $elementToAdd = $('<span>\uD83D\uDC2C</span>');
116125

117126
// 上の $elementToAdd を追加するコードをここに記述してください。
118-
127+
$('.mediumturquoise').append($elementToAdd);
119128

120129
var $mediumturquoise = $('.mediumturquoise');
121130
expect($mediumturquoise.children()).to.have.length(1);
@@ -127,7 +136,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
127136
var $elementToAdd = $('<span>\uD83D\uDC1F</span>');
128137

129138
// 上の $elementToAdd を追加するコードをここに記述してください。
130-
139+
var $element = $("li>p");
140+
$element.prepend($elementToAdd);
131141

132142
var $p = $('p');
133143
expect($p.children()).to.have.length(1);

‎public/stage4/tests.js‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
2323
// });
2424
//
2525
// ここに上記のどちらかのコードを記述してください。
26-
26+
var element = document.getElementById('firebrick');
27+
element.addEventListener('click', function(){
28+
element.textContent = Number(element.textContent) + 1;
29+
});
2730

2831
var firebrick = document.getElementById('firebrick');
2932
firebrick.dispatchEvent(createClickEvent());
@@ -37,6 +40,11 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
3740
it('2 番の要素の click イベントで要素内の数字を 1 ずつ小さくできる', function() {
3841

3942
// ここにコードを記述してください。
43+
var $element = $('#chocolate');
44+
$element.on('click', function(event){
45+
var $target = $(event.target);
46+
$target.text(Number($target.text()) - 1);
47+
});
4048

4149

4250
var chocolate = document.getElementById('chocolate');
@@ -51,6 +59,13 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
5159
it('3 番の要素の click イベントで要素を 10 度ずつ回転できる', function() {
5260

5361
// ここにコードを記述してください。
62+
var $element = $('.mediumseagreen');
63+
var degree = 0;
64+
$element.on('click', function(event){
65+
var $target = $(event.target);
66+
degree = degree + 10;
67+
$target.css('transform', 'rotate(' + degree + 'deg)');
68+
})
5469

5570

5671
var mediumseagreen = document.querySelector('.mediumseagreen');
@@ -67,6 +82,11 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
6782
it('4 番の要素を入力された角度に回転できる', function() {
6883

6984
// ここにコードを記述してください。
85+
var $element = $('.turquoise');
86+
var $input = $('[type=number]');
87+
$input.change(function(event){
88+
$element.css('transform', 'rotate(' + $input.val() + 'deg)');
89+
});
7090

7191

7292
var turquoise = document.querySelector('.turquoise');
@@ -92,10 +112,11 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
92112
//
93113
// なお、expect(steelblue).to.be.null は上記のテストの要件を満たして
94114
// いないので、正解ではありません。
95-
96-
var steelblue = document.querySelector('.steelblue');
97-
expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
98-
done();
115+
document.addEventListener('DOMContentLoaded', function(){
116+
var steelblue = document.querySelector('.steelblue');
117+
expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
118+
done();
119+
});
99120
});
100121
});
101122
});

0 commit comments

Comments
 (0)