Design a Area and Volume Calculator in Tailwind CSS
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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: