mixi-inc · Kuniwak · Mar 10, 2015 · Mar 10, 2015 · Mar 10, 2015 · Mar 10, 2015
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "mocha-phantomjs": "^3.5.3"
   },
   "dependencies": {
+    "bootstrap": "^3.3.2",
     "chai-jquery": "^2.0.0",
     "jquery": "^2.1.3"
   }

diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>mixi JS Training</title>
+  <link rel="stylesheet" href="modules/bootstrap/dist/css/bootstrap.css" media="all">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
+  <style>
+    .github-fork-ribbon {
+      background-color: #f80;
+    }
+  </style>
+</head>
+<body>
+  <div class="github-fork-ribbon-wrapper right">
+    <div class="github-fork-ribbon">
+      <a href="https://github.com/mixi-inc/JavaScriptTraining">Fork me on GitHub</a>
+    </div>
+  </div>
+  <div class="container">
+    <div class="jumbotron">
+      <div class="container">
+        <h1>mixi JavaScript Training</h1>
+      </div>
+    </div>
+    <ol>
+      <li><a href="stage1">意図した DOM を取得するトレーニング</a></li>
+      <li><a href="stage2">意図通りに DOM の構造・スタイルを変更するトレーニング</a></li>
+      <li><a href="stage3">意図通りにイベントを利用するトレーニング</a></li>
+      <li><a href="stage4">意図通りにサーバーと通信するトレーニング</a></li>
+      <li><a href="stage5">意図通りにモジュールを実装するトレーニング</a></li>
+      <li><a href="stage6">よくあるイディオムを読み書きするトレーニング</a></li>
+    </ol>
+  </div>
+</body>
+</html>
diff --git a/test/stage1/tests.js b/test/stage1/tests.js
@@ -7,7 +7,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // チュートリアル
       //
-      // 'change me!' を document.getElementById(elementId) に
+      // 'change me!' を document.getElementById(elementId); に
       // 書き換えてください。
       var element = 'change me!';
 
@@ -214,7 +214,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // チュートリアル
       //
-      // 'change me!' を document.querySelector('.js-training:nth-child(2) li')
+      // 'change me!' を document.querySelector('.js-training:nth-child(2) li');
       // に書き換えてください。
       var selector = 'change me!';
 

diff --git a/test/stage2/.eslintrc b/test/stage2/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "env": {
+    "browser": true,
+    "mocha": true
+  },
+  "globals": {
+    "$": false,
+    "jQuery": false,
+    "HTMLCollection": false
+  }
+}
diff --git a/test/stage2/index.html b/test/stage2/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>mixi JS Training</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
+  <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
+  <link rel="stylesheet" href="/modules/mocha/mocha.css">
+  <link rel="stylesheet" href="../common/mocha-patch.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="js-training-container">
+    <ul class="js-training">
+      <li id="firebrick">&#x1f363;</li>
+      <li id="chocolate">&#x1f36b;</li>
+      <li class="mediumseagreen">3</li>
+      <li class="turquoise">4</li>
+      <li><blockquote>5</blockquote></li>
+      <li data-js-training="blueviolet">6</li>
+    </ul>
+    <div class="js-training-trick">&#x1f420;&#x1f420;</div>
+  </div>
+  <div class="js-training-container">
+    <ul class="js-training">
+      <li id="brown">&#x1f363;</li>
+      <li id="darkorange">&#x1f36b;</li>
+      <li class="limegreen">9</li>
+      <li class="mediumturquoise">10</li>
+      <li><p>11</p></li>
+      <li data-js-training="darkorchid">12</li>
+    </ul>
+  <div class="js-training-trick">&#x1f420;&#x1f420;</div>
+  </div>
+  <div id="mocha"></div>
+  <script src="/modules/jquery/dist/jquery.js"></script>
+  <script src="/modules/mocha/mocha.js"></script>
+  <script src="/modules/chai/chai.js"></script>
+  <script src="/modules/chai-jquery/chai-jquery.js"></script>
+  <script>
+    mocha.ui('bdd');
+    mocha.reporter('html');
+    expect = chai.expect;
+  </script>
+  <script>mocha.setup('bdd')</script>
+  <script src="tests.js"></script>
+  <script>
+    if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
+    else { mocha.run(); }
+  </script>
+</body>
+</html>
diff --git a/test/stage2/style.css b/test/stage2/style.css
@@ -0,0 +1,95 @@
+.js-training-container {
+  position: relative;
+}
+
+.js-training {
+  position: relative;
+  z-index:10;
+  display: -webkit-flex;
+  display: flex;
+  list-style: none;
+  margin: 10px;
+  padding: 0;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.js-training li {
+  -webkit-flex: 1;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+  font-size: 130%;
+  text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.3);
+}
+
+.js-training #firebrick {
+  background-color: firebrick;
+  font-weight: normal;
+}
+
+.js-training #chocolate {
+  background-color: chocolate;
+  font-weight: normal;
+}
+
+.js-training .mediumseagreen {
+  background-color: mediumseagreen;
+}
+
+.js-training .turquoise {
+  background-color: turquoise;
+}
+
+.js-training blockquote {
+  background-color: steelblue;
+  margin: 0;
+  height: 40px;
+  font-weight: bold;
+  font-size: 1;
+}
+
+.js-training [data-js-training="blueviolet"] {
+  background-color: blueviolet;
+}
+
+.js-training #brown {
+  background-color: brown;
+  font-weight: normal;
+}
+
+.js-training #darkorange {
+  background-color: darkorange;
+  font-weight: normal;
+}
+
+.js-training .limegreen {
+  background-color: limegreen;
+}
+
+.js-training .mediumturquoise {
+  background-color: mediumturquoise;
+}
+
+.js-training p {
+  margin: 0;
+  padding: 0;
+  background-color: cornflowerblue;
+}
+
+.js-training [data-js-training="darkorchid"] {
+  background-color: darkorchid;
+}
+
+.js-training-trick {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  height: 40px;
+  line-height: 40px;
+  text-indent: 60%;
+}