ドットインストールでJavaScriptの添削コースを受講した

以前、プログラミングの第一歩としてドットインストールの添削コースに申し込んだ（リリース前にモニターとしてだったので無料だった）。

全４回のコースで、最後の課題としてJavaScriptで何かしらのツールを作るっていうのをやったので晒しとく。現時点でこのブログを書いている僕は以下のようなものしか作れないプログラミング童貞なので、それが伝われば良いな、と思ってこの記事を書きました。

70:25:5 配色ツール

function setColor() {
	var r = Math.floor(Math.random() * 256); // 0~255
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	var a = 0.3

	var rAccent = Math.floor(Math.random() * 256); // 0~255
	var gAccent = Math.floor(Math.random() * 256);
	var bAccent = Math.floor(Math.random() * 256);

	var baseColor = 'rgba('+r+','+g+','+b+','+a+')';
	var subColor = 'rgb('+r+','+g+','+b+')';
	var accentColor = 'rgb('+rAccent+','+gAccent+','+bAccent+')';

	document.getElementById('base').style.background = baseColor; 
	document.getElementById('sub').style.background = subColor; 
	document.getElementById('accent').style.background = accentColor; 

	document.getElementById('baseNum').innerHTML = baseColor; 
	document.getElementById('subNum').innerHTML = subColor; 
	document.getElementById('accentNum').innerHTML = accentColor; 

}

「配色の基本は70:25:5だ」
みたいなことを聞いた事があったので、正方形に対して70:25:5でランダムに色を流し込むツールを作ってみた。

見た目もコードもあまりよろしい出来映えじゃないしそもそもツールとして使えるレベルじゃないけど、楽しかったので良しとする。

色を流し込む対象を単なる正方形じゃなくてちゃんとHTMLのタグに割り当てれば実用性が出てくるんだろうけど、だるくてやってない。
あとは、色の知識付ければいくらかましなものになる気がする。

JavaScriptはブラウザとテキストエディタがあればできるので僕みたいな童貞にはハードルが低くて魅力的だなぁ、というのが課題をやってみた感想です。

» 通信添削コース - プログラミングならドットインストール