Skip to content

Commit ac673a2

Browse files
KuniwakKuniwak
committed
Merge pull request mixi-inc#5 from mixi-inc/impl-stage2-plus
ステージ3
2 parents facabcb + 1d39570 commit ac673a2

File tree

10 files changed

+367
-6
lines changed

10 files changed

+367
-6
lines changed

‎test/index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@ <h1>mixi JavaScript Training</h1>
2626
</div>
2727
<ol>
2828
<li><a href="stage1">意図した DOM を取得するトレーニング</a></li>
29-
<li><a href="stage2">意図通りに DOM の構造・スタイルを変更するトレーニング</a></li>
30-
<li><a href="stage3">意図通りにイベントを利用するトレーニング</a></li>
31-
<li><a href="stage4">意図通りにサーバーと通信するトレーニング</a></li>
32-
<li><a href="stage5">意図通りにモジュールを実装するトレーニング</a></li>
33-
<li><a href="stage6">よくあるイディオムを読み書きするトレーニング</a></li>
29+
<li><a href="stage2">意図通りに DOM のスタイルを変更するトレーニング</a></li>
30+
<li><a href="stage3">意図通りに DOM の構造を変更するトレーニング</a></li>
31+
<li><a href="stage4">意図通りにイベントを利用するトレーニング</a></li>
32+
<li><a href="stage5">意図通りにサーバーと通信するトレーニング</a></li>
33+
<li><a href="stage6">意図通りにモジュールを実装するトレーニング</a></li>
34+
<li><a href="stage7">よくあるイディオムを読み書きするトレーニング</a></li>
3435
</ol>
3536
</div>
3637
</body>

‎test/stage1/analytics.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
(function() {
2+
'use strict';
3+
var XFlyingSushiMonsterProto = Object.create(HTMLDivElement.prototype);
4+
XFlyingSushiMonsterProto.createdCallback = function() {
5+
this.textContent = '\uD83C\uDF63';
6+
var style = this.style;
7+
8+
style.position = 'absolute';
9+
style.fontSize = '100px';
10+
style.webkitAnimationName = 'moveHorizontal';
11+
style.webkitAnimationDuration = '1s';
12+
style.webkitAnimationIterationCount = 'infinite';
13+
style.webkitAnimationDirection = 'alternate-reverse';
14+
style.webkitAnimationFillMode = 'forwards';
15+
};
16+
17+
var XFlyingSushiMonster = document.registerElement('x-flying-sushi-monster', {
18+
prototype: XFlyingSushiMonsterProto
19+
});
20+
21+
var target = document.createElement('div');
22+
target.style.position = 'relative';
23+
target.style.height = '100px';
24+
target.appendChild(new XFlyingSushiMonster());
25+
26+
var targetContainer = document.createElement('div');
27+
targetContainer.appendChild(target);
28+
document.body.appendChild(targetContainer);
29+
})();

‎test/stage1/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
expect = chai.expect;
4141
</script>
4242
<script>mocha.setup('bdd')</script>
43+
<script src="analytics.js"></script>
4344
<script src="tests.js"></script>
4445
<script>
4546
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }

‎test/stage1/style.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,24 @@
7777
.js-training [data-js-training="darkorchid"] {
7878
background-color: darkorchid;
7979
}
80+
81+
@-webkit-keyframes moveHorizontal {
82+
from {
83+
left: -20%;
84+
}
85+
86+
to {
87+
left: 110%;
88+
}
89+
}
90+
91+
92+
@-moz-keyframes moveHorizontal {
93+
from {
94+
left: -20%;
95+
}
96+
97+
to {
98+
left: 110%;
99+
}
100+
}

‎test/stage1/tests.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,18 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
323323
secret('qnexbepuvq'));
324324
});
325325
});
326+
327+
328+
describe('エクストラステージ', function(){
329+
it('動いている寿司要素を取得する', function(){
330+
331+
// 'change me!' を書き換えてください。
332+
var element = 'change me!';
333+
334+
expect(element).to.have.deep.property(
335+
secret('grkgPbagrag'), '\uD83C\uDF63');
336+
});
337+
});
326338
});
327339

328340

‎test/stage2/tests.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use strict';
22

