Ndtyjky

i would like to use a js query code that I found on codepen in my vue project, but im not sure How to integrate it .
I simply pasted the file in my created() of my vue component but it doesn seem to work out.. the code is supposing to run a visual animation when typing chinese caractere in the input form.
this is the codepen : https://codepen.io/simeydotme/pen/CFcke

var $input = $('input');

 $input.on({



"focus": function(e) {

$(".input-container").addClass("active");

},



"blur": function(e) {

  $(".input-container").removeClass("active");

}



});



var previous = null;

setInterval( function() {

if( previous !== $input.val()

|| "" === $input.val()) {

getGoodCharacters( $input );

previous = $input.val();

 }

  }, 500);







function getGoodCharacters( $this ) {



var output = $this.val().trim();

var letters = output.split("");

var url = "https://service.goodcharacters.com/images/han/$$$.gif";



 $(".error-container, .help").removeClass("show");

 $(".output-container").empty();



 for( letter in letters ) {



var img = letters[letter] + "";

var newurl = url.replace("$$$",img);

loadCharacter( newurl , img );



 }



}



  function loadCharacter( url , letter ) {



 var img = new Image();

  var $output = $(".output-container");

 var $a = $("<a/>");

  var l = $("input").val().length;



  var cwidth = "120px";

 if( l > 7 ) { cwidth = "70px"; }

 else if( l > 6 ) { cwidth = "90px"; }

 else if( l > 5 ) { cwidth = "100px"; }



 $(img).load(function(){

  $a.attr({

   "href": url,

   "title": "Good Character Chinese Symbol: "+ letter + ""

  }).css("width", cwidth ).append( $(this) ).appendTo($output);

   $(".help").addClass("show");

}).attr({

  src: url

   }).error(function(){

   $(".error-container").addClass("show");

   });



  }





var $try = $(".tryme a").on("click", function(e) {



 e.preventDefault();

 $input.val( $(this).text() );



 });

I also imported the jquery module in my componant

import $ from "jquery";

here is the html that i added in the template

 <div class="container input-container">



  <input type="text" id="input" placeholder="中文" value="中文"/>



</div>

Thanks!