Myujth

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() , 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!