bb

by Tom M

HTML

<div class='table'>

</div>
<div id='parameters'>
<span class='param'>Angle:</span><input id='angle' type='text'>
<span class='param'>Power:</span><input id='power' type='text'>
<button class='param'>Pot me</button>
</div>

CSS

* {
  box-sizing: border-box;
}

.table {
  height: 500px;
  border: 1px solid black;
}

#parameters, .table {
    margin: 0 auto;
  width: 300px;
}

JavaScript

let button = document.querySelector('button');
let table = document.querySelector('.table');
let tableWidth = table.offsetWidth;
let tableHeight = table.offsetHeight;

window.addEventListener('resize', function() {
  let windowWidth = window.innerWidth;
  let windowHeight = window.innerHeight;
})

function styleConverter(pxString) {
	let toConvert = pxString ;
	let regex = /px/;	
  toConvert = toConvert.replace(regex, '');
  return Number(toConvert);
}


function createBall(color, id, ballWidth, ballHeight) {
  let newBall = document.createElement('div');
  newBall.style.width = ballWidth;
  newBall.style.height = ballHeight;
  newBall.style.borderRadius = '50%';
  newBall.style.backgroundColor = color;
  newBall.setAttribute('class', 'ball');
  newBall.setAttribute('id', id);
  newBall.style.position = 'relative';
  newBall.style.left = '135px';
  newBall.style.top = '400px';
  table.appendChild(newBall);
}

createBall('red', 'first', '30px', '30px');

let first = document.getElementById('first');




function angleToPx(val) {
	let initialLeftVal = styleConverter(first.style.left);
	let bWidth = styleConverter(first.style.width);
  const degreeToPx = (tableWidth/2 - bWidth/2)/90;
  let newLeftVal = initialLeftVal + (val* degreeToPx);
  return newLeftVal;
}



button.addEventListener('click',function() {
	let angleNum = angle.value;
	angleNum = angleToPx(angleNum);
	first.style.left = angleNum + "px";
 })