PCianes/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Writing JavaScript in the Browser">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="style.css" media="screen">
  <title>JavaScript for WordPress</title>
<style id="jsbin-css">
form {
  background: #fff;
  border: 1px #444 solid;
  padding: 10px;
}

label {
  font-family: 'Helvetica Neue';
  font-size: 1.6rem;
  font-weight: lighter;
}

#title,
#content {
  width: 80%;
  border: 1px #ccc solid;
  padding: 5px;
}

#title {
  font-size: 1.2rem
}

#content {
  font-size: 1rem;
  min-height: 4rem;
}
</style>
</head>
<body>
  <h2>Add Post</h2>
  <form>
    <p>
    <label for="title">Title</label>
    </p>
    <input type="text" id="title" name="title">
    <p>
    <label for="content">Content</label>
    </p>
    <p>
      <textarea id="content" name="content"></textarea>
    </p>
    <input class="btn" type="Submit" value="Publish">
  </form>
  <script src="javascript.js"></script>
<script id="jsbin-javascript">
var form = document.querySelector( 'form' );

form.addEventListener( 'submit', displayPost );

function displayPost( event ) {

  var title = document.querySelector( '#title' ).value,
      content = document.querySelector( '#content' ).value;

  console.log( title );
  console.log( content );

  event.preventDefault();

}
</script>


<script id="jsbin-source-css" type="text/css">form {
  background: #fff;
  border: 1px #444 solid;
  padding: 10px;
}

label {
  font-family: 'Helvetica Neue';
  font-size: 1.6rem;
  font-weight: lighter;
}

#title,
#content {
  width: 80%;
  border: 1px #ccc solid;
  padding: 5px;
}

#title {
  font-size: 1.2rem
}

#content {
  font-size: 1rem;
  min-height: 4rem;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var form = document.querySelector( 'form' );

form.addEventListener( 'submit', displayPost );

function displayPost( event ) {

  var title = document.querySelector( '#title' ).value,
      content = document.querySelector( '#content' ).value;

  console.log( title );
  console.log( content );

  event.preventDefault();

}</script></body>
</html>

## jsbin.jedukem.css
form {
  background: #fff;
  border: 1px #444 solid;
  padding: 10px;
}

label {
  font-family: 'Helvetica Neue';
  font-size: 1.6rem;
  font-weight: lighter;
}

#title,
#content {
  width: 80%;
  border: 1px #ccc solid;
  padding: 5px;
}

#title {
  font-size: 1.2rem
}

#content {
  font-size: 1rem;
  min-height: 4rem;
}

## jsbin.jedukem.js
var form = document.querySelector( 'form' );

form.addEventListener( 'submit', displayPost );

function displayPost( event ) {

  var title = document.querySelector( '#title' ).value,
      content = document.querySelector( '#content' ).value;

  console.log( title );
  console.log( content );

  event.preventDefault();

}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Writing JavaScript in the Browser">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="style.css" media="screen">
	<title>JavaScript for WordPress</title>
	<style id="jsbin-css">
	form {
	background: #fff;
	border: 1px #444 solid;
	padding: 10px;
	}

	label {
	font-family: 'Helvetica Neue';
	font-size: 1.6rem;
	font-weight: lighter;
	}

	#title,
	#content {
	width: 80%;
	border: 1px #ccc solid;
	padding: 5px;
	}

	#title {
	font-size: 1.2rem
	}

	#content {
	font-size: 1rem;
	min-height: 4rem;
	}
	</style>
	</head>
	<body>
	<h2>Add Post</h2>
	<form>
	<p>
	<label for="title">Title</label>
	</p>
	<input type="text" id="title" name="title">
	<p>
	<label for="content">Content</label>
	</p>
	<p>
	<textarea id="content" name="content"></textarea>
	</p>
	<input class="btn" type="Submit" value="Publish">
	</form>
	<script src="javascript.js"></script>
	<script id="jsbin-javascript">
	var form = document.querySelector( 'form' );

	form.addEventListener( 'submit', displayPost );

	function displayPost( event ) {

	var title = document.querySelector( '#title' ).value,
	content = document.querySelector( '#content' ).value;

	console.log( title );
	console.log( content );

	event.preventDefault();

	}
	</script>


	<script id="jsbin-source-css" type="text/css">form {
	background: #fff;
	border: 1px #444 solid;
	padding: 10px;
	}

	label {
	font-family: 'Helvetica Neue';
	font-size: 1.6rem;
	font-weight: lighter;
	}

	#title,
	#content {
	width: 80%;
	border: 1px #ccc solid;
	padding: 5px;
	}

	#title {
	font-size: 1.2rem
	}

	#content {
	font-size: 1rem;
	min-height: 4rem;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var form = document.querySelector( 'form' );

	form.addEventListener( 'submit', displayPost );

	function displayPost( event ) {

	var title = document.querySelector( '#title' ).value,
	content = document.querySelector( '#content' ).value;

	console.log( title );
	console.log( content );

	event.preventDefault();

	}</script></body>
	</html>