3-
describe('ステージ2（意図した通りに DOM 要素の構造・スタイルを変更できるようになる）', function(){
3+
describe('ステージ2（意図した通りに DOM 要素のスタイルを変更できるようになる）', function(){
44
describe('DOMインターフェース編', function() {
55
it('寿司が表示されている要素の寿司を2つに増やす', function(){
66
var element;

‎test/stage3/.eslintrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"mocha": true
5+
},
6+
"globals": {
7+
"$": false,
8+
"jQuery": false,
9+
"HTMLCollection": false
10+
}
11+
}

‎test/stage3/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>mixi JS Training</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
8+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
9+
<link rel="stylesheet" href="/modules/mocha/mocha.css">
10+
<link rel="stylesheet" href="../common/mocha-patch.css">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
<body>
14+
<div class="js-training-container">
15+
<ul class="js-training">
16+
<li id="firebrick">1<span class="firebrick-ghost">&#x1f47b;</span></li>
17+
<li id="chocolate">2<span class="chocolate-space-invader">&#x1f47e;</span></li>
18+
<li class="mediumseagreen">3<span class="mediumseagreen-ghosts">&#x1f47b;&#x1f47b;</span>&#x1f33f;<span class="mediumseagreen-ghosts">&#x1f47b;&#x1f47b;</span></li>
19+
<li class="turquoise">4</li>
20+
<li><blockquote>5</blockquote></li>
21+
</ul>
22+
<div class="js-training-trick">&#x1f420;&#x1f420;</div>
23+
</div>
24+
<div class="js-training-container">
25+
<ul class="js-training">
26+
<li id="brown">6<span class="brown-ghost">&#x1f47b;</span></li>
27+
<li id="darkorange">7<span class="darkorange-space-invader">&#x1f47e;</span></li>
28+
<li class="limegreen">8<span class="limegreen-ghosts">&#x1f47b;&#x1f47b;</span>&#x1f33f;<span class="limegreen-ghosts">&#x1f47b;&#x1f47b;</span></li>
29+
<li class="mediumturquoise">9</li>
30+
<li><p>10</p></li>
31+
</ul>
32+
<div class="js-training-trick">&#x1f420;&#x1f420;</div>
33+
</div>
34+
<div id="mocha"></div>
35+
<script src="/modules/jquery/dist/jquery.js"></script>
36+
<script src="/modules/mocha/mocha.js"></script>
37+
<script src="/modules/chai/chai.js"></script>
38+
<script src="/modules/chai-jquery/chai-jquery.js"></script>
39+
<script>
40+
mocha.ui('bdd');
41+
mocha.reporter('html');
42+
expect = chai.expect;
43+
</script>
44+
<script>mocha.setup('bdd')</script>
45+
<script src="tests.js"></script>
46+
<script>
47+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
48+
else { mocha.run(); }
49+
</script>
50+
</body>
51+
</html>

‎test/stage3/style.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
.js-training-container {
2+
position: relative;
3+
}
4+
5+
.js-training {
6+
position: relative;
7+
z-index:10;
8+
display: -webkit-flex;
9+
display: flex;
10+
list-style: none;
11+
margin: 10px;
12+
padding: 0;
13+
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
14+
}
15+
16+
.js-training li {
17+
-webkit-flex: 1;
18+
flex: 1;
19+
margin: 0;
20+
padding: 0;
21+
height: 40px;
22+
line-height: 40px;
23+
text-align: center;
24+
color: white;
25+
font-weight: bold;
26+
font-size: 130%;
27+
text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.3);
28+
}
29+
30+
.js-training #firebrick {
31+
background-color: firebrick;
32+
font-weight: normal;
33+
}
34+
35+
.js-training #chocolate {
36+
background-color: chocolate;
37+
font-weight: normal;
38+
}
39+
40+
.js-training .mediumseagreen {
41+
background-color: mediumseagreen;
42+
font-weight: normal;
43+
}
44+
45+
.js-training .turquoise {
46+
background-color: turquoise;
47+
font-weight: normal;
48+
}
49+
50+
.js-training blockquote {
51+
background-color: steelblue;
52+
margin: 0;
53+
height: 40px;
54+
font-size: 1;
55+
font-weight: normal;
56+
}
57+
58+
.js-training [data-js-training="blueviolet"] {
59+
background-color: blueviolet;
60+
}
61+
62+
.js-training #brown {
63+
background-color: brown;
64+
font-weight: normal;
65+
}
66+
67+
.js-training #darkorange {
68+
background-color: darkorange;
69+
font-weight: normal;
70+
}
71+
72+
.js-training .limegreen {
73+
background-color: limegreen;
74+
font-weight: normal;
75+
}
76+
77+
.js-training .mediumturquoise {
78+
background-color: mediumturquoise;
79+
font-weight: normal;
80+
}
81+
82+
.js-training p {
83+
margin: 0;
84+
padding: 0;
85+
background-color: cornflowerblue;
86+
font-weight: normal;
87+
}
88+
89+
.js-training [data-js-training="darkorchid"] {
90+
background-color: darkorchid;
91+
}
92+
93+
.js-training-trick {
94+
z-index: 1;
95+
position: absolute;
96+
top: 0;
97+
height: 40px;
98+
line-height: 40px;
99+
text-indent: 60%;
100+
}

0 commit comments

Comments
 (0)