<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="app">
      name: <input size="10" type="text" v-model="name" >
      iq: <input size="10" type="text" v-model="iq" >
      <textarea v-model="res" ></textarea>
    </div>
    <script src="script.js"></script>
  </body>
</html>




let app = new Vue({
	el: '#app',
	data: {
		url: 'https://lcdp003.enebular.com/new01/',
		res: '',
		name: 'aita',
		iq: '105'
	},
	methods: {
		window: onload = function() {
			app.post();
		},
		post: function() {
			let param = new URLSearchParams();
			param.append("name", app.name);
			param.append("iq", app.iq);
			let xhr = new XMLHttpRequest();
			xhr.open('POST', app.url);
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.onreadystatechange = function() {
      	if (this.readyState == 4 && this.status == 200)
	      {
          app.res = xhr.responseText;
	      }
      }
      xhr.send(param);
		},
	}
})


/* Styles go here */

* {
	padding: 0;
	border: 1;
}
html, body, #app {
	height: 98%;
}
textarea {
	width: 100%;
	height: 100%;
	font-family: "メイリオ", sans-serif;
	font-size: 20px;
}
textarea:focus {
	outline: none;
}