Angles

by Felipe Alfaro

HTML

<div class="circle">
  <img src="https://e7.pngegg.com/pngimages/933/218/png-clipart-degree-chart-protractor-circle-angle-circle-angle-measurement-thumbnail.png" alt="">
  <div id="area">
    <div id="point"></div>
  </div>
</div>

CSS

.circle {
  display: block;
  width: 400px;
  height: 400px;
  position: relative;
  border: 0;
  margin: 100px 0 0 0;
  padding: 0;
}

.circle img {
  display: block;
  width: 400px;
  height: 400px;
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
}

#area {
  display: block;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: 0;
  margin: 0;
  padding: 0;
}

#point {
    display: block;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  position: absolute;
  background: green;
  border: 0;
  margin: 0;
  padding: 0;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
	const areaElement = document.getElementById('area');
    const pointElement = document.getElementById('point');
    const diameter = areaElement.offsetWidth * 2;
    const maxRadius = diameter / 2;
  
    setPoint(getCoordinates(150, 270))
    
    function getCoordinates(radio, angleDegrees) {
        const angleRadians = Math.PI * (angleDegrees / 180);
    	const result = {
        	x: radio * Math.sin(angleRadians),
            y: radio * Math.cos(angleRadians)
        };
    	return result;
    }
    

    
    function setPoint(coordinates) {
        pointElement.style.left = (coordinates.x) + 'px';
    	pointElement.style.top = (maxRadius - coordinates.y) + 'px';
    }
    
    
});

    function getSides(h, angle) {
    	const result = {
        	co: h * Math.sin(Math.PI * (angle / 180)),
            ca: h * Math.cos(Math.PI * (angle / 180))
        };
    	return result;
    }
    
    console.log(getSides(20, 30))