Geometry Calculator
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.loan-calc-container {
max-width: 800px;
margin: 40px auto;
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #004a99;
text-align: center;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 5px;
background-color: #fdfdfd;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #004a99;
}
.input-group input[type="number"],
.input-group select {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
margin-top: 5px;
}
.btn-calculate {
display: block;
width: 100%;
padding: 12px 20px;
background-color: #004a99;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 25px;
}
.btn-calculate:hover {
background-color: #003366;
}
#result {
margin-top: 30px;
padding: 20px;
background-color: #e7f3ff;
border: 1px solid #b3d7ff;
border-radius: 5px;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #004a99;
}
#result span {
color: #28a745;
}
.article-section {
margin-top: 40px;
padding: 25px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.article-section h2 {
color: #004a99;
text-align: left;
margin-bottom: 15px;
}
.article-section p {
margin-bottom: 15px;
}
.article-section ul {
margin-left: 20px;
margin-bottom: 15px;
}
.article-section li {
margin-bottom: 8px;
}
.formula {
font-family: 'Courier New', Courier, monospace;
background-color: #e9ecef;
padding: 10px;
border-radius: 4px;
display: inline-block;
margin: 5px 0;
}
@media (max-width: 600px) {
.loan-calc-container {
padding: 20px;
}
.btn-calculate, #result {
font-size: 1rem;
}
}
Geometry Calculator
Select Shape:
Circle
Rectangle
Triangle
Square
Trapezoid
Parallelogram
Ellipse
Cube
Rectangular Prism
Cylinder
Cone
Sphere
Calculate:
Area
Perimeter
Volume
Surface Area
Calculate
Please select a shape and calculation type.
Understanding Geometry Calculations
Geometry is a branch of mathematics concerned with properties of space such as distance, shape, size, and relative position of figures. This calculator provides tools to compute various properties for common geometric shapes, helping students, engineers, architects, and hobbyists alike.
2D Shapes
Circle: Defined by a radius (distance from center to edge). Calculations involve pi (π ≈ 3.14159 ).
Area: A = πr²
Circumference (Perimeter): C = 2πr
Rectangle: Defined by length and width.
Area: A = length × width
Perimeter: P = 2(length + width)
Square: A special type of rectangle where length equals width (side length).
Area: A = side²
Perimeter: P = 4 × side
Triangle: Defined by base and height for area, and side lengths for perimeter.
Area: A = 0.5 × base × height
Perimeter: P = side1 + side2 + side3
Trapezoid: A quadrilateral with at least one pair of parallel sides (bases).
Area: A = 0.5 × (base1 + base2) × height
Perimeter: P = side1 + side2 + side3 + side4
Parallelogram: A quadrilateral with opposite sides parallel.
Area: A = base × height
Perimeter: P = 2(side1 + side2)
Ellipse: An oval shape defined by two radii (semi-major and semi-minor axes).
Area: A = πab (where 'a' is semi-major axis, 'b' is semi-minor axis)
Circumference (approximate): C ≈ π[ 1.5(a+b) – √(ab) ] or using more complex Ramanujan approximations. This calculator uses a simpler approximation.
3D Shapes
Cube: A 3D shape with six equal square faces. Defined by side length.
Volume: V = side³
Surface Area: SA = 6 × side²
Rectangular Prism: A 3D shape with rectangular faces. Defined by length, width, and height.
Volume: V = length × width × height
Surface Area: SA = 2(lw + lh + wh)
Cylinder: A 3D shape with circular bases. Defined by radius and height.
Volume: V = πr²h
Surface Area: SA = 2πrh + 2πr²
Cone: A 3D shape tapering from a circular base to a point (apex). Defined by radius, height, and slant height.
Volume: V = (1/3)πr²h
Surface Area: SA = πr(r + l) (where l is slant height)
Sphere: A perfectly round 3D object. Defined by radius.
Volume: V = (4/3)πr³
Surface Area: SA = 4πr²
Use Cases:
Construction & Architecture: Calculating material quantities, room dimensions, roof areas.Engineering: Designing components, analyzing structural integrity, fluid dynamics.Education: Learning and teaching geometric principles, solving homework problems.Design: Creating layouts, understanding scale, 3D modeling.Everyday Life: Estimating paint needed for a room, figuring out how much soil for a garden bed.
function updateInputs() {
var shape = document.getElementById("shape").value;
var dynamicInputsDiv = document.getElementById("dynamic-inputs");
var calculationTypeSelect = document.getElementById("calculationType");
var html = ";
// Reset options for calculation type
calculationTypeSelect.innerHTML = 'Area'; // Default to Area
if (shape === "circle" || shape === "ellipse") {
if (shape === "circle") {
html += '
Radius:
';
calculationTypeSelect.innerHTML += 'Circumference';
} else { // Ellipse
html += '
Semi-Major Axis (a):
';
html += '
Semi-Minor Axis (b):
';
calculationTypeSelect.innerHTML += 'Approx. Circumference';
}
calculationTypeSelect.innerHTML += 'Area';
} else if (shape === "rectangle") {
html += '
Length:
';
html += '
Width:
';
calculationTypeSelect.innerHTML += 'Perimeter';
calculationTypeSelect.innerHTML += 'Area';
} else if (shape === "square") {
html += '
Side Length:
';
calculationTypeSelect.innerHTML += 'Perimeter';
calculationTypeSelect.innerHTML += 'Area';
} else if (shape === "triangle") {
html += '
Base:
';
html += '
Height:
';
html += '
Side 1:
';
html += '
Side 2:
';
html += '
Side 3:
';
calculationTypeSelect.innerHTML += 'Perimeter';
calculationTypeSelect.innerHTML += 'Area';
} else if (shape === "trapezoid") {
html += '
Base 1:
';
html += '
Base 2:
';
html += '
Height:
';
html += '
Side 1:
';
html += '
Side 2:
';
html += '
Side 3:
';
html += '
Side 4:
';
calculationTypeSelect.innerHTML += 'Perimeter';
calculationTypeSelect.innerHTML += 'Area';
} else if (shape === "parallelogram") {
html += '
Base:
';
html += '
Height:
';
html += '
Adjacent Side 1:
';
html += '
Adjacent Side 2:
';
calculationTypeSelect.innerHTML += 'Perimeter';
calculationTypeSelect.innerHTML += 'Area';
} else if (shape === "cube") {
html += '
Side Length:
';
calculationTypeSelect.innerHTML += 'Volume';
calculationTypeSelect.innerHTML += 'Surface Area';
} else if (shape === "rectangular_prism") {
html += '
Length:
';
html += '
Width:
';
html += '
Height:
';
calculationTypeSelect.innerHTML += 'Volume';
calculationTypeSelect.innerHTML += 'Surface Area';
} else if (shape === "cylinder") {
html += '
Radius:
';
html += '
Height:
';
calculationTypeSelect.innerHTML += 'Volume';
calculationTypeSelect.innerHTML += 'Surface Area';
} else if (shape === "cone") {
html += '
Radius:
';
html += '
Height:
';
calculationTypeSelect.innerHTML += 'Volume';
calculationTypeSelect.innerHTML += 'Surface Area';
} else if (shape === "sphere") {
html += '
Radius:
';
calculationTypeSelect.innerHTML += 'Volume';
calculationTypeSelect.innerHTML += 'Surface Area';
}
dynamicInputsDiv.innerHTML = html;
}
function calculateGeometry() {
var shape = document.getElementById("shape").value;
var calculationType = document.getElementById("calculationType").value;
var resultDiv = document.getElementById("result");
var result = ";
var pi = Math.PI;
// Helper function to check if a value is a valid number
function isValidNumber(value) {
return !isNaN(parseFloat(value)) && isFinite(value) && parseFloat(value) >= 0;
}
try {
if (shape === "circle") {
var radius = document.getElementById("radius").value;
if (!isValidNumber(radius)) {
resultDiv.innerHTML = "Error: Please enter a valid positive number for radius.";
return;
}
radius = parseFloat(radius);
if (calculationType === "area") {
var area = pi * radius * radius;
result = "Area:
" + area.toFixed(4) + " ";
} else if (calculationType === "perimeter") {
var circumference = 2 * pi * radius;
result = "Circumference:
" + circumference.toFixed(4) + " ";
}
} else if (shape === "ellipse") {
var semiMajorAxis = document.getElementById("semiMajorAxis").value;
var semiMinorAxis = document.getElementById("semiMinorAxis").value;
if (!isValidNumber(semiMajorAxis) || !isValidNumber(semiMinorAxis)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for semi-axes.";
return;
}
semiMajorAxis = parseFloat(semiMajorAxis);
semiMinorAxis = parseFloat(semiMinorAxis);
if (semiMinorAxis > semiMajorAxis) {
resultDiv.innerHTML = "Error: Semi-minor axis cannot be greater than semi-major axis.";
return;
}
if (calculationType === "area") {
var area = pi * semiMajorAxis * semiMinorAxis;
result = "Area:
" + area.toFixed(4) + " ";
} else if (calculationType === "circumference") {
// Ramanujan's first approximation for circumference
var num = Math.pow(semiMajorAxis – semiMinorAxis, 2) / Math.pow(semiMajorAxis + semiMinorAxis, 2);
var circumference = pi * (semiMajorAxis + semiMinorAxis) * (1 + (3 * num) / (10 + Math.sqrt(4 – 3 * num)));
result = "Approx. Circumference:
" + circumference.toFixed(4) + " ";
}
} else if (shape === "rectangle") {
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
if (!isValidNumber(length) || !isValidNumber(width)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for length and width.";
return;
}
length = parseFloat(length);
width = parseFloat(width);
if (calculationType === "area") {
var area = length * width;
result = "Area:
" + area.toFixed(4) + " ";
} else if (calculationType === "perimeter") {
var perimeter = 2 * (length + width);
result = "Perimeter:
" + perimeter.toFixed(4) + " ";
}
} else if (shape === "square") {
var side = document.getElementById("side").value;
if (!isValidNumber(side)) {
resultDiv.innerHTML = "Error: Please enter a valid positive number for side length.";
return;
}
side = parseFloat(side);
if (calculationType === "area") {
var area = side * side;
result = "Area:
" + area.toFixed(4) + " ";
} else if (calculationType === "perimeter") {
var perimeter = 4 * side;
result = "Perimeter:
" + perimeter.toFixed(4) + " ";
}
} else if (shape === "triangle") {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var side1 = document.getElementById("side1").value;
var side2 = document.getElementById("side2").value;
var side3 = document.getElementById("side3").value;
if (calculationType === "area") {
if (!isValidNumber(base) || !isValidNumber(height)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for base and height for area calculation.";
return;
}
base = parseFloat(base);
height = parseFloat(height);
var area = 0.5 * base * height;
result = "Area:
" + area.toFixed(4) + " ";
} else if (calculationType === "perimeter") {
if (!isValidNumber(side1) || !isValidNumber(side2) || !isValidNumber(side3)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for all three sides for perimeter calculation.";
return;
}
side1 = parseFloat(side1);
side2 = parseFloat(side2);
side3 = parseFloat(side3);
var perimeter = side1 + side2 + side3;
result = "Perimeter:
" + perimeter.toFixed(4) + " ";
}
} else if (shape === "trapezoid") {
var trapBase1 = document.getElementById("trapBase1").value;
var trapBase2 = document.getElementById("trapBase2").value;
var trapHeight = document.getElementById("trapHeight").value;
var trapSide1 = document.getElementById("trapSide1").value;
var trapSide2 = document.getElementById("trapSide2").value;
var trapSide3 = document.getElementById("trapSide3").value;
var trapSide4 = document.getElementById("trapSide4").value;
if (calculationType === "area") {
if (!isValidNumber(trapBase1) || !isValidNumber(trapBase2) || !isValidNumber(trapHeight)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for bases and height for area calculation.";
return;
}
trapBase1 = parseFloat(trapBase1);
trapBase2 = parseFloat(trapBase2);
trapHeight = parseFloat(trapHeight);
var area = 0.5 * (trapBase1 + trapBase2) * trapHeight;
result = "Area:
" + area.toFixed(4) + " ";
} else if (calculationType === "perimeter") {
if (!isValidNumber(trapSide1) || !isValidNumber(trapSide2) || !isValidNumber(trapSide3) || !isValidNumber(trapSide4)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for all four sides for perimeter calculation.";
return;
}
trapSide1 = parseFloat(trapSide1);
trapSide2 = parseFloat(trapSide2);
trapSide3 = parseFloat(trapSide3);
trapSide4 = parseFloat(trapSide4);
var perimeter = trapSide1 + trapSide2 + trapSide3 + trapSide4;
result = "Perimeter:
" + perimeter.toFixed(4) + " ";
}
} else if (shape === "parallelogram") {
var paraBase = document.getElementById("paraBase").value;
var paraHeight = document.getElementById("paraHeight").value;
var paraSide1 = document.getElementById("paraSide1").value;
var paraSide2 = document.getElementById("paraSide2").value;
if (calculationType === "area") {
if (!isValidNumber(paraBase) || !isValidNumber(paraHeight)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for base and height for area calculation.";
return;
}
paraBase = parseFloat(paraBase);
paraHeight = parseFloat(paraHeight);
var area = paraBase * paraHeight;
result = "Area:
" + area.toFixed(4) + " ";
} else if (calculationType === "perimeter") {
if (!isValidNumber(paraSide1) || !isValidNumber(paraSide2)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for adjacent sides for perimeter calculation.";
return;
}
paraSide1 = parseFloat(paraSide1);
paraSide2 = parseFloat(paraSide2);
var perimeter = 2 * (paraSide1 + paraSide2);
result = "Perimeter:
" + perimeter.toFixed(4) + " ";
}
} else if (shape === "cube") {
var cubeSide = document.getElementById("cubeSide").value;
if (!isValidNumber(cubeSide)) {
resultDiv.innerHTML = "Error: Please enter a valid positive number for side length.";
return;
}
cubeSide = parseFloat(cubeSide);
if (calculationType === "volume") {
var volume = cubeSide * cubeSide * cubeSide;
result = "Volume:
" + volume.toFixed(4) + " ";
} else if (calculationType === "surface_area") {
var surfaceArea = 6 * cubeSide * cubeSide;
result = "Surface Area:
" + surfaceArea.toFixed(4) + " ";
}
} else if (shape === "rectangular_prism") {
var prismLength = document.getElementById("prismLength").value;
var prismWidth = document.getElementById("prismWidth").value;
var prismHeight = document.getElementById("prismHeight").value;
if (!isValidNumber(prismLength) || !isValidNumber(prismWidth) || !isValidNumber(prismHeight)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for length, width, and height.";
return;
}
prismLength = parseFloat(prismLength);
prismWidth = parseFloat(prismWidth);
prismHeight = parseFloat(prismHeight);
if (calculationType === "volume") {
var volume = prismLength * prismWidth * prismHeight;
result = "Volume:
" + volume.toFixed(4) + " ";
} else if (calculationType === "surface_area") {
var surfaceArea = 2 * (prismLength * prismWidth + prismLength * prismHeight + prismWidth * prismHeight);
result = "Surface Area:
" + surfaceArea.toFixed(4) + " ";
}
} else if (shape === "cylinder") {
var cylRadius = document.getElementById("cylRadius").value;
var cylHeight = document.getElementById("cylHeight").value;
if (!isValidNumber(cylRadius) || !isValidNumber(cylHeight)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for radius and height.";
return;
}
cylRadius = parseFloat(cylRadius);
cylHeight = parseFloat(cylHeight);
if (calculationType === "volume") {
var volume = pi * cylRadius * cylRadius * cylHeight;
result = "Volume:
" + volume.toFixed(4) + " ";
} else if (calculationType === "surface_area") {
var surfaceArea = 2 * pi * cylRadius * cylHeight + 2 * pi * cylRadius * cylRadius;
result = "Surface Area:
" + surfaceArea.toFixed(4) + " ";
}
} else if (shape === "cone") {
var coneRadius = document.getElementById("coneRadius").value;
var coneHeight = document.getElementById("coneHeight").value;
if (!isValidNumber(coneRadius) || !isValidNumber(coneHeight)) {
resultDiv.innerHTML = "Error: Please enter valid positive numbers for radius and height.";
return;
}
coneRadius = parseFloat(coneRadius);
coneHeight = parseFloat(coneHeight);
if (calculationType === "volume") {
var volume = (1/3) * pi * coneRadius * coneRadius * coneHeight;
result = "Volume:
" + volume.toFixed(4) + " ";
} else if (calculationType === "surface_area") {
var slantHeight = Math.sqrt(coneRadius * coneRadius + coneHeight * coneHeight);
var surfaceArea = pi * coneRadius * (coneRadius + slantHeight);
result = "Surface Area:
" + surfaceArea.toFixed(4) + " ";
}
} else if (shape === "sphere") {
var sphereRadius = document.getElementById("sphereRadius").value;
if (!isValidNumber(sphereRadius)) {
resultDiv.innerHTML = "Error: Please enter a valid positive number for radius.";
return;
}
sphereRadius = parseFloat(sphereRadius);
if (calculationType === "volume") {
var volume = (4/3) * pi * sphereRadius * sphereRadius * sphereRadius;
result = "Volume:
" + volume.toFixed(4) + " ";
} else if (calculationType === "surface_area") {
var surfaceArea = 4 * pi * sphereRadius * sphereRadius;
result = "Surface Area:
" + surfaceArea.toFixed(4) + " ";
}
}
if (result) {
resultDiv.innerHTML = result;
} else {
resultDiv.innerHTML = "Please select a shape and calculation type, and provide all required inputs.";
}
} catch (e) {
resultDiv.innerHTML = "An error occurred during calculation. Please check your inputs.";
console.error(e);
}
}
// Initialize inputs on page load
document.addEventListener('DOMContentLoaded', updateInputs);