JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>
    

<input type="text" id="speech"  name="speech" >
<div id="box"></div> 
<button>smaz</button>

<p class="priklad">22 + 17</p>
<p id="slovo"></p>    
</body>

CSS

body {
    margin: 0;
}
#box{
    width:80px;
    height:50px;
    border:1px solid blue;
}
.priklad{
    position:absolute;
    top:150px;
    left:10px;
    padding:0;
    margin:0;
    
    line-height:50px;
    text-align:center;
    font-size:18px;
}

JavaScript

$(document).ready(function(){
  

    function move (){
         
        setInterval(function(){
            var vzdalenost=500;
            var speed = 3000; // pozor urcuje se tim i setInterval!
            var n1 = Math.floor((Math.random() * 100) + 1);
            var n2 = Math.floor((Math.random() * 100) + 1);
            var nahoda = n1+" + "+n2;
            $( ".priklad" ).animate({ "left": "+="+vzdalenost+"px" }, speed, "linear");
            $( ".priklad" ).animate({ "left": "-="+vzdalenost+"px" }, speed, "linear"); 
            $( ".priklad" ).text(nahoda);
        }, 3000);
        
    }
    move();
    /*
    $("button").click(function(){
        $( ".priklad" ).remove();
    });      
    */      

    
  if ('webkitSpeechRecognition' in window) {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
   recognition.onstart = function( e ) {
      console.log( e );
  };
  var final_transcript = '';
  recognition.onresult = function( event ) {
    var final_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
         
      } 
    }
     $("#slovo").replaceWith('<p id="slovo">' + final_transcript + '</p>');
    //document.getElementById( 'speech' ).value = final_transcript;
      
  };
  recognition.start();
} 
    
});