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;
display: flex;
flex-direction: column;
align-items: center;
}
.calculator-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
margin-bottom: 30px;
}
.calculator-title {
text-align: center;
color: #004a99;
margin-bottom: 25px;
font-size: 2em;
border-bottom: 2px solid #004a99;
padding-bottom: 10px;
}
.input-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.input-group label {
margin-bottom: 8px;
font-weight: bold;
color: #004a99;
}
.input-group input[type="number"] {
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
transition: border-color 0.3s ease;
}
.input-group input[type="number"]:focus {
border-color: #004a99;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.2);
}
.calculator-options {
margin-bottom: 25px;
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.calculator-options button {
background-color: #004a99;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
font-weight: bold;
}
.calculator-options button:hover {
background-color: #003b7a;
transform: translateY(-2px);
}
.calculator-options button:active {
transform: translateY(0);
}
#result-container {
margin-top: 25px;
padding: 20px;
background-color: #e7f3ff;
border: 1px solid #004a99;
border-radius: 5px;
text-align: center;
}
#result-container h3 {
margin-top: 0;
color: #004a99;
font-size: 1.4em;
}
#calculation-result {
font-size: 2.5em;
color: #28a745;
font-weight: bold;
word-wrap: break-word;
}
.article-content {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 800px;
width: 100%;
text-align: justify;
}
.article-content h2 {
color: #004a99;
border-bottom: 2px solid #004a99;
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 1.8em;
}
.article-content h3 {
color: #004a99;
margin-top: 20px;
margin-bottom: 10px;
font-size: 1.4em;
}
.article-content p, .article-content ul, .article-content ol {
margin-bottom: 15px;
}
.article-content li {
margin-bottom: 8px;
}
code {
background-color: #eef;
padding: 2px 5px;
border-radius: 3px;
font-family: 'Courier New', Courier, monospace;
}
.error-message {
color: red;
font-weight: bold;
margin-top: 15px;
}
Geometry Shape Calculator
Select Shape:
Square
Rectangle
Circle
Triangle (Right)
Trapezoid
Calculate Area
Calculate Perimeter
Understanding Geometric Calculations
Geometry is a fundamental branch of mathematics that deals with shapes, sizes, positions of figures, and properties of space. It's used extensively in fields ranging from architecture and engineering to computer graphics and art. This calculator helps you quickly compute the area and perimeter of common geometric shapes.
Key Geometric Concepts:
Area: The amount of two-dimensional space a shape occupies. It's measured in square units (e.g., square meters, square inches).Perimeter: The total distance around the outside boundary of a two-dimensional shape. It's measured in linear units (e.g., meters, inches).
Supported Shapes and Formulas:
1. Square
Inputs: Side Length (s)Area: Area = s²Perimeter: Perimeter = 4s
2. Rectangle
Inputs: Length (l), Width (w)Area: Area = l × wPerimeter: Perimeter = 2(l + w)
3. Circle
Inputs: Radius (r)Area: Area = πr² (where π ≈ 3.14159)Perimeter (Circumference): Perimeter = 2πr
4. Triangle (Right-Angled Triangle)
Inputs: Base (b), Height (h)Area: Area = 0.5 × b × hPerimeter: Perimeter = b + h + √(b² + h²) (using Pythagorean theorem for hypotenuse)
5. Trapezoid
Inputs: Base 1 (b1), Base 2 (b2), Height (h)Area: Area = 0.5 × (b1 + b2) × hPerimeter: Perimeter = b1 + b2 + side3 + side4 (Note: To calculate the perimeter precisely, the lengths of the non-parallel sides are needed, which are not standard inputs for a simple area-focused trapezoid calculator. This calculator will assume a basic perimeter calculation for demonstration purposes, often requiring more specific trapezoid types for accurate perimeter.) For a generic trapezoid, the perimeter calculation is not straightforward without knowing the lengths of the non-parallel sides. For demonstration, if we consider an isosceles trapezoid where the non-parallel sides are equal, we would need additional input. This calculator focuses on area for trapezoids unless specific side lengths are provided. For this basic calculator, perimeter will be shown as an approximation or require further specific inputs not included here.
How to Use This Calculator:
Select the desired geometric shape from the dropdown menu.
Based on the shape selected, the input fields will update. Enter the required measurements (e.g., side length, radius, base, height) into the respective fields. Ensure you are using consistent units for all measurements.
Click "Calculate Area" to find the area of the shape.
Click "Calculate Perimeter" to find the perimeter of the shape.
The results will be displayed clearly below.
Applications of Geometric Calculations:
Construction & Architecture: Calculating the amount of materials needed, determining room dimensions, designing structures.Engineering: Designing parts, analyzing forces, understanding spatial relationships.Navigation: Calculating distances and routes.Art & Design: Creating patterns, understanding perspective, designing layouts.Everyday Life: Measuring spaces for furniture, calculating paint needed for a room, figuring out yard dimensions.
var currentShape = "square"; // Default shape
function updateInputs() {
var shapeTypeSelect = document.getElementById("shapeType");
var dynamicInputsDiv = document.getElementById("dynamic-inputs");
currentShape = shapeTypeSelect.value;
var inputsHTML = "";
switch (currentShape) {
case "square":
inputsHTML = `
Side Length:
`;
break;
case "rectangle":
inputsHTML = `
Length:
Width:
`;
break;
case "circle":
inputsHTML = `
Radius:
`;
break;
case "triangle":
inputsHTML = `
Base:
Height:
`;
break;
case "trapezoid":
inputsHTML = `
Base 1:
Base 2:
Height:
Side 3 (non-parallel):
Side 4 (non-parallel):
`;
break;
default:
inputsHTML = "";
}
dynamicInputsDiv.innerHTML = inputsHTML;
}
function getInputValue(id) {
var element = document.getElementById(id);
if (element) {
var value = parseFloat(element.value);
return isNaN(value) ? null : value;
}
return null;
}
function displayResult(result, unit, isError = false) {
var resultElement = document.getElementById("calculation-result");
var unitElement = document.getElementById("result-unit");
var errorElement = document.getElementById("error-message");
if (isError) {
resultElement.textContent = "–";
unitElement.textContent = "";
errorElement.textContent = result;
} else {
resultElement.textContent = result !== null ? result.toFixed(4) : "–";
unitElement.textContent = unit;
errorElement.textContent = "";
}
}
function calculateGeometry() {
var area = null;
var unit = "square units";
var errorMsg = "";
var shape = document.getElementById("shapeType").value;
switch (shape) {
case "square":
var side = getInputValue("sideLength");
if (side === null || side <= 0) {
errorMsg = "Please enter a valid positive side length.";
} else {
area = side * side;
}
break;
case "rectangle":
var length = getInputValue("rectLength");
var width = getInputValue("rectWidth");
if (length === null || length <= 0 || width === null || width <= 0) {
errorMsg = "Please enter valid positive length and width.";
} else {
area = length * width;
}
break;
case "circle":
var radius = getInputValue("radius");
if (radius === null || radius <= 0) {
errorMsg = "Please enter a valid positive radius.";
} else {
area = Math.PI * radius * radius;
}
break;
case "triangle":
var base = getInputValue("base");
var height = getInputValue("height");
if (base === null || base <= 0 || height === null || height <= 0) {
errorMsg = "Please enter valid positive base and height.";
} else {
area = 0.5 * base * height;
}
break;
case "trapezoid":
var base1 = getInputValue("trapBase1");
var base2 = getInputValue("trapBase2");
var height = getInputValue("trapHeight");
if (base1 === null || base1 <= 0 || base2 === null || base2 <= 0 || height === null || height <= 0) {
errorMsg = "Please enter valid positive values for Base 1, Base 2, and Height.";
} else {
area = 0.5 * (base1 + base2) * height;
}
break;
default:
errorMsg = "Invalid shape selected.";
}
if (errorMsg) {
displayResult(null, "", true);
document.getElementById("error-message").textContent = errorMsg;
} else {
displayResult(area, unit);
}
}
function calculatePerimeter() {
var perimeter = null;
var unit = "units";
var errorMsg = "";
var shape = document.getElementById("shapeType").value;
switch (shape) {
case "square":
var side = getInputValue("sideLength");
if (side === null || side <= 0) {
errorMsg = "Please enter a valid positive side length.";
} else {
perimeter = 4 * side;
}
break;
case "rectangle":
var length = getInputValue("rectLength");
var width = getInputValue("rectWidth");
if (length === null || length <= 0 || width === null || width <= 0) {
errorMsg = "Please enter valid positive length and width.";
} else {
perimeter = 2 * (length + width);
}
break;
case "circle":
var radius = getInputValue("radius");
if (radius === null || radius <= 0) {
errorMsg = "Please enter a valid positive radius.";
} else {
perimeter = 2 * Math.PI * radius;
unit = "units (circumference)";
}
break;
case "triangle":
var base = getInputValue("base");
var height = getInputValue("height");
if (base === null || base <= 0 || height === null || height <= 0) {
errorMsg = "Please enter valid positive base and height.";
} else {
var hypotenuse = Math.sqrt(base * base + height * height);
perimeter = base + height + hypotenuse;
}
break;
case "trapezoid":
var base1 = getInputValue("trapBase1");
var base2 = getInputValue("trapBase2");
var side3 = getInputValue("trapSide3");
var side4 = getInputValue("trapSide4");
if (base1 === null || base1 <= 0 || base2 === null || base2 0) {
p += side3;
} else {
// Indicate if side 3 is missing for perimeter calculation
if (side4 !== null && side4 > 0) { // If side 4 is present, side 3 is clearly missing
errorMsg = "Perimeter calculation incomplete: Missing Side 3. ";
} else if (base1 !== base2) { // If bases are different, sides are likely needed
errorMsg = "Perimeter calculation requires non-parallel side lengths. ";
}
}
if (side4 !== null && side4 > 0) {
p += side4;
} else {
// Indicate if side 4 is missing for perimeter calculation
if (side3 !== null && side3 > 0) { // If side 3 is present, side 4 is clearly missing
errorMsg = "Perimeter calculation incomplete: Missing Side 4. ";
} else if (base1 !== base2) { // If bases are different, sides are likely needed
errorMsg = "Perimeter calculation requires non-parallel side lengths. ";
}
}
// If both optional sides are missing, but bases are equal (a parallelogram, not trapezoid usually), or if bases are different and sides are needed
if ((side3 === null || side3 <= 0) && (side4 === null || side4 <= 0) && base1 !== base2) {
errorMsg = "Perimeter calculation incomplete: Non-parallel side lengths are required for non-isosceles trapezoids. ";
} else if (errorMsg === "") { // If no specific error, calculate if possible
perimeter = p;
}
}
break;
default:
errorMsg = "Invalid shape selected.";
}
if (errorMsg) {
displayResult(null, "", true);
document.getElementById("error-message").textContent = errorMsg;
} else {
displayResult(perimeter, unit);
}
}
// Initialize inputs on page load
document.addEventListener("DOMContentLoaded", updateInputs);