JSFiddle - React, Tailwind, and code Playground

by Celena Tang

HTML

<textarea type='text' id='myinput'>
   
    
</textarea>
    
<div><span id="fade"></span></div>

CSS

#myinput {
    float:left;
    height:350px;
    width:200px;
    color:grey;
    
}
#fade{
    float:left;
   height:350px;
    width:100px;
    color:black;
}

JavaScript

$( "#myinput" ).keyup(function( event ) {       

        var text = $("#myinput").val();
        console.log("event working");
        console.log(text);
    
        $("#fade").text(this.value);
        var fade = $("#myinput").val();
       
    
 function cleartext(){
      document.getElementById("#fade").value="";  
 }
    
        
   if (fade.length >=15) {
       $("#fade").fadeOut(200);
       cleartext();
          
   }
    
    
  if (fade.length <=15) {
          $("#fade").fadeIn("slow");
  }



});