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
Lateral Surface Area: 0.00
Lateral Surface Area Calculator Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volume Calculator</title>
<script>
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>
<div style="background:lightblue;padding:10px;text-align:center;">
<h2>Lateral Surface Area Calculator</h2>
<label for="shape">Select a shape:</label>
<select id="shape" onchange="showFields()">
<option value="select">Select</option>
<option value="sphere">Sphere</option>
<option value="cylinder">Cylinder</option>
<option value="cone">Cone</option>
<option value="cube">Cube</option>
<option value="cuboid">Cuboid</option>
<option value="hsphere">Hemi Sphere</option>
</select>
<br><br>
<div id="inputFields"></div>
<br>
<button id ="calc-vol" onclick="calculateVolume()">Calculate</button>
<br><br>
<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.
Post a Comment
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"