This project is an Area and Volume Calculator designed using the Tailwind CSS. It allows users to select different shapes and input the required dimensions to calculate the area or volume based on the selected shape.
Prerequisites
Approach
- The user can select a shape from the dropdown menu.
- Based on the selected shape the corresponding input fields for the dimensions are dynamically generated.
- When the user clicks on the “Calculate Area” button the area of the selected shape is calculated and displayed.
- When the user clicks on the “Calculate Volume” button the volume of the selected shape is calculated and displayed.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >The Area and Volume Calculator</ title >
< link href =
rel = "stylesheet" >
</ head >
< body class="bg-gray-100 min-h-screen flex
justify-center items-center">
< div class="max-w-md w-full bg-white p-8
rounded-lg shadow-lg border-2 border-green-500">
< h1 class="text-3xl font-bold text-center
mb-8">Area and Volume Calculator</ h1 >
< div class = "mb-4" >
< label for = "shape" class="block text-sm
font-medium text-gray-700 mb-2">Select Shape:</ label >
< select id = "shape"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500">
< option value = "square" >Square</ option >
< option value = "rectangle" >Rectangle</ option >
< option value = "circle" >Circle</ option >
< option value = "cube" >Cube</ option >
< option value = "sphere" >Sphere</ option >
< option value = "cylinder" >Cylinder</ option >
</ select >
</ div >
< div id = "dimension-inputs" class = "mb-4" >
< label for = "length" class="block text-sm
font-medium text-gray-700 mb-2">Length:</ label >
< input type = "number" id = "length"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500"
placeholder = "Length" >
< label for = "width" class="block text-sm
font-medium text-gray-700 mt-2 mb-2">Width:</ label >
< input type = "number" id = "width"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500"
placeholder = "Width" >
< label for = "height" class="block text-sm
font-medium text-gray-700 mt-2 mb-2">Height:</ label >
< input type = "number" id = "height"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500"
placeholder = "Height" >
</ div >
< div class = "flex justify-between mb-4" >
< button id = "calculateArea"
class="w-1/2 bg-blue-500 text-white
rounded-md py-2 px-4 hover:bg-blue-600
focus:outline-none mr-2">Calculate
Area</ button >
< button id = "calculateVolume"
class="w-1/2 bg-blue-500 text-white
rounded-md py-2 px-4 hover:bg-blue-600
focus:outline-none ml-2">Calculate
Volume</ button >
</ div >
< div id = "result" class = "text-center text-lg font-semibold" ></ div >
</ div >
< script >
const shapeSelect = document.getElementById('shape');
const dimensionInputs = document.getElementById('dimension-inputs');
const lengthInput = document.getElementById('length');
const widthInput = document.getElementById('width');
const heightInput = document.getElementById('height');
const calculateAreaBtn = document.getElementById('calculateArea');
const calculateVolumeBtn = document.getElementById('calculateVolume');
const resultElement = document.getElementById('result');
shapeSelect.addEventListener('change', function () {
const selectedShape = shapeSelect.value;
if (selectedShape === 'square') {
dimensionInputs.innerHTML = `
< label for = "length" class="block text-sm
font-medium text-gray-700 mb-2">Length:</ label >
< input type = "number" id = "length" class="w-full
border border-gray-300 rounded-md py-2 px-3
focus:outline-none focus:border-blue-500"
placeholder = "Length" >
`;
} else if (selectedShape === 'rectangle') {
dimensionInputs.innerHTML = `
< label for = "length" class="block text-sm
font-medium text-gray-700 mb-2">Length:</ label >
< input type = "number" id = "length" class="w-full border
border-gray-300 rounded-md py-2 px-3
focus:outline-none focus:border-blue-500"
placeholder = "Length" >
< label for = "width" class="block text-sm
font-medium text-gray-700 mt-2 mb-2">Width:</ label >
< input type = "number" id = "width" class="w-full border
border-gray-300 rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500" placeholder = "Width" >
`;
} else if (selectedShape === 'circle') {
dimensionInputs.innerHTML = `
< label for = "radius" class="block text-sm
font-medium text-gray-700 mb-2">Radius:</ label >
< input type = "number" id = "radius" class="w-full
border border-gray-300 rounded-md py-2 px-3
focus:outline-none focus:border-blue-500"
placeholder = "Radius" >
`;
} else if (selectedShape === 'cube') {
dimensionInputs.innerHTML = `
< label for = "side" class="block text-sm
font-medium text-gray-700 mb-2">Side:</ label >
< input type = "number" id = "side" class="w-full
border border-gray-300 rounded-md py-2 px-3
focus:outline-none focus:border-blue-500"
placeholder = "Side" >
`;
} else if (selectedShape === 'sphere') {
dimensionInputs.innerHTML = `
< label for = "radius" class="block
text-sm font-medium text-gray-700
mb-2">Radius:</ label >
< input type = "number" id = "radius"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500" placeholder = "Radius" >
`;
} else if (selectedShape === 'cylinder') {
dimensionInputs.innerHTML = `
< label for = "radius" class="block
text-sm font-medium text-gray-700
mb-2">Radius:</ label >
< input type = "number" id = "radius"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500" placeholder = "Radius" >
< label for = "height" class="block
text-sm font-medium text-gray-700
mt-2 mb-2">Height:</ label >
< input type = "number" id = "height"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500" placeholder = "Height" >
`;
}
});
calculateAreaBtn.addEventListener('click', function () {
const selectedShape = shapeSelect.value;
let area;
if (selectedShape === 'square') {
const length = parseFloat(lengthInput.value);
area = length * length;
} else if (selectedShape === 'rectangle') {
const length = parseFloat(lengthInput.value);
const width = parseFloat(widthInput.value);
area = length * width;
} else if (selectedShape === 'circle') {
const radius = parseFloat(document.getElementById('radius').value);
area = Math.PI * radius * radius;
}
resultElement.textContent = `Area: ${area.toFixed(2)}`;
});
calculateVolumeBtn.addEventListener('click', function () {
const selectedShape = shapeSelect.value;
let volume;
if (selectedShape === 'cube') {
const side = parseFloat(document
.getElementById('side').value);
volume = side * side * side;
} else if (selectedShape === 'sphere') {
const radius = parseFloat(document
.getElementById('radius').value);
volume = (4 / 3) * Math.PI * Math.pow(radius, 3);
} else if (selectedShape === 'cylinder') {
const radius = parseFloat(document
.getElementById('radius').value);
const height = parseFloat(document
.getElementById('height').value);
volume = Math.PI * radius * radius * height;
}
resultElement.textContent = `Volume: ${volume.toFixed(2)}`;
});
</ script >
</ body >
</ html >
|
Output:
Recommended Articles