Area calculator

This is a web page with a calculator to calculate the areas of a square, rectangle, circle, triangle, and trapezoid.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All-in-One Area Calculator</title>
    <style>
        :root {
            --background-color: #1a1a1a;
            --container-color: #2b2b2b;
            --text-color: #e0e0e0;
            --primary-color: #ff4136;
            --input-background: #3d3d3d;
            --border-color: #4d4d4d;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .calculator-container {
            background-color: var(--container-color);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 500px;
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        select, input[type="number"] {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background-color: var(--input-background);
            color: var(--text-color);
            font-size: 16px;
            box-sizing: border-box;
        }

        select:focus, input[type="number"]:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .shape-inputs {
            margin-top: 20px;
        }

        .input-field {
            display: none;
            margin-bottom: 15px;
        }

        .result-container {
            margin-top: 30px;
            padding: 20px;
            background-color: var(--input-background);
            border-radius: 5px;
            text-align: center;
        }

        #result {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
        }

        @media (max-width: 600px) {
            .calculator-container {
                padding: 20px;
            }

            h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>

    <div class="calculator-container">
        <h1>All-in-One Area Calculator</h1>

        <div class="input-group">
            <label for="shape">Select a Shape:</label>
            <select id="shape" onchange="showInputs()">
                <option value="square">Square</option>
                <option value="rectangle">Rectangle</option>
                <option value="circle">Circle</option>
                <option value="triangle">Triangle</option>
                <option value="trapezoid">Trapezoid</option>
            </select>
        </div>

        <div class="shape-inputs">
            <div id="square-inputs" class="input-field">
                <label for="square-side">Side</label>
                <input type="number" id="square-side" oninput="calculateArea()">
            </div>

            <div id="rectangle-inputs" class="input-field">
                <label for="rectangle-length">Length</label>
                <input type="number" id="rectangle-length" oninput="calculateArea()">
                <label for="rectangle-width" style="margin-top: 10px;">Width</label>
                <input type="number" id="rectangle-width" oninput="calculateArea()">
            </div>

            <div id="circle-inputs" class="input-field">
                <label for="circle-radius">Radius</label>
                <input type="number" id="circle-radius" oninput="calculateArea()">
            </div>

            <div id="triangle-inputs" class="input-field">
                <label for="triangle-base">Base</label>
                <input type="number" id="triangle-base" oninput="calculateArea()">
                <label for="triangle-height" style="margin-top: 10px;">Height</label>
                <input type="number" id="triangle-height" oninput="calculateArea()">
            </div>

            <div id="trapezoid-inputs" class="input-field">
                <label for="trapezoid-base1">Base 1</label>
                <input type="number" id="trapezoid-base1" oninput="calculateArea()">
                <label for="trapezoid-base2" style="margin-top: 10px;">Base 2</label>
                <input type="number" id="trapezoid-base2" oninput="calculateArea()">
                <label for="trapezoid-height" style="margin-top: 10px;">Height</label>
                <input type="number" id="trapezoid-height" oninput="calculateArea()">
            </div>
        </div>

        <div class="result-container">
            <p id="result">Area: 0</p>
        </div>
    </div>

    <script>
        function showInputs() {
            const shape = document.getElementById('shape').value;
            const allInputs = document.querySelectorAll('.input-field');
            allInputs.forEach(input => input.style.display = 'none');

            document.getElementById(`${shape}-inputs`).style.display = 'block';
            calculateArea();
        }

        function calculateArea() {
            const shape = document.getElementById('shape').value;
            let area = 0;

            if (shape === 'square') {
                const side = parseFloat(document.getElementById('square-side').value) || 0;
                area = side * side;
            } else if (shape === 'rectangle') {
                const length = parseFloat(document.getElementById('rectangle-length').value) || 0;
                const width = parseFloat(document.getElementById('rectangle-width').value) || 0;
                area = length * width;
            } else if (shape === 'circle') {
                const radius = parseFloat(document.getElementById('circle-radius').value) || 0;
                area = Math.PI * radius * radius;
            } else if (shape === 'triangle') {
                const base = parseFloat(document.getElementById('triangle-base').value) || 0;
                const height = parseFloat(document.getElementById('triangle-height').value) || 0;
                area = 0.5 * base * height;
            } else if (shape === 'trapezoid') {
                const base1 = parseFloat(document.getElementById('trapezoid-base1').value) || 0;
                const base2 = parseFloat(document.getElementById('trapezoid-base2').value) || 0;
                const height = parseFloat(document.getElementById('trapezoid-height').value) || 0;
                area = 0.5 * (base1 + base2) * height;
            }

            document.getElementById('result').textContent = `Area: ${area.toFixed(2)}`;
        }

        // Initial setup
        showInputs();
    </script>

</body>
</html>

Copy and paste into an editor like Notepad or Notepad++, save as index.html or area-calculator.html and open the html file with your browser.