Design a Area and Volume Calculator in Tailwind CSS

Last Updated : 04 Mar, 2024
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.
ae1
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:
ae1
Suggest improvement
How to use Ring and Ring-offset Classes in Tailwind CSS ?
Design a Complex Number Calculator in Tailwind CSS
Share your thoughts in the comments
Design a Area and Volume Calculator in Tailwind CSS

Prerequisites

Approach

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?
