How to create Lateral surface area Calculator using HTML and JavaScript

An HTML code for a lateral surface area calculator typically includes a form with input fields for dimensions like height and radius (for a cylinder, for example). The code uses JavaScript to calculate the lateral surface area based on the input values. Once the user enters the required dimensions and submits the form, the result is displayed dynamically without reloading the page. The HTML structure consists of form elements, labels, inputs, and a button, while JavaScript handles the calculation logic. Styling can be added with CSS for better presentation.

See the preview

Lateral Surface Area Calculator

Select a shape:

Lateral Surface Area: 0.00

Lateral Surface Area Calculator Source Code

<!DOCTYPE html>

<head>

<title>Volume Calculator</title>

function showFields() {

var shape = document.getElementById("shape").value;

var inputFields = document.getElementById("inputFields");

var fieldsHTML = "";

//Case when any of the shape is selected for area calculation

switch (shape) {

case "sphere":

fieldsHTML = "<label for='radius'>Radius:</label><input type='number' id='radius'>";

break;

case "cylinder":

fieldsHTML = "<label for='radiusCylinder'>Radius:</label><input type='number' id='radiusCylinder'>" +

"<br><label for='heightCylinder'>Height:</label><input type='number' id='heightCylinder'>";

break;

case "cone":

fieldsHTML = "<label for='radiusCone'>Radius:</label><input type='number' id='radiusCone'>" +

"<br><label for='heightCone'>Height:</label><input type='number' id='heightCone'>";

break;

case "cube":

fieldsHTML = "<label for='sideCube'>Side length:</label><input type='number' id='sideCube'>";

break;

case "cuboid":

fieldsHTML = "<label for='lengthCuboid'>Length:</label><input type='number' id='lengthCuboid'>" +

"<br><label for='widthCuboid'>Width:</label><input type='number' id='widthCuboid'>" +

"<br><label for='heightCuboid'>Height:</label><input type='number' id='heightCuboid'>";

break;

case "hsphere":

fieldsHTML = "<label for='radius'>Radius:</label><input type='number' id='radius'>";

break;

default:

fieldsHTML = "";

}

inputFields.innerHTML = fieldsHTML;

}

function calculateVolume() {

var shape = document.getElementById("shape").value;

var result = document.getElementById("result");

var output;

switch (shape) {

case "sphere":

var radius = parseFloat(document.getElementById("radius").value);

output = 4 * Math.PI * Math.pow(radius, 2);

break;

case "cylinder":

var radiusCylinder = parseFloat(document.getElementById("radiusCylinder").value);

var heightCylinder = parseFloat(document.getElementById("heightCylinder").value);

output = 2 * Math.PI * Math.pow(radiusCylinder, 1) * heightCylinder;

break;

case "cone":

var radiusCone = parseFloat(document.getElementById("radiusCone").value);

var heightCone = parseFloat(document.getElementById("heightCone").value);

output = Math.PI * Math.pow(radiusCone, 1) * heightCone;

break;

case "cube":

var sideCube = parseFloat(document.getElementById("sideCube").value);

output = 4 * Math.pow(sideCube, 2);

break;

case "cuboid":

var lengthCuboid = parseFloat(document.getElementById("lengthCuboid").value);

var widthCuboid = parseFloat(document.getElementById("widthCuboid").value);

var heightCuboid = parseFloat(document.getElementById("heightCuboid").value);

output = 2 * heightCuboid * (lengthCuboid + widthCuboid) ;

break;

case "hsphere":

var radius = parseFloat(document.getElementById("radius").value);

output = 2 * Math.PI * Math.pow(radius, 2);

break;

default:

output = "Invalid selection";

}

result.textContent = "Lateral Surface Area: " + output.toFixed(2);

}

</script>

<style>

label{

}

input[type=number]{

margin:5px;

text-align:center;

border:2px solid blue;

font-size:18px;

border-radius:6px;

display:inlinebblock;

}

#shape {

display:block;

border:2px solid red;

font-size:18px;

border-radius:6px;

margin:10px auto;

width:70%;

text-align:center;

padding:4px;

}

#calc-vol{

margin:10px auto;

width:70%;

font-size:18px;

color:#fff;

background:red;

font-weight:800;

border:1px solid red;

border-radius:8px;

padding:5px;

}

</style>

</head>

<body>

<h2>Lateral Surface Area Calculator</h2>

<label for="shape">Select a shape:</label>

<option value="select">Select</option>

<option value="sphere">Sphere</option>

<option value="cylinder">Cylinder</option>

<option value="cuboid">Cuboid</option>

<option value="hsphere">Hemi Sphere</option>

</select>

<br>

<button id ="calc-vol" onclick="calculateVolume()">Calculate</button>

<div id="result">Lateral Surface Area: 0.00</div>

</div>

</body>

</html>

Conclusion

Creating a lateral surface area calculator with HTML and JavaScript provides a practical and interactive way for users to compute surface areas directly on a webpage. It demonstrates how basic web technologies can be combined to create functional tools that enhance the user experience. The simplicity of HTML for structure, JavaScript for logic, and CSS for styling makes it an effective solution for educational or practical purposes.