:root {
–primary: #4361ee;
–secondary: #3f37c9;
–light: #f8f9fa;
–dark: #212529;
–success: #4caf50;
–warning: #ff9800;
–danger: #f44336;
–info: #2196f3;
–purple: #9c27b0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fb;
color: var(–dark);
line-height: 1.6;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Header Styles */
header {
background: linear-gradient(135deg, var(–primary), var(–secondary));
color: white;
padding: 1.5rem 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo h1 {
font-size: 1.8rem;
font-weight: 700;
}
.tagline {
font-size: 1rem;
opacity: 0.9;
margin-top: 5px;
}
/* Main Content */
.calculator-container {
max-width: 1000px;
margin: 2rem auto;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.calculator-header {
background: linear-gradient(135deg, var(–primary), var(–secondary));
color: white;
padding: 1.5rem;
text-align: center;
}
.calculator-header h2 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.calculator-header p {
opacity: 0.9;
}
.calculator-body {
padding: 1.5rem;
}
.shape-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.shape-btn {
padding: 1rem;
border: 2px solid #e9ecef;
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.shape-btn:hover {
border-color: var(–primary);
transform: translateY(-2px);
}
.shape-btn.active {
border-color: var(–primary);
background: var(–primary);
color: white;
}
.shape-icon {
font-size: 2rem;
}
.shape-name {
font-weight: 500;
}
.calculator-form {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-group input, .form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.dimension-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.calculate-btn {
background: var(–primary);
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: background 0.3s;
margin-top: 10px;
width: 100%;
}
.calculate-btn:hover {
background: var(–secondary);
}
.results {
margin-top: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
display: none;
}
.results h3 {
margin-bottom: 1rem;
color: var(–primary);
border-bottom: 1px solid #ddd;
padding-bottom: 0.5rem;
}
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.result-card {
background: white;
padding: 1rem;
border-radius: 8px;
text-align: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.result-value {
font-size: 1.5rem;
font-weight: 700;
color: var(–primary);
margin: 0.5rem 0;
}
.result-label {
font-size: 0.9rem;
color: #666;
}
.calculation-steps {
margin-top: 1.5rem;
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.step {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.step:last-child {
border-bottom: none;
}
.step-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(–primary);
}
.step-content {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.step-equation {
font-size: 1.2rem;
padding: 5px 10px;
background: #f0f0f0;
border-radius: 4px;
}
.step-operator {
font-size: 1.5rem;
font-weight: bold;
color: var(–primary);
}
.shape-visualization {
display: flex;
justify-content: center;
margin: 1.5rem 0;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.shape-canvas {
max-width: 300px;
width: 100%;
}
.unit-selector {
display: flex;
gap: 10px;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.unit-btn {
padding: 8px 15px;
border: 1px solid #ddd;
background: white;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
font-size: 0.9rem;
}
.unit-btn.active {
background: var(–primary);
color: white;
border-color: var(–primary);
}
/* Article Section */
.article-section {
background: white;
border-radius: 10px;
padding: 2.5rem;
margin: 3rem auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
max-width: 1000px;
}
.article-section h2 {
font-size: 2rem;
color: var(–primary);
margin-bottom: 1.5rem;
text-align: center;
border-bottom: 2px solid var(–primary);
padding-bottom: 0.5rem;
}
.article-content {
font-size: 1.1rem;
line-height: 1.8;
}
.article-content h3 {
font-size: 1.6rem;
color: var(–secondary);
margin: 2rem 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #eee;
}
.article-content h4 {
font-size: 1.3rem;
color: var(–info);
margin: 1.5rem 0 0.8rem;
}
.article-content p {
margin-bottom: 1.2rem;
}
.article-content ul, .article-content ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.article-content li {
margin-bottom: 0.5rem;
}
.keyword-highlight {
background-color: #e3f2fd;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
color: var(–info);
}
.formula-box {
background: #f5f5f5;
border-left: 4px solid var(–primary);
padding: 1rem;
margin: 1.5rem 0;
border-radius: 4px;
}
.formula {
font-size: 1.3rem;
font-weight: 600;
color: var(–primary);
text-align: center;
}
.benefits-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.benefit-item {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 8px;
border-left: 4px solid var(–success);
}
.benefit-item h4 {
color: var(–success);
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}
.instruction-steps {
counter-reset: step-counter;
margin: 2rem 0;
}
.instruction-step {
position: relative;
margin-bottom: 2rem;
padding-left: 70px;
}
.instruction-step:before {
counter-increment: step-counter;
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background: var(–primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
}
.instruction-step h4 {
margin-top: 0;
margin-bottom: 10px;
color: var(–primary);
}
.faq-section {
margin-top: 3rem;
}
.faq-item {
margin-bottom: 1.5rem;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
}
.faq-question {
background: #f8f9fa;
padding: 1.2rem 1.5rem;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s;
}
.faq-question:hover {
background: #e9ecef;
}
.faq-answer {
padding: 1.2rem 1.5rem;
display: none;
}
.faq-item.active .faq-answer {
display: block;
}
/* Footer */
footer {
background: var(–dark);
color: white;
padding: 2rem 0;
margin-top: 3rem;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright {
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 15px;
text-align: center;
}
.shape-selector {
grid-template-columns: repeat(2, 1fr);
}
.result-grid {
grid-template-columns: 1fr;
}
.footer-content {
flex-direction: column;
gap: 15px;
text-align: center;
}
.article-section {
padding: 1.5rem;
}
.article-section h2 {
font-size: 1.6rem;
}
.article-content h3 {
font-size: 1.4rem;
}
.benefits-list {
grid-template-columns: 1fr;
}
.instruction-step {
padding-left: 60px;
}
.instruction-step:before {
width: 40px;
height: 40px;
font-size: 18px;
}
}
DastanGou Free Tools
Area Calculator
Calculate area of various geometric shapes with step-by-step solutions
Area Calculation Results
Calculation Steps
Complete Guide to Area Calculation: Formulas, Methods & Applications
An area calculator is an essential tool for students, professionals, and DIY enthusiasts who need to calculate the surface area of various geometric shapes. Whether you’re working on a home renovation project, solving math homework, or planning a landscaping design, understanding how to calculate area accurately is crucial.
What is Area and Why is it Important?
Area refers to the amount of space enclosed within a two-dimensional shape or surface. It’s measured in square units, such as square meters (m²), square feet (ft²), or square inches (in²). Calculating area is fundamental in numerous real-world applications:
🏠 Construction & Renovation
Calculate flooring, painting, or tiling requirements for rooms and buildings.
📚 Education & Learning
Essential for geometry students and mathematics education at all levels.
🌳 Landscaping & Agriculture
Determine land area for gardening, farming, or property planning.
📐 Engineering & Design
Critical for architectural plans, mechanical designs, and technical drawings.
Area Formulas for Common Shapes
Rectangle Area
The rectangle area formula is one of the most commonly used calculations. It applies to any four-sided shape with right angles, including most rooms, tables, and sheets of paper.
Square Area
A square is a special type of rectangle where all sides are equal. The square area calculation is simply the side length multiplied by itself.
Triangle Area
The triangle area formula works for all types of triangles. The height must be perpendicular to the base for accurate calculation.
Circle Area
For circle area calculation, you need to know the radius (distance from center to edge). π (pi) is approximately 3.14159.
Parallelogram Area
Similar to rectangles but for slanted shapes. The height is the perpendicular distance between parallel sides.
Trapezoid Area
For shapes with two parallel sides of different lengths. Commonly used in engineering and architecture.
How to Use Our Area Calculator: Step-by-Step Guide
Select Your Shape
Choose from six common geometric shapes: rectangle, square, triangle, circle, parallelogram, or trapezoid. Each shape has its specific input requirements.
Enter Dimensions
Input the required measurements based on your selected shape. For example:
- Rectangle: Length and width
- Triangle: Base and height
- Circle: Radius
- Trapezoid: Both bases and height
Choose Measurement Units
Select your preferred unit system: metric (meters, centimeters, millimeters) or imperial (feet, inches). The calculator will automatically convert between units if needed.
Calculate and Review
Click the “Calculate Area” button to get instant results. Our calculator provides:
- Final area measurement
- Step-by-step calculation process
- Visual representation of your shape
- Formula used for the calculation
Practical Applications of Area Calculation
Home Improvement Projects
Calculate how much paint you need for walls, how many tiles for flooring, or how much carpet to purchase. Accurate area measurements can save money and prevent material waste.
Gardening and Landscaping
Determine how much grass seed, fertilizer, or mulch you need for your lawn or garden beds. Our area calculator helps optimize resource usage.
Academic and Professional Use
Students can verify their geometry homework, while professionals in construction, architecture, and engineering can make quick calculations for projects and estimates.
Tips for Accurate Area Calculations
- Use consistent units: Ensure all measurements are in the same unit system
- Measure carefully: Small errors in measurement can lead to significant calculation errors
- Understand the shape: Make sure you’re using the correct formula for your specific shape
- Double-check inputs: Verify all entered values before calculating
- Consider irregular shapes: For complex shapes, break them down into simpler components
Frequently Asked Questions
+
Area measures the space inside a shape (in square units), while perimeter measures the distance around the shape (in linear units). For example, a rectangle’s area is length × width, while its perimeter is 2 × (length + width).
+
Yes, for irregular shapes, you can divide them into regular shapes (rectangles, triangles, etc.), calculate each area separately, then sum them up. This method is known as the composite shape approach.
+
Our calculator provides precise mathematical calculations based on the formulas. The accuracy depends on the precision of your input measurements. For most practical purposes, it provides results accurate enough for professional use.
+
Absolutely! Our area calculator is fully responsive and works perfectly on smartphones, tablets, and desktop computers. The interface adjusts to provide the best user experience on any device.
Conclusion
Mastering area calculation is an essential skill with countless practical applications. Our free online area calculator simplifies this process, providing accurate results with step-by-step explanations. Whether you’re a student, professional, or DIY enthusiast, this tool can save time and improve accuracy in your calculations.
Try our geometry calculator today for all your area calculation needs. It’s completely free, requires no registration, and works instantly in your web browser.
// Current state
let currentShape = ‘rectangle’;
let currentUnit = ‘m’;
// DOM elements
const shapeButtons = document.querySelectorAll(‘.shape-btn’);
const shapeForms = document.querySelectorAll(‘.shape-form’);
const unitButtons = document.querySelectorAll(‘.unit-btn’);
const canvas = document.getElementById(‘shapeCanvas’);
const ctx = canvas.getContext(‘2d’);
const faqQuestions = document.querySelectorAll(‘.faq-question’);
// Initialize calculator
function initCalculator() {
setupEventListeners();
drawShape();
}
// Set up event listeners
function setupEventListeners() {
// Shape selection
shapeButtons.forEach(button => {
button.addEventListener(‘click’, function() {
const shape = this.getAttribute(‘data-shape’);
selectShape(shape);
});
});
// Unit selection
unitButtons.forEach(button => {
button.addEventListener(‘click’, function() {
const unit = this.getAttribute(‘data-unit’);
selectUnit(unit);
});
});
// Auto-calculate when inputs change
document.querySelectorAll(‘input’).forEach(input => {
input.addEventListener(‘input’, calculateArea);
});
// FAQ toggle
faqQuestions.forEach(question => {
question.addEventListener(‘click’, function() {
const faqItem = this.parentElement;
faqItem.classList.toggle(‘active’);
// Update the toggle icon
const icon = this.querySelector(‘span’);
icon.textContent = faqItem.classList.contains(‘active’) ? ‘−’ : ‘+’;
});
});
}
// Select shape
function selectShape(shape) {
currentShape = shape;
// Update active shape button
shapeButtons.forEach(button => {
button.classList.remove(‘active’);
if (button.getAttribute(‘data-shape’) === shape) {
button.classList.add(‘active’);
}
});
// Show corresponding form
shapeForms.forEach(form => {
form.classList.remove(‘active’);
if (form.id === `${shape}Form`) {
form.classList.add(‘active’);
}
});
// Update shape name in results
document.getElementById(‘shapeName’).textContent = shape.charAt(0).toUpperCase() + shape.slice(1);
// Redraw shape
drawShape();
// Recalculate area
calculateArea();
}
// Select unit
function selectUnit(unit) {
currentUnit = unit;
// Update active unit button
unitButtons.forEach(button => {
button.classList.remove(‘active’);
if (button.getAttribute(‘data-unit’) === unit) {
button.classList.add(‘active’);
}
});
// Update unit in results
const unitSymbols = {
‘m’: ‘m²’,
‘cm’: ‘cm²’,
‘mm’: ‘mm²’,
‘ft’: ‘ft²’,
‘in’: ‘in²’
};
document.getElementById(‘areaUnit’).textContent = unitSymbols[unit];
// Recalculate area
calculateArea();
}
// Draw shape on canvas
function drawShape() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Set drawing style
ctx.strokeStyle = ‘#4361ee’;
ctx.fillStyle = ‘rgba(67, 97, 238, 0.2)’;
ctx.lineWidth = 2;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
switch(currentShape) {
case ‘rectangle’:
// Draw rectangle
const rectWidth = 120;
const rectHeight = 80;
ctx.fillRect(centerX – rectWidth/2, centerY – rectHeight/2, rectWidth, rectHeight);
ctx.strokeRect(centerX – rectWidth/2, centerY – rectHeight/2, rectWidth, rectHeight);
// Draw dimensions
ctx.strokeStyle = ‘#666’;
ctx.lineWidth = 1;
ctx.setLineDash([5, 3]);
// Width dimension
ctx.beginPath();
ctx.moveTo(centerX – rectWidth/2, centerY – rectHeight/2 – 10);
ctx.lineTo(centerX + rectWidth/2, centerY – rectHeight/2 – 10);
ctx.stroke();
// Height dimension
ctx.beginPath();
ctx.moveTo(centerX + rectWidth/2 + 10, centerY – rectHeight/2);
ctx.lineTo(centerX + rectWidth/2 + 10, centerY + rectHeight/2);
ctx.stroke();
ctx.setLineDash([]);
break;
case ‘square’:
// Draw square
const squareSize = 100;
ctx.fillRect(centerX – squareSize/2, centerY – squareSize/2, squareSize, squareSize);
ctx.strokeRect(centerX – squareSize/2, centerY – squareSize/2, squareSize, squareSize);
// Draw side dimension
ctx.strokeStyle = ‘#666’;
ctx.lineWidth = 1;
ctx.setLineDash([5, 3]);
ctx.beginPath();
ctx.moveTo(centerX – squareSize/2, centerY – squareSize/2 – 10);
ctx.lineTo(centerX + squareSize/2, centerY – squareSize/2 – 10);
ctx.stroke();
ctx.setLineDash([]);
break;
case ‘triangle’:
// Draw triangle
const triangleSize = 100;
ctx.beginPath();
ctx.moveTo(centerX, centerY – triangleSize/2);
ctx.lineTo(centerX – triangleSize/2, centerY + triangleSize/2);
ctx.lineTo(centerX + triangleSize/2, centerY + triangleSize/2);
ctx.closePath();
ctx.fill();
ctx.stroke();
// Draw dimensions
ctx.strokeStyle = ‘#666’;
ctx.lineWidth = 1;
ctx.setLineDash([5, 3]);
// Base dimension
ctx.beginPath();
ctx.moveTo(centerX – triangleSize/2, centerY + triangleSize/2 + 10);
ctx.lineTo(centerX + triangleSize/2, centerY + triangleSize/2 + 10);
ctx.stroke();
// Height dimension
ctx.beginPath();
ctx.moveTo(centerX + triangleSize/2 + 10, centerY + triangleSize/2);
ctx.lineTo(centerX + triangleSize/2 + 10, centerY – triangleSize/2);
ctx.stroke();
ctx.setLineDash([]);
break;
case ‘circle’:
// Draw circle
const circleRadius = 60;
ctx.beginPath();
ctx.arc(centerX, centerY, circleRadius, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
// Draw radius
ctx.strokeStyle = ‘#666’;
ctx.lineWidth = 1;
ctx.setLineDash([5, 3]);
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + circleRadius, centerY);
ctx.stroke();
ctx.setLineDash([]);
break;
case ‘parallelogram’:
// Draw parallelogram
const paraWidth = 120;
const paraHeight = 80;
const paraSkew = 30;
ctx.beginPath();
ctx.moveTo(centerX – paraWidth/2 + paraSkew, centerY – paraHeight/2);
ctx.lineTo(centerX + paraWidth/2 + paraSkew, centerY – paraHeight/2);
ctx.lineTo(centerX + paraWidth/2 – paraSkew, centerY + paraHeight/2);
ctx.lineTo(centerX – paraWidth/2 – paraSkew, centerY + paraHeight/2);
ctx.closePath();
ctx.fill();
ctx.stroke();
// Draw dimensions
ctx.strokeStyle = ‘#666’;
ctx.lineWidth = 1;
ctx.setLineDash([5, 3]);
// Height dimension
ctx.beginPath();
ctx.moveTo(centerX + paraWidth/2 + paraSkew + 10, centerY – paraHeight/2);
ctx.lineTo(centerX + paraWidth/2 – paraSkew + 10, centerY + paraHeight/2);
ctx.stroke();
ctx.setLineDash([]);
break;
case ‘trapezoid’:
// Draw trapezoid
const trapTop = 80;
const trapBottom = 120;
const trapHeight = 80;
ctx.beginPath();
ctx.moveTo(centerX – trapTop/2, centerY – trapHeight/2);
ctx.lineTo(centerX + trapTop/2, centerY – trapHeight/2);
ctx.lineTo(centerX + trapBottom/2, centerY + trapHeight/2);
ctx.lineTo(centerX – trapBottom/2, centerY + trapHeight/2);
ctx.closePath();
ctx.fill();
ctx.stroke();
// Draw dimensions
ctx.strokeStyle = ‘#666’;
ctx.lineWidth = 1;
ctx.setLineDash([5, 3]);
// Height dimension
ctx.beginPath();
ctx.moveTo(centerX + trapBottom/2 + 10, centerY + trapHeight/2);
ctx.lineTo(centerX + trapBottom/2 + 10, centerY – trapHeight/2);
ctx.stroke();
ctx.setLineDash([]);
break;
}
}
// Calculate area
function calculateArea() {
let area = 0;
let formula = ”;
let step1 = ”;
let step2 = ”;
let step3 = ”;
switch(currentShape) {
case ‘rectangle’:
const length = parseFloat(document.getElementById(‘rectangleLength’).value) || 0;
const width = parseFloat(document.getElementById(‘rectangleWidth’).value) || 0;
area = length * width;
formula = ‘Length × Width’;
step1 = ‘Area = Length × Width’;
step2 = `Length = ${length}, Width = ${width}`;
step3 = `Area = ${length} × ${width} = ${area}`;
break;
case ‘square’:
const side = parseFloat(document.getElementById(‘squareSide’).value) || 0;
area = side * side;
formula = ‘Side × Side’;
step1 = ‘Area = Side × Side’;
step2 = `Side = ${side}`;
step3 = `Area = ${side} × ${side} = ${area}`;
break;
case ‘triangle’:
const base = parseFloat(document.getElementById(‘triangleBase’).value) || 0;
const height = parseFloat(document.getElementById(‘triangleHeight’).value) || 0;
area = 0.5 * base * height;
formula = ‘½ × Base × Height’;
step1 = ‘Area = ½ × Base × Height’;
step2 = `Base = ${base}, Height = ${height}`;
step3 = `Area = ½ × ${base} × ${height} = ${area}`;
break;
case ‘circle’:
const radius = parseFloat(document.getElementById(‘circleRadius’).value) || 0;
area = Math.PI * radius * radius;
formula = ‘π × Radius²’;
step1 = ‘Area = π × Radius²’;
step2 = `Radius = ${radius}, π ≈ ${Math.PI.toFixed(4)}`;
step3 = `Area = ${Math.PI.toFixed(4)} × ${radius}² = ${area.toFixed(4)}`;
break;
case ‘parallelogram’:
const paraBase = parseFloat(document.getElementById(‘parallelogramBase’).value) || 0;
const paraHeight = parseFloat(document.getElementById(‘parallelogramHeight’).value) || 0;
area = paraBase * paraHeight;
formula = ‘Base × Height’;
step1 = ‘Area = Base × Height’;
step2 = `Base = ${paraBase}, Height = ${paraHeight}`;
step3 = `Area = ${paraBase} × ${paraHeight} = ${area}`;
break;
case ‘trapezoid’:
const base1 = parseFloat(document.getElementById(‘trapezoidBase1’).value) || 0;
const base2 = parseFloat(document.getElementById(‘trapezoidBase2’).value) || 0;
const trapHeightVal = parseFloat(document.getElementById(‘trapezoidHeight’).value) || 0;
area = 0.5 * (base1 + base2) * trapHeightVal;
formula = ‘½ × (Base1 + Base2) × Height’;
step1 = ‘Area = ½ × (Base1 + Base2) × Height’;
step2 = `Base1 = ${base1}, Base2 = ${base2}, Height = ${trapHeightVal}`;
step3 = `Area = ½ × (${base1} + ${base2}) × ${trapHeightVal} = ${area}`;
break;
}
// Update results
document.getElementById(‘areaValue’).textContent = area.toFixed(4);
document.getElementById(‘formulaName’).textContent = formula;
document.getElementById(‘step1Formula’).textContent = step1;
document.getElementById(‘step2Values’).textContent = step2;
document.getElementById(‘step3Calculation’).textContent = step3;
// Show results
document.getElementById(‘results’).style.display = ‘block’;
}
// Initialize calculator when page loads
window.addEventListener(‘load’, initCalculator);
