diff --git a/package.json b/package.json index c5b25c3a..e1098a4a 100644 --- 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 new file mode 100644 index 00000000..01f38257 --- /dev/null +++ b/test/index.html @@ -0,0 +1,37 @@ + + + + + + mixi JS Training + + + + + +
+
+ Fork me on GitHub +
+
+
+
+
+

mixi JavaScript Training

+
+
+
    +
  1. 意図した DOM を取得するトレーニング
    2. +
  2. 意図通りに DOM の構造・スタイルを変更するトレーニング
    3. +
  3. 意図通りにイベントを利用するトレーニング
    4. +
  4. 意図通りにサーバーと通信するトレーニング
    5. +
  5. 意図通りにモジュールを実装するトレーニング
    6. +
  6. よくあるイディオムを読み書きするトレーニング
    7. +
+
+ + diff --git a/test/stage1/tests.js b/test/stage1/tests.js index 2ccc6497..dacde60d 100644 --- 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 new file mode 100644 index 00000000..ddbc632c --- /dev/null +++ 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 new file mode 100644 index 00000000..c5592469 --- /dev/null +++ b/test/stage2/index.html @@ -0,0 +1,53 @@ + + + + mixi JS Training + + + + + + + + + +
+ +
🐠🐠
+
+
+ +
🐠🐠
+
+
+ + + + + + + + + + diff --git a/test/stage2/style.css b/test/stage2/style.css new file mode 100644 index 00000000..f5f80ad7 --- /dev/null +++ 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%; +} diff --git a/test/stage2/tests.js b/test/stage2/tests.js new file mode 100644 index 00000000..a1d11693 --- /dev/null +++ b/test/stage2/tests.js @@ -0,0 +1,231 @@ +'use strict'; + +describe('ステージ2（意図した通りに DOM 要素の構造・スタイルを変更できるようになる）', function(){ + describe('DOMインターフェース編', function() { + it('寿司が表示されている要素の寿司を2つに増やす', function(){ + var element; + + // チュートリアル + // + // ここに以下のコードを記述してください。 + // + // element = document.getElementById('firebrick'); + // element.textContent = element.textContent + element.textContent; + + + expect(element).to.have.property(secret('vq'), secret('sveroevpx')); + expect(element).to.have.deep.property( + secret('grkgPbagrag'), '\uD83C\uDF63\uD83C\uDF63'); + }); + + + it('チョコが表示されている要素のチョコを2つに増やす', function(){ + var element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は element 変数に代入してください。 + + + // 参考情報 + // https://developer.mozilla.org/ja/docs/Web/API/Node/textContent + + expect(element).to.have.property(secret('vq'), secret('pubpbyngr')); + expect(element).to.have.deep.property( + secret('grkgPbagrag'), '\uD83C\uDF6B\uD83C\uDF6B'); + }); + + + it('3 番の要素の背景色を "limegreen" に変更する', function(){ + var element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は element 変数に代入してください。 + + + // 参考情報 + // https://developer.mozilla.org/ja/search?q=css+%E8%89%B2 + + expect(element).to.have.property( + secret('pynffAnzr'), secret('zrqvhzfrnterra')); + + expect(element).to.have.deep.property( + secret('fglyr.onpxtebhaqPbybe'), normalizeColor('limegreen')); + }); + + + it('4 番の要素を 50% の透明度に変更する', function(){ + var element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は element 変数に代入してください。 + + + // 参考情報 + // https://developer.mozilla.org/ja/search?q=css+%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6 + + expect(element).to.have.property( + secret('pynffAnzr'), secret('ghedhbvfr')); + + expect(element).to.have.deep.property( + secret('fglyr.bcnpvgl'), '0.5'); + }); + + + it('5 番の要素を時計回り方向に 10 度回転させる', function(){ + var element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は element 変数に代入してください。 + + + // 参考情報 + // https://developer.mozilla.org/ja/search?q=css+%E5%9B%9E%E8%BB%A2 + + expect(element).to.have.property( + secret('gntAnzr'), secret('OYBPXDHBGR')); + + expect(element).to.have.deep.property( + secret('fglyr.genafsbez'), secret('ebgngr(10qrt)')); + }); + + + it('6 番の要素を上に 20px 移動させる', function(){ + var element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は element 変数に代入してください。 + + // 参考情報 + // https://developer.mozilla.org/ja/docs/Web/CSS/top + + expect(element).to.have.deep.property( + secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg')); + + expect(element).to.have.deep.property( + secret('fglyr.gbc'), secret('-20ck')); + + expect(element).to.have.deep.property( + secret('fglyr.cbfvgvba'), secret('eryngvir')); + }); + }); + + + describe('jQuery 編', function() { + it('寿司が表示されている要素の寿司を jQuery を使って2つに増やす', function(){ + var $element; + + // チュートリアル + // + // ここに以下のコードを記述してください。 + // + // $element = document.getElementById('brown'); + // $element.textContent = $element.textContent + $element.textContent; + + + expect($element).to.be.instanceof(jQuery); + expect($element).to.have.id(secret('oebja')); + expect($element).to.have.text('\uD83C\uDF63\uD83C\uDF63'); + }); + + + it('チョコが表示されている要素のチョコを jQuery を使って2つに増やす', function(){ + var $element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は $element 変数に代入してください。 + + + // 参考情報 + // http://api.jquery.com/category/manipulation/ + + expect($element).to.be.instanceof(jQuery); + expect($element).to.have.id(secret('qnexbenatr')); + expect($element).to.have.text('\uD83C\uDF6B\uD83C\uDF6B'); + }); + + + it('9 番の要素の背景色を jQuery を使って "mediumseagreen" に変更する', function(){ + var $element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は $element 変数に代入してください。 + + + // 参考情報 + // http://api.jquery.com/category/css/ + + expect($element).to.be.instanceof(jQuery); + expect($element).to.have.class(secret('yvzrterra')); + expect($element).to.have.css( + secret('onpxtebhaq-pbybe'), normalizeColor('mediumseagreen')); + }); + + + it('10 番の要素を jQuery を使って 50% の透明度に変更する', function(){ + var $element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は $element 変数に代入してください。 + + + expect($element).to.be.instanceof(jQuery); + expect($element).to.have.class(secret('zrqvhzghedhbvfr')); + expect($element).to.have.css(secret('bcnpvgl'), '0.5'); + }); + + + it('5 番の要素を jQuery を使って時計回り方向に 10 度回転させる', function(){ + var $element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は $element 変数に代入してください。 + + + expect($element).to.be.instanceof(jQuery); + + expect($element.get(0)).to.have.property( + secret('gntAnzr'), secret('C')); + + expect($element).to.have.css(secret('genafsbez')).not.equal('none'); + }); + + + it('6 番の要素を jQuery を使って上に 20px 移動させる', function(){ + var $element; + + // ここにコードを記述してください。 + // 変更した HTML 要素は $element 変数に代入してください。 + + + expect($element).to.be.instanceof(jQuery); + expect($element).to.have.data(secret('wfGenvavat'), secret('qnexbepuvq')); + expect($element).to.have.css(secret('gbc'), secret('-20ck')); + expect($element).to.have.css(secret('cbfvgvba'), secret('eryngvir')); + }); + }); +}); + + +function secret(str) { + // Copyright (c) 2012 K.Adam White + // Released under the MIT license + // https://github.com/kadamwhite/jquery.rot13/blob/master/LICENSE-MIT + return Array.prototype.map.call(str, function(char) { + if (!char.match(/[A-Za-z]/)) { return char; } + + var charCode = char.charCodeAt(0); + if(charCode < 97) { + charCode = (charCode - 52) % 26 + 65; + } else { + charCode = (charCode - 84) % 26 + 97; + } + return String.fromCharCode(charCode); + }).join(''); +} + +function normalizeColor(value) { + // ブラウザごとに color の値がまちまちに読まれるのを、正規化する + var elem = document.createElement('div'); + elem.style.color = value; + return elem.style.color; +}