JSFiddle - React, Tailwind, and code Playground

by Arif Reza

HTML

<div class="line"><div class="ball"></div></div>
Velocity: <span class="v"></span> unit/s<br />
Acceleration: <span class="a"></span> unit/s
<div class="bidro"><b>&#2476;&#2495;&#2435;&#2470;&#2509;&#2480;&#2435;</b>&#2453;&#2467;&#2494;&#2463;&#2495;&#2480;
&#2476;&#2503;&#2455;&#2503;&#2480;
&#2476;&#2495;&#2477;&#2495;&#2472;&#2509;&#2472;
&#2437;&#2476;&#2488;&#2509;&#2469;&#2494;&#2480;
&#2453;&#2509;&#2487;&#2503;&#2468;&#2509;&#2480;&#2503; (&#2488;&#2480;&#2467;,
&#2476;&#2503;&#2455;, &#2468;&#2509;&#2476;&#2480;&#2467;)
&#2441;&#2474;&#2480; &#2469;&#2503;&#2453;&#2503;
&#2472;&#2495;&#2458;&#2503;&#2480; &#2470;&#2495;&#2453;&#2453;&#2503;
&#2471;&#2472;&#2494;&#2468;&#2509;&#2476;&#2453; &#2470;&#2495;&#2453;
&#2489;&#2495;&#2488;&#2503;&#2476;&#2503;
&#2476;&#2495;&#2476;&#2503;&#2458;&#2472;&#2494; &#2453;&#2480;&#2494;
&#2489;&#2527;&#2503;&#2459;&#2503; &#2404; &#2475;&#2482;&#2503;
&#2477;&#2503;&#2453;&#2509;&#2463;&#2480;
&#2437;&#2472;&#2497;&#2479;&#2494;&#2527;&#2496;, &#2472;&#2495;&#2458;
&#2469;&#2503;&#2453;&#2503; &#2441;&#2474;&#2480;&#2503;&#2480; &#2488;&#2476;
&#2488;&#2480;&#2467;, &#2476;&#2503;&#2455; &#2447;&#2476;&#2434;
&#2471;&#2472;&#2494;&#2468;&#2509;&#2476;&#2453;
&#2468;&#2509;&#2476;&#2480;&#2467;&#2453;&#2503; (&#2476;&#2503;&#2455;
&#2476;&#2499;&#2470;&#2509;&#2471;&#2495;)
&#2443;&#2467;&#2494;&#2468;&#2509;&#2476;&#2453;
&#2489;&#2495;&#2488;&#2503;&#2476;&#2503; &#2470;&#2503;&#2454;&#2494;
&#2479;&#2494;&#2476;&#2503; &#2404;
&#2437;&#2474;&#2480;&#2470;&#2495;&#2453;&#2503; &#2441;&#2474;&#2480;
&#2469;&#2503;&#2453;&#2503; &#2472;&#2495;&#2458;&#2503;&#2480;
&#2470;&#2495;&#2453;&#2503; &#2488;&#2476; &#2488;&#2480;&#2467;,
&#2476;&#2503;&#2455; &#2447;&#2476;&#2434;
&#2471;&#2472;&#2494;&#2468;&#2509;&#2476;&#2453; &#2468;&#2509;&#2476;&#2480;&#2467;&#2453;&#2503;
&#2471;&#2472;&#2494;&#2468;&#2509;&#2476;&#2453; &#2470;&#2503;&#2454;&#2494;
&#2479;&#2494;&#2476;&#2503; &#2404;<br /><br...

CSS

.ball {width:20px;height:20px;position:absolute;left:50px;top:-10px;background:red;border-radius:10px;}
.line {width:120px;height:2px;position:absolute;left:20px;top:210px;background:black;}
.line:before {content:"X'";position:absolute;left:-15px;top:-10px;}
.line:after {content:"X";position:absolute;left:120px;top:-10px;}
.bidro {width:100%; max-width: 600px;margin-top: 300px;font-size: 15px;}

JavaScript

var ball=$(".ball"),
t	=0,
a	=100,
Wd	=10,
speed=10,
Wr	=(Math.PI*Wd)/180, W=Wr;

function run(){
	t+=speed/100;
	WT=W*t;
	y=a * Math.sin(WT);
	v=a*W*Math.cos(WT);
	A=-(W*W*y);
	$(".v").text(Math.round(v));
	$(".a").text(Math.round(A));
	topNew=y-10;
	ball.animate({top:topNew},10,"linear",function(){run();});
}
run();