Volume Calculator
Volume: 0.00
HTML Code for Volume and Surface Area Calculator for 3D Regular Shapes
Hello! The post volume calculator source code enables you to find the best code example of how can a Volume of 3 D shapes calculator be created using HTML, CSS and JavaScript.
In this post, I’m sharing an easy-to-use HTML code that allows you to calculate the volume of various 3D regular shapes. Whether you're working with cubes, spheres, cylinders, cones, or other common shapes, this calculator simplifies the process with a user-friendly interface. You just need to enter the dimensions, and the calculator will instantly provide you with the accurate volume and surface area.
This tool is perfect for students, educators, and anyone interested in geometry, offering a practical solution for quick calculations without needing a separate app or manual formulas. Explore how you can integrate this tool into your own website or educational resources!
Volume 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 = "";
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;
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 / 3) * Math.PI * Math.pow(radius, 3);
break;
case "cylinder":
var radiusCylinder = parseFloat(document.getElementById("radiusCylinder").value);
var heightCylinder = parseFloat(document.getElementById("heightCylinder").value);
output = Math.PI * Math.pow(radiusCylinder, 2) * heightCylinder;
break;
case "cone":
var radiusCone = parseFloat(document.getElementById("radiusCone").value);
var heightCone = parseFloat(document.getElementById("heightCone").value);
output = (1 / 3) * Math.PI * Math.pow(radiusCone, 2) * heightCone;
break;
case "cube":
var sideCube = parseFloat(document.getElementById("sideCube").value);
output = Math.pow(sideCube, 3);
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 = lengthCuboid * widthCuboid * heightCuboid;
break;
default:
output = "Invalid selection";
}
result.textContent = "Volume: " + 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>Volume 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>
</select>
<br><br>
<div id="inputFields"></div>
<br>
<button id ="calc-vol" onclick="calculateVolume()">Calculate</button>
<br><br>
<div id="result">Volume: 0.00</div>
</div>
</body>
</html>
Conclusion:-
This HTML code for a volume calculator makes geometry more accessible and convenient, whether you're studying, teaching, or just exploring mathematical concepts. By embedding this tool into your website or project, you can provide users with a simple yet powerful way to calculate key properties of 3D shapes. Feel free to customize and expand the code to suit your needs. I hope you find this tool as helpful as I do—happy calculating!
0 Comments
"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!"