sounisi5011/README.md

## README.md

      
    Raw
  

              README.md
            
          
    入力した文字を括弧で囲むだけのクソアプリ（Vanilla JS版）


https://bl.ocks.org/sounisi5011/raw/7dffbc2a33a20d52fafb55c0e10d969a/
http://bl.ocks.org/sounisi5011/raw/7dffbc2a33a20d52fafb55c0e10d969a/


## index.html
<!doctype html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>入力した文字を括弧で囲むだけのクソアプリ - Vanilla JS版</title>
<link rel=stylesheet href="main.css">
<h1>入力した文字を括弧で囲むだけのクソアプリ - Vanilla JS版</h1>
<main id=main></main>
<script src="main.js"></script>

## main.css
body {
  text-align: center;
}

#main input {
  font-size: 1em;
}

#main input[type=button] {
  margin-left: .5em;
}

## main.js
/**
 * 文字列を括弧で囲む関数
 * 空文字列の場合は、空文字列を返す
 * @param {string} text 括弧で囲む文字列
 * @return {string} 括弧で囲まれた文字列。または、空文字列
 */
function wrapBracket(text) {
  var newText = '';
  if (text !== '') {
    newText = '「' + text + '」';
  }
  return newText;
}

/*
 * 要素を生成
 */
var inputElem = document.createElement('input');
var buttonElem = document.createElement('input');
var outputElem = document.createElement('p');

/*
 * 入力欄の属性を設定
 */
inputElem.type = 'text';
inputElem.placeholder = '文字を打って！！！';

/*
 * 表示ボタンの属性とイベントを設定
 */
buttonElem.type = 'button';
buttonElem.value = '括弧で囲む';
buttonElem.addEventListener('click', function() {
  /*
   * 入力値を取得
   */
  var inputText = inputElem.value;

  /*
   * 入力値を括弧で囲む
   */
  var outputText = wrapBracket(inputText);

  /*
   * 表示
   */
  outputElem.textContent = outputText;
}, false);

/*
 * 要素をDOMに追加
 */
var mainElem = document.getElementById('main');
mainElem.appendChild(inputElem);
mainElem.appendChild(buttonElem);
mainElem.appendChild(outputElem);
	<!doctype html>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">
	<meta name=format-detection content="telephone=no,email=no,address=no">
	<title>入力した文字を括弧で囲むだけのクソアプリ - Vanilla JS版</title>
	<link rel=stylesheet href="main.css">
	<h1>入力した文字を括弧で囲むだけのクソアプリ - Vanilla JS版</h1>
	<main id=main></main>
	<script src="main.js"></script>
	body {
	text-align: center;
	}

	#main input {
	font-size: 1em;
	}

	#main input[type=button] {
	margin-left: .5em;
	}
	/**
	* 文字列を括弧で囲む関数
	* 空文字列の場合は、空文字列を返す
	* @param {string} text 括弧で囲む文字列
	* @return {string} 括弧で囲まれた文字列。または、空文字列
	*/
	function wrapBracket(text) {
	var newText = '';
	if (text !== '') {
	newText = '「' + text + '」';
	}
	return newText;
	}

	/*
	* 要素を生成
	*/
	var inputElem = document.createElement('input');
	var buttonElem = document.createElement('input');
	var outputElem = document.createElement('p');

	/*
	* 入力欄の属性を設定
	*/
	inputElem.type = 'text';
	inputElem.placeholder = '文字を打って！！！';

	/*
	* 表示ボタンの属性とイベントを設定
	*/
	buttonElem.type = 'button';
	buttonElem.value = '括弧で囲む';
	buttonElem.addEventListener('click', function() {
	/*
	* 入力値を取得
	*/
	var inputText = inputElem.value;

	/*
	* 入力値を括弧で囲む
	*/
	var outputText = wrapBracket(inputText);

	/*
	* 表示
	*/
	outputElem.textContent = outputText;
	}, false);

	/*
	* 要素をDOMに追加
	*/
	var mainElem = document.getElementById('main');
	mainElem.appendChild(inputElem);
	mainElem.appendChild(buttonElem);
	mainElem.appendChild(outputElem);