<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Penerjemah Bahasa Gaul-Indonesia</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
</head>
<style type="text/css">
	
	.shadow-textarea textarea.form-control::placeholder {
    font-weight: 300;
}
.shadow-textarea textarea.form-control {
    padding-left: 0.8rem;
    background-color:#FFF !important;
}

textarea {
 	width: 200px;
  	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h1{
	text-align: center;
}

.container {
	padding-top: 50px;
}

.textarea1 .textarea2 {
	 font-family: sans-serif;
}

</style>

<script>

function myFunction() {
$("#result").val('');
var text= $('#text').val();
  $.ajax({
              url: "/trans",
              type: "POST",
              data: {text:text}

          }).done(function(response) {

            response =response.result;
                 $.each(response,function(key,val){
                 console.log(val);
                    var md = $('#result')
  					md.val(md.val() + val)

                });
            });
};

  </script>
<body>
	<div class="container">
        <h1>Penerjemah Bahasa Tidak Baku</h1>

        <div class="container">
  			<div class="row">
    			<div class="col">
      				<div class="form-group ">
  						<label for="textarea1">Tidak Baku</label>
 							<textarea class="form-control z-depth-1" id="text" rows="3"></textarea>
					</div>
    			</div>
    			<div class="col">
      				<div class="form-group shadow-textarea">
  						<label for="textarea2">Baku</label>
 							<textarea class="form-control z-depth-1" id="result" rows="3" placeholder="Terjemahan"></textarea>
					</div>
    			</div>
  			</div>
  			<button class="btn btn-primary" style="margin-top: 5px;" id="clicked" onclick="myFunction()">Submit</button>
  		</div>
    		

  	</div>
    <div class="show-data" >

    </div>
</body>
</html>