Skip to content

Commit facabcb

Browse files
KuniwakKuniwak
committed
Merge pull request mixi-inc#4 from mixi-inc/impl-stage2
Impl stage2
2 parents 7d9b06a + 1999fa8 commit facabcb

File tree

7 files changed

+430
-2
lines changed

7 files changed

+430
-2
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"mocha-phantomjs": "^3.5.3"
3434
},
3535
"dependencies": {
36+
"bootstrap": "^3.3.2",
3637
"chai-jquery": "^2.0.0",
3738
"jquery": "^2.1.3"
3839
}

‎test/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>mixi JS Training</title>
7+
<link rel="stylesheet" href="modules/bootstrap/dist/css/bootstrap.css" media="all">
8+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
9+
<style>
10+
.github-fork-ribbon {
11+
background-color: #f80;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div class="github-fork-ribbon-wrapper right">
17+
<div class="github-fork-ribbon">
18+
<a href="https://github.com/mixi-inc/JavaScriptTraining">Fork me on GitHub</a>
19+
</div>
20+
</div>
21+
<div class="container">
22+
<div class="jumbotron">
23+
<div class="container">
24+
<h1>mixi JavaScript Training</h1>
25+
</div>
26+
</div>
27+
<ol>
28+
<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>
34+
</ol>
35+
</div>
36+
</body>
37+
</html>

‎test/stage1/tests.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
77

88
// チュートリアル
99
//
10-
// 'change me!' を document.getElementById(elementId) に
10+
// 'change me!' を document.getElementById(elementId); に
1111
// 書き換えてください。
1212
var element = 'change me!';
1313

@@ -214,7 +214,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
214214

215215
// チュートリアル
216216
//
217-
// 'change me!' を document.querySelector('.js-training:nth-child(2) li')
217+
// 'change me!' を document.querySelector('.js-training:nth-child(2) li');
218218
// に書き換えてください。
219219
var selector = 'change me!';
220220

‎test/stage2/.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/stage2/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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">&#x1f363;</li>
17+
<li id="chocolate">&#x1f36b;</li>
18+
<li class="mediumseagreen">3</li>
19+
<li class="turquoise">4</li>
20+
<li><blockquote>5</blockquote></li>
21+
<li data-js-training="blueviolet">6</li>
22+
</ul>
23+
<div class="js-training-trick">&#x1f420;&#x1f420;</div>
24+
</div>
25+
<div class="js-training-container">
26+
<ul class="js-training">
27+
<li id="brown">&#x1f363;</li>
28+
<li id="darkorange">&#x1f36b;</li>
29+
<li class="limegreen">9</li>
30+
<li class="mediumturquoise">10</li>
31+
<li><p>11</p></li>
32+
<li data-js-training="darkorchid">12</li>
33+
</ul>
34+
<div class="js-training-trick">&#x1f420;&#x1f420;</div>
35+
</div>
36+
<div id="mocha"></div>
37+
<script src="/modules/jquery/dist/jquery.js"></script>
38+
<script src="/modules/mocha/mocha.js"></script>
39+
<script src="/modules/chai/chai.js"></script>
40+
<script src="/modules/chai-jquery/chai-jquery.js"></script>
41+
<script>
42+
mocha.ui('bdd');
43+
mocha.reporter('html');
44+
expect = chai.expect;
45+
</script>
46+
<script>mocha.setup('bdd')</script>
47+
<script src="tests.js"></script>
48+
<script>
49+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
50+
else { mocha.run(); }
51+
</script>
52+
</body>
53+
</html>

‎test/stage2/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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+
}
43+
44+
.js-training .turquoise {
45+
background-color: turquoise;
46+
}
47+
48+
.js-training blockquote {
49+
background-color: steelblue;
50+
margin: 0;
51+
height: 40px;
52+
font-weight: bold;
53+
font-size: 1;
54+
}
55+
56+
.js-training [data-js-training="blueviolet"] {
57+
background-color: blueviolet;
58+
}
59+
60+
.js-training #brown {
61+
background-color: brown;
62+
font-weight: normal;
63+
}
64+
65+
.js-training #darkorange {
66+
background-color: darkorange;
67+
font-weight: normal;
68+
}
69+
70+
.js-training .limegreen {
71+
background-color: limegreen;
72+
}
73+
74+
.js-training .mediumturquoise {
75+
background-color: mediumturquoise;
76+
}
77+
78+
.js-training p {
79+
margin: 0;
80+
padding: 0;
81+
background-color: cornflowerblue;
82+
}
83+
84+
.js-training [data-js-training="darkorchid"] {
85+
background-color: darkorchid;
86+
}
87+
88+
.js-training-trick {
89+
z-index: 1;
90+
position: absolute;
91+
top: 0;
92+
height: 40px;
93+
line-height: 40px;
94+
text-indent: 60%;
95+
}

0 commit comments

Comments
 (0)