JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<input type="button" onclick="checkMode()" value="Calculate"></input>
<label>Circle<input id="circleMode" type="radio" name="mode" checked></input></label>
<label>Rectangle<input type="radio" name="mode"></input></label>
<textarea id="out"></textarea>

CSS

#out{
    height:150px;
    width:300px;
}

JavaScript

function checkMode(){
    var modeButton = document.getElementById("circleMode");
    if(modeButton.checked){
        calcCircle();
}
    else{
        calcRect();
    }
}
function calcCircle(){
    var radius = prompt("Enter radius:"); 
    var diameter = radius*2;
    var area = Math.PI * (radius*radius);
    var circumfrence = Math.PI * diameter;
    
    var out = document.getElementById("out");
    
    out.value = "Diameter = " + diameter + "\nArea = " + area + "\nCircumfrence = " + circumfrence;
}

function calcRect(){
    var width = prompt("Enter width:"); 
    var height = prompt("Enter width:"); 
    var area = width*height;
    var peri = (height*2) + (width*2);
    
    var out = document.getElementById("out");
    
    out.value = "Area = " + area + "\nPerimeter = " + peri;
}