<html> <body> <p>Choose Area To Compute:</p> <div style="border:1px solid black;
width:300px; padding:10px;"> <p> <input type="radio" name="shape" id="rectangle"
value="rectangle"> Rectangle <br> <input type="radio" name="shape" id="triangle"
value="triangle"> Triangle </p> <p> <button id="btnProceed">Proceed</button> <button
id="btnClearSelection" disabled>Clear Selection</button> </p> </div> <div id="divRectangle"
style="border:1px solid black; width:300px; padding:10px; display:none;"> <p>Length
<input id="inputLength"/></p> <p>Width <input id="inputWidth"/></p>
<p>Area <input id="outputAreaRect" disabled/></p> <p> <button
id="btnCompAreaRect">Compute Area</button> <button id="btnClearFields1">Clear
Fields</button> </p> </div> <div id="divTriangle" style="border:1px solid black; width:300px;
padding:10px; display:none;"> <p>Height <input id="inputHeight"/></p> <p>Base
<input id="inputBase"/></p> <p>Area <input
id="outputAreaTri" disabled/></p> <p> <button id="btnCompAreaTri">Compute Area</button>
<button id="btnClearFields2">Clear Fields</button> </p> </div> <script> let shapeRadios =
document.getElementsByName("shape"); let btnProceed =
document.getElementById("btnProceed"); let btnClearSelection =
document.getElementById("btnClearSelection"); btnProceed.addEventListener("click",
function() { let selectedShape = document.querySelector('input[name="shape"]:checked'); if (!
selectedShape) { alert("You cannot proceed without picking a choice."); return; } selectedShape
= selectedShape.value; if (selectedShape === "rectangle")
{ document.getElementById("divRectangle").style.display = "block";
document.getElementById("divTriangle").style.display = "none"; } else if (selectedShape ===
"triangle") { document.getElementById("divTriangle").style.display = "block";
document.getElementById("divRectangle").style.display = "none"; }
btnClearSelection.removeAttribute("disabled"); }); btnClearSelection.addEventListener("click",
function() { shapeRadios.forEach(radio => radio.checked = false);
btnClearSelection.setAttribute("disabled", "true");
document.getElementById("divRectangle").style.display = "none";
document.getElementById("divTriangle").style.display = "none"; });
document.getElementById("btnCompAreaRect").addEventListener("click", function(){ let length
= parseFloat(document.getElementById("inputLength").value); let width =
parseFloat(document.getElementById("inputWidth").value); if (isNaN(length) || isNaN(width)) {
alert("Fields cannot be empty"); return; } document.getElementById("outputAreaRect").value =
length * width; }); document.getElementById("btnClearFields1").addEventListener("click",
function(){ document.getElementById("inputLength").value = "";
document.getElementById("inputWidth").value = "";
document.getElementById("outputAreaRect").value = ""; });
document.getElementById("btnCompAreaTri").addEventListener("click", function(){ let height =
parseFloat(document.getElementById("inputHeight").value); let base =
parseFloat(document.getElementById("inputBase").value); if (isNaN(height) || isNaN(base))
{ alert("Fields cannot be empty"); return; } document.getElementById("outputAreaTri").value =
(base * height) / 2; }); document.getElementById("btnClearFields2").addEventListener("click",
function(){ document.getElementById("inputHeight").value = "";
document.getElementById("inputBase").value = "";
document.getElementById("outputAreaTri").value = ""; }); </script> </body> </html>
