parseInt, Math.PI, Math.abs, Math.pow

by mspears

HTML

<h3>
Week #2
</h3>
<div id="myCircle">
</div>
 
<div>The area is: <span  id="areaDiv"></span></div>

CSS

/*  CSS file for circle area exercise */

#myCircle {
    width:  0;
    height: 0;
    border-radius: 50%;
    background-color: magenta;
    margin: 1rem;
}

JavaScript

console.clear();

var circle = document.getElementById("myCircle");
var areaDiv = document.getElementById("areaDiv");

var size  = prompt("Please enter the desired diameter: ");

var color_value = prompt("Please enter a color for the circle: ");
   
size = parseInt(size);

size = Math.abs(size);
        
console.log("typeof size is ", typeof size);

console.log("typeof size + px is ", typeof (size+"px"));

//set the size of the circle
circle.style.width = size+'px';
circle.style.height = size+'px';
circle.style.backgroundColor = color_value;
        
console.log("pi: ", Math.PI, " and it's a ", typeof Math.PI);

var pi_constant = Math.PI.toFixed(2);

console.log("pi: ", pi_constant); 
console.log("type of pi: ", typeof pi_constant);

//calculate the area of the circle
// var r = size / 2;
// circle_area = 3.14 * r^2

var area = Math.PI * Math.pow((size/2), 2);
// var area = pi_constant * Math.pow((size/2), 2);


area = parseInt(area);

areaDiv.innerHTML = area;

console.log("Area of the circle with diameter of ", size, " is ", area);