if-else conditional, isNaN

by mspears

HTML

<h2>Week #3</h2>
<div id="myCircle"></div>
<div>The area is: <span  id="areaSpan"></span></div>

CSS

div#myCircle {
  background-color: magenta;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  margin-left: 1rem;
}

JavaScript

console.clear();

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

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

console.log('size ', size);
console.log('type of size is ', typeof size);

size = parseInt(size);

if ( isNaN(size) ) {
  console.log("Invalid input");
  console.log("size (invalid input): ", size);  
  areaSpan.style.color = "red";
  areaSpan.innerHTML = "Invalid diameter value"; 
}
else {
  console.log('after parseInt, type of size is ', typeof size);

  size = Math.abs(size);

  circle.style.width  = size + 'px';
  circle.style.height = size + 'px';
  circle.style.backgroundColor = color_value;

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

  // var area = Math.round(Math.PI * Math.pow( (size/2), 2));
  
  areaSpan.innerHTML = area;

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