JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class ="Row">
    <div class="Box2">
      <form name=keyboard>
        <div>
        <input type="button" onclick='onclick'   id="Q" value="Q">
        <input type="button" value="W">
        <input type="button" value="E">
        <input type="button" value="R">
        <input type="button" value="T">
        <input type="button" value="Y">
        <input type="button" value="U">
        <input type="button" value="I">
        <input type="button" value="O">
        <input type="button" value="P">
        </div>
        <div>
        <input type="button" value="A">
        <input type="button" value="S">
        <input type="button" value="D">
        <input type="button" value="F">
        <input type="button" value="G">
        <input type="button" value="H">
        <input type="button" value="J">
        <input type="button" value="K">
        <input type="button" value="L">
        </div>
        <div>
        <input type="button" value="Z">
        <input type="button" value="X">
        <input type="button" value="C">
        <input type="button" value="V">
        <input type="button" value="B">
        <input type="button" value="N">
        <input type="button" value="M">
        </div>
        <div>
        <input type="button" value="SPACE" >
        <input type="button" value="ENTER">
        </div> 
      </form>
      <textarea id="output" maxlength="2"></textarea>
    </div>
  </div>

JavaScript

jQuery('form[name="keyboard"]  input[type="button"]').click(function(){
  
  var inpVal = jQuery(this).val();
  
  if( inpVal == "SPACE" ){
    inpVal = ' '; 
  }else if( inpVal == "ENTER" ){
    inpVal = '\n'; 
  }

  var val = jQuery('#output').val() + inpVal;
  
  
  jQuery('#output').val(val);

});