diff --git a/public/stage1/tests.js b/public/stage1/tests.js
index 46f1ed45..e1ef3f74 100644
--- a/public/stage1/tests.js
+++ b/public/stage1/tests.js
@@ -12,7 +12,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
// 'change me!' を document.getElementById(elementId) に
// 書き換え、ブラウザをリロードしてみてください。
var elementId = 'firebrick';
- var element = 'change me!';
+ var element = document.getElementById(elementId);
expect(element).to.be.instanceof(HTMLElement);
expect(element).to.have.property('id', elementId);
@@ -27,7 +27,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
// 'change me!' を書き換えてください。
var elementId = 'chocolate';
- var element = 'change me!';
+ var element = document.getElementById(elementId);
expect(element).to.be.instanceof(HTMLElement);
expect(element).to.have.property('id', elementId);
@@ -41,7 +41,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
// 'change me!' を書き換えてください。
var elementClassName = 'mediumseagreen';
- var elements = 'change me!';
+ var elements = document.getElementsByClassName(elementClassName);
expect(elements).to.have.length(1);
expect(elements[0]).to.have.property('className', elementClassName);
@@ -55,7 +55,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
// 'change me!' を書き換えてください。
var elementClassName = 'turquoise';
- var elements = 'change me!';
+ var elements = document.getElementsByClassName(elementClassName);
expect(elements).to.have.length(2);
expect(elements[0]).to.have.property('className', elementClassName);
@@ -70,7 +70,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
// 'change me!' を書き換えてください。
var elementTagName = 'blockquote';
- var elements = 'change me!';
+ var elements = document.getElementsByTagName(elementTagName);
expect(elements).to.have.length(1);
expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
@@ -93,7 +93,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
// すると、開発ツール上で
... が選択されます。
// このことから、7 番の赤色の要素の ID は brown だということがわかります。
// では、'change me!' を document.getElementById('brown') に書き換えてみましょう。
- var element = 'change me!';
+ var element = document.getElementById('brown');
expect(element).to.have.property(secret('vq'), secret('oebja'));
});
@@ -102,7 +102,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('8 番の橙色の要素が1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var element = 'change me!';
+ var element = document.getElementById('darkorange');
expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
});
@@ -111,7 +111,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('9 番の緑色の要素が1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var elements = 'change me!';
+ var elements = document.getElementsByClassName("limegreen");
expect(elements).to.have.length(1);
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('yvzrterra'));
@@ -121,7 +121,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('10 番の水色の要素が2つ取得できる', function() {
// 'change me!' を書き換えてください。
- var elements = 'change me!';
+ var elements = document.getElementsByClassName('mediumturquoise');
expect(elements).to.have.length(2);
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr'));
@@ -135,7 +135,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
//
// なお、11 番の青色の要素は li 要素ではありません!
// よくみると、色がついているのはさらに内側の要素のようです。
- var elements = 'change me!';
+ var elements = document.getElementsByTagName('p');
expect(elements).to.have.length(1);
expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C'));
@@ -152,7 +152,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
//
// 'change me!' を document.querySelector('#firebrick') に
// 書き換えてください。
- var element = 'change me!';
+ var element = document.querySelector('#firebrick');
expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
@@ -164,7 +164,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('2 番の橙色の要素を querySelector を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var element = 'change me!';
+ var element = document.querySelector('#chocolate');
expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
@@ -176,7 +176,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('3 番の緑色の要素を querySelector を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var element = 'change me!';
+ var element = document.querySelector('.mediumseagreen');
expect(element).to.have.property(secret('pynffAnzr'), secret('zrqvhzfrnterra'));
});
@@ -185,7 +185,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function() {
// 'change me!' を書き換えてください。
- var elements = 'change me!';
+ var elements = document.querySelectorAll('.turquoise');
expect(elements).to.have.length(2);
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr'));
@@ -196,7 +196,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('5 番の青色の要素を querySelector を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var element = 'change me!';
+ var element = document.querySelector('blockquote');
expect(element).to.have.property(secret('gntAnzr'), secret('OYBPXDHBGR'));
});
@@ -205,7 +205,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var element = 'change me!';
+ var element = document.querySelector('[data-js-training="blueviolet"]');
expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
secret('oyhrivbyrg'));
@@ -220,7 +220,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
//
// 'change me!' を '.js-training:nth-child(2) li'
// に書き換えてください。
- var selector = 'change me!';
+ var selector = '.js-training:nth-child(2) li';
var element = document.querySelector(selector);
expect(selector).to.not.have.string('#');
@@ -231,7 +231,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var selector = 'change me!';
+ var selector = '.js-training:nth-child(2) li:nth-child(2)';
var element = document.querySelector(selector);
expect(selector).to.not.have.string('#');
@@ -245,7 +245,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var selector = 'change me!';
+ var selector = '.js-training:nth-of-type(2) li:last-child';
var element = document.querySelector(selector);
expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/);
@@ -265,7 +265,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
// 基本的な使い方は document.querySelectorAll と同じです。
//
// 'change me!' を $('#brown') に書き換えてください。
- var $element = 'change me!';
+ var $element = $('#brown');
expect($element).to.be.instanceof(jQuery);
expect($element).to.have.id(secret('oebja'));
@@ -275,7 +275,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('8 番の橙色の要素を jQuery を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var $element = 'change me!';
+ var $element = $('#darkorange');
expect($element).to.be.instanceof(jQuery);
expect($element).to.have.id(secret('qnexbenatr'));
@@ -288,7 +288,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('9 番の緑色の要素を jQuery を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var $element = 'change me!';
+ var $element = $('.limegreen');
expect($element).to.be.instanceof(jQuery);
expect($element).to.have.class(secret('yvzrterra'));
@@ -298,7 +298,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('10 番の水色の要素を jQuery を使って2つ取得できる', function() {
// 'change me!' を書き換えてください。
- var $element = 'change me!';
+ var $element = $('.mediumturquoise');
expect($element).to.be.instanceof(jQuery);
expect($element).to.have.length(2);
@@ -309,7 +309,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('11 番の青色の要素を jQuery を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var $element = 'change me!';
+ var $element = $('p');
expect($element).to.be.instanceof(jQuery);
expect($element).to.have.length(1);
@@ -320,7 +320,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('12 番の紫色の要素を jQuery を使って1つ取得できる', function() {
// 'change me!' を書き換えてください。
- var $element = 'change me!';
+ var $element = $('[data-js-training="darkorchid"]');
expect($element).to.be.instanceof(jQuery);
expect($element).to.have.length(1);
@@ -334,7 +334,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな
it('動いている寿司要素を取得する', function() {
// 'change me!' を書き換えてください。
- var element = 'change me!';
+ var element = document.querySelector('x-flying-sushi-monster');
expect(element).to.have.deep.property(
secret('grkgPbagrag'), '\uD83C\uDF63');
diff --git a/public/stage2/tests.js b/public/stage2/tests.js
index b430dfdc..c38ade27 100644
--- a/public/stage2/tests.js
+++ b/public/stage2/tests.js
@@ -11,7 +11,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
//
// var element = document.getElementById('firebrick');
// element.textContent = element.textContent + element.textContent;
- var element = 'change me!';
+ var element = document.getElementById('firebrick');
+ element.textContent = element.textContent + element.textContent;
expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
@@ -24,7 +25,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は element 変数に代入してください。
- var element = 'change me!';
+ var element = document.getElementById('chocolate');
+ element.textContent = element.textContent + element.textContent;
expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
@@ -40,8 +42,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は element 変数に代入してください。
- var element = 'change me!';
-
+ var element = document.querySelector('.mediumseagreen');
+ element.style.backgroundColor = "limegreen";
expect(element).to.have.property(
secret('pynffAnzr'), secret('zrqvhzfrnterra'));
@@ -58,8 +60,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は element 変数に代入してください。
- var element = 'change me!';
-
+ var element = document.querySelector('.turquoise');
+ element.style.opacity = 0.5;
expect(element).to.have.property(
secret('pynffAnzr'), secret('ghedhbvfr'));
@@ -76,7 +78,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は element 変数に代入してください。
- var element = 'change me!';
+ var element = document.querySelector('blockquote');
+ element.style.transform = "rotate(10deg)";
expect(element).to.have.property(
@@ -97,8 +100,13 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
//
// なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
// 使う方法を使ってください。
- var element = 'change me!';
+ var element = document.querySelector('[data-js-training="blueviolet"]');
+
+ //低速
+ //element.style.position = 'relative';
+ //element.style.top = '-20px';
+ element.setAttribute('style', 'position: relative; top: -20px;');
expect(element).to.have.deep.property(
secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg'));
@@ -127,7 +135,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
//
// var $element = $('#brown');
// $element.text($element.text() + $element.text());
- var $element = 'change me!';
+ var $element = $('#brown');
+ $element.text($element.text() + $element.text());
expect($element).to.be.instanceof(jQuery);
@@ -140,7 +149,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
- var $element = 'change me!';
+ var $element = $('#darkorange');
+ $element.text($element.text() + $element.text());
expect($element).to.be.instanceof(jQuery);
@@ -156,7 +166,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
- var $element = 'change me!';
+ var $element = $('.limegreen');
+ $element.css('background-color', 'mediumseagreen');
expect($element).to.be.instanceof(jQuery);
@@ -173,7 +184,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
- var $element = 'change me!';
+ var $element = $('.mediumturquoise');
+ $element.css('opacity', '0.5');
expect($element).to.be.instanceof(jQuery);
@@ -186,7 +198,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
- var $element = 'change me!';
+ var $element = $('p');
+ $element.css('transform', 'rotate(10deg)');
expect($element).to.be.instanceof(jQuery);
@@ -205,7 +218,11 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
//
// なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
// 使う方法を使ってください。
- var $element = 'change me!';
+ var $element = $('[data-js-training="darkorchid"]');
+ $element.css({
+ position: 'relative',
+ top: '-20px'
+ });
expect($element).to.be.instanceof(jQuery);
diff --git a/public/stage3/tests.js b/public/stage3/tests.js
index fa3cb6f2..4d269796 100644
--- a/public/stage3/tests.js
+++ b/public/stage3/tests.js
@@ -11,6 +11,9 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
// var element = document.querySelector('#firebrick');
// var ghost = document.querySelector('.firebrick-ghost');
// element.removeChild(ghost);
+ var element = document.querySelector('#firebrick');
+ var ghost = document.querySelector('.firebrick-ghost');
+ element.removeChild(ghost);
var firebrick = document.getElementById('firebrick');
@@ -22,6 +25,9 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('2 番の要素からインベーダー要素を除去する', function() {
// ここにコードを記述してください。
+ var element = document.querySelector('#chocolate')
+ var spaceInvader = document.querySelector('.chocolate-space-invader');
+ element.removeChild(spaceInvader);
var darkorange = document.getElementById('chocolate');
@@ -33,6 +39,15 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('3 番の要素の左右の幽霊要素をすべて除去する', function() {
// ここにコードを記述してください。
+ var element = document.querySelector('.mediumseagreen');
+ var ghosts = document.querySelectorAll('.mediumseagreen-ghosts');
+
+ //element.removeChild(ghosts[0]);
+ //element.removeChild(ghosts[1]);
+
+ for (var i = ghosts.length - 1; i >= 0; i--) {
+ element.removeChild(ghosts[i])
+ };
var darkorange = document.querySelector('.mediumseagreen');
@@ -45,7 +60,8 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
elementToAdd.textContent = '\uD83D\uDC2C';
// 上の elementToAdd を追加するコードをここに記述してください。
-
+ var element = document.querySelector('.turquoise');
+ element.appendChild(elementToAdd);
var turquoise = document.querySelector('.turquoise');
expect(turquoise.childNodes.length).to.equal(2);
@@ -60,7 +76,13 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
// 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを
// ここに記述してください。
+ var element = document.querySelector('.js-training blockquote');
+ var texttmp = document.createTextNode('5');
+ element.textContent = null;
+
+ element.appendChild(elementToAdd);
+ element.appendChild(texttmp);
var blockquote = document.querySelector('blockquote');
expect(blockquote.childNodes.length).to.equal(2);
@@ -80,6 +102,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
//
// $('.brown-ghost').remove();
+ $('.brown-ghost').remove();
var $brown = $('#brown');
expect($brown.children()).to.have.length(0);
@@ -90,7 +113,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('7 番の要素からインベーダー要素を除去する', function() {
// ここにコードを記述してください。
-
+ $('.darkorange-space-invader').remove();
var $darkorange = $('#darkorange');
expect($darkorange.children()).to.have.length(0);
@@ -104,7 +127,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('8 番の要素の左右の幽霊要素をすべて除去する', function() {
// ここにコードを記述してください。
-
+ $('.limegreen-ghosts').remove();
var $limegreen = $('.limegreen');
expect($limegreen).to.have.text('8\uD83C\uDF3F');
@@ -115,7 +138,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
var $elementToAdd = $('\uD83D\uDC2C');
// 上の $elementToAdd を追加するコードをここに記述してください。
-
+ $('.mediumturquoise').append($elementToAdd);
var $mediumturquoise = $('.mediumturquoise');
expect($mediumturquoise.children()).to.have.length(1);
@@ -127,7 +150,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
var $elementToAdd = $('\uD83D\uDC1F');
// 上の $elementToAdd を追加するコードをここに記述してください。
-
+ $('p').prepend($elementToAdd);
var $p = $('p');
expect($p.children()).to.have.length(1);
diff --git a/public/stage4/tests.js b/public/stage4/tests.js
index 599536b6..8f0a64f8 100644
--- a/public/stage4/tests.js
+++ b/public/stage4/tests.js
@@ -24,6 +24,10 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun
//
// ここに上記のどちらかのコードを記述してください。
+ var element = document.getElementById('firebrick');
+ element.addEventListener('click', function() {
+ element.textContent = Number(element.textContent) + 1;
+ });
var firebrick = document.getElementById('firebrick');
firebrick.dispatchEvent(createClickEvent());
diff --git a/server.js b/server.js
index 39ff94e3..aae8e902 100644
--- a/server.js
+++ b/server.js
@@ -29,7 +29,7 @@ app.get('/api/friends/:username([\\w.-]+)', function(req, res) {
var PORT = process.env.PORT;
-var HOSTNAME = 'localhost';
+var HOSTNAME = '192.168.33.10';
var server = require('http').createServer(app);
server.listen(PORT, HOSTNAME, function () {