JSFiddle - React, Tailwind, and code Playground

by codingfreaks

HTML

<p>Angle in Degrees:</p>
<input id="angle" type="number" />
<p>Distance:</p>
<input id="distance" type="number" />
<p>X-Position:</p>
<input id="x-pos" type="number" value="0" />
<p>Y-Position:</p>
<input id="y-pos" type="number" value="0" />

<p></p>
<input type="button" onClick="onCalcClick()" value="Get vector"  />
<p>Vektor:</p>
<p id="result"></p>

JavaScript

function round(number, places) {
  return +(Math.round(number + "e+" + places)  + "e-" + places);
}

function getRelativeVector(angle, length, xOffset, yOffset) {
    angle = angle * Math.PI / 180; 
    return { 
    	X:length * Math.sin(angle) + xOffset, 
      Y:length * Math.cos(angle) + yOffset 
    };
}

function onCalcClick() {
  const angleVal = document.getElementById('angle').value;
  const distVal = document.getElementById('distance').value;
  const xVal = document.getElementById('x-pos').value;
  const yVal = document.getElementById('y-pos').value;
  const result = getRelativeVector(angleVal, distVal, xVal, yVal);
  document.getElementById('result').innerHTML = `X = ${round(result.X, 5)} <br /> Y=${round(result.Y, 5)}`;  
}