chikoski · October 16, 2013 23:21
diff --git a/jsbin.IMALUhek.css b/jsbin.IMALUhek.css
 h2{
  color: #333;
  font-size: 120%;
  font-weight: normal;
  margin-top: 3em;
 }
 h2:first-child{
  margin-top: 1em;
 }
 textarea{
  vertical-align: top;
 }
 label{
  vertical-align: top;
  margin-right: 0.5em;
 }
 .form_item{
  margin-bottom: 1em;
 }
diff --git a/jsbin.IMALUhek.html b/jsbin.IMALUhek.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
  <h2>新しいTo Do</h2>
  <form>
    <div class="form_item">
      <label for="todo_title">件名</label>
      <input id="todo_title" type="text" placeholder="To Doのタイトル">
    </div>
    <div class="form_item">
      <label for="todo_details">詳細</label>
      <textarea id="todo_details"></textarea>
    </div>
    <div class="form_item">
      <input id="todo_create" type="button" value="To Do登録">
    </div>
  </form>
  <h2>現在のTo Do</h2>
  <p id="output"></p>
 </body>
 </html>
diff --git a/jsbin.IMALUhek.js b/jsbin.IMALUhek.js
 var addToDo = function(event){
  var title = document.getElementById("todo_title");
  var new_todo = {
    title: title.value,
    timestamp: new Date()
  };
  
  var output = document.getElementById("output");
  output.textContent = new_todo.title + 
    " (" + new_todo.timestamp.toLocaleString() + " 登録)";
 };

 var btn = document.getElementById("todo_create");
 btn.onclick = addToDo;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<h2>新しいTo Do</h2>
	<form>
	<div class="form_item">
	<label for="todo_title">件名</label>
	<input id="todo_title" type="text" placeholder="To Doのタイトル">
	</div>
	<div class="form_item">
	<label for="todo_details">詳細</label>
	<textarea id="todo_details"></textarea>
	</div>
	<div class="form_item">
	<input id="todo_create" type="button" value="To Do登録">
	</div>
	</form>
	<h2>現在のTo Do</h2>
	<p id="output"></p>
	</body>
	</html>
	var addToDo = function(event){
	var title = document.getElementById("todo_title");
	var new_todo = {
	title: title.value,
	timestamp: new Date()
	};

	var output = document.getElementById("output");
	output.textContent = new_todo.title +
	" (" + new_todo.timestamp.toLocaleString() + " 登録)";
	};

	var btn = document.getElementById("todo_create");
	btn.onclick = addToDo;