Geometry Calculator Write A Program That Displays The Following Menu

This guide will walk you through creating a geometry calculator program that displays a menu in HTML, CSS, and JavaScript. We'll cover the basic structure, styling, and functionality needed to build a working calculator interface.

Introduction

Creating a geometry calculator with a menu-driven interface involves several key components: HTML for structure, CSS for styling, and JavaScript for functionality. This guide will help you build a simple but effective calculator that displays a menu of geometry operations.

This calculator assumes basic knowledge of HTML, CSS, and JavaScript. If you're new to these technologies, consider learning the fundamentals before attempting to build this project.

Basic HTML Structure

The foundation of your geometry calculator is the HTML structure. Here's a basic template to start with:

<!DOCTYPE html>
<html>
<head>
    <title>Geometry Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator-container">
        <h1>Geometry Calculator</h1>
        <div class="menu">
            <button class="menu-item" data-operation="area">Calculate Area</button>
            <button class="menu-item" data-operation="perimeter">Calculate Perimeter</button>
            <button class="menu-item" data-operation="volume">Calculate Volume</button>
        </div>
        <div class="calculator-form">
            <!-- Form elements will be added here -->
        </div>
        <div class="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This basic structure includes a container for the calculator, a heading, a menu with three buttons, a form area, and a result display area. The JavaScript will handle the dynamic content based on menu selections.

CSS Styling

To make your calculator visually appealing, you'll need some CSS. Here's a basic stylesheet to get you started:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

.calculator-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #2c3e50;
    text-align: center;
}

.menu {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.menu-item {
    padding: 10px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.menu-item:hover {
    background-color: #2980b9;
}

.calculator-form {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.calculator-form input {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    box-sizing: border-box;
}

.result {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    min-height: 50px;
}

This CSS provides a clean, modern look for your calculator. You can customize colors, fonts, and spacing to match your preferences. The styling includes a responsive layout that works on different screen sizes.

JavaScript Functionality

The JavaScript handles the dynamic behavior of your calculator. Here's a basic implementation that responds to menu selections:

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu-item');
    const calculatorForm = document.querySelector('.calculator-form');
    const resultDiv = document.querySelector('.result');

    // Menu item click handler
    menuItems.forEach(item => {
        item.addEventListener('click', function() {
            const operation = this.getAttribute('data-operation');
            displayForm(operation);
        });
    });

    // Display the appropriate form based on selected operation
    function displayForm(operation) {
        calculatorForm.innerHTML = '';

        switch(operation) {
            case 'area':
                calculatorForm.innerHTML = `
                    <h2>Calculate Area</h2>
                    <div>
                        <label for="shape">Select Shape:</label>
                        <select id="shape">
                            <option value="square">Square</option>
                            <option value="rectangle">Rectangle</option>
                            <option value="circle">Circle</option>
                        </select>
                    </div>
                    <div id="shape-inputs"></div>
                    <button id="calculate-btn">Calculate</button>
                `;
                setupShapeInputs();
                break;

            case 'perimeter':
                calculatorForm.innerHTML = `
                    <h2>Calculate Perimeter</h2>
                    <div>
                        <label for="shape">Select Shape:</label>
                        <select id="shape">
                            <option value="square">Square</option>
                            <option value="rectangle">Rectangle</option>
                            <option value="circle">Circle</option>
                        </select>
                    </div>
                    <div id="shape-inputs"></div>
                    <button id="calculate-btn">Calculate</button>
                `;
                setupShapeInputs();
                break;

            case 'volume':
                calculatorForm.innerHTML = `
                    <h2>Calculate Volume</h2>
                    <div>
                        <label for="shape">Select Shape:</label>
                        <select id="shape">
                            <option value="cube">Cube</option>
                            <option value="rectangular-prism">Rectangular Prism</option>
                            <option value="cylinder">Cylinder</option>
                        </select>
                    </div>
                    <div id="shape-inputs"></div>
                    <button id="calculate-btn">Calculate</button>
                `;
                setupShapeInputs();
                break;
        }

        // Add event listener to calculate button
        document.getElementById('calculate-btn').addEventListener('click', calculate);
    }

    // Set up inputs based on selected shape
    function setupShapeInputs() {
        const shapeSelect = document.getElementById('shape');
        const shapeInputs = document.getElementById('shape-inputs');

        shapeSelect.addEventListener('change', function() {
            const selectedShape = this.value;

            switch(selectedShape) {
                case 'square':
                    shapeInputs.innerHTML = `
                        <div>
                            <label for="side">Side Length:</label>
                            <input type="number" id="side" min="0" step="0.01">
                        </div>
                    `;
                    break;

                case 'rectangle':
                    shapeInputs.innerHTML = `
                        <div>
                            <label for="length">Length:</label>
                            <input type="number" id="length" min="0" step="0.01">
                        </div>
                        <div>
                            <label for="width">Width:</label>
                            <input type="number" id="width" min="0" step="0.01">
                        </div>
                    `;
                    break;

                case 'circle':
                    shapeInputs.innerHTML = `
                        <div>
                            <label for="radius">Radius:</label>
                            <input type="number" id="radius" min="0" step="0.01">
                        </div>
                    `;
                    break;

                case 'cube':
                    shapeInputs.innerHTML = `
                        <div>
                            <label for="edge">Edge Length:</label>
                            <input type="number" id="edge" min="0" step="0.01">
                        </div>
                    `;
                    break;

                case 'rectangular-prism':
                    shapeInputs.innerHTML = `
                        <div>
                            <label for="length">Length:</label>
                            <input type="number" id="length" min="0" step="0.01">
                        </div>
                        <div>
                            <label for="width">Width:</label>
                            <input type="number" id="width" min="0" step="0.01">
                        </div>
                        <div>
                            <label for="height">Height:</label>
                            <input type="number" id="height" min="0" step="0.01">
                        </div>
                    `;
                    break;

                case 'cylinder':
                    shapeInputs.innerHTML = `
                        <div>
                            <label for="radius">Radius:</label>
                            <input type="number" id="radius" min="0" step="0.01">
                        </div>
                        <div>
                            <label for="height">Height:</label>
                            <input type="number" id="height" min="0" step="0.01">
                        </div>
                    `;
                    break;
            }
        });

        // Trigger change event to set initial inputs
        shapeSelect.dispatchEvent(new Event('change'));
    }

    // Calculate the result based on selected operation and shape
    function calculate() {
        const operation = document.querySelector('.menu-item.active')?.getAttribute('data-operation');
        const shape = document.getElementById('shape').value;
        let result = 0;

        switch(operation) {
            case 'area':
                switch(shape) {
                    case 'square':
                        const side = parseFloat(document.getElementById('side').value);
                        result = side * side;
                        break;

                    case 'rectangle':
                        const length = parseFloat(document.getElementById('length').value);
                        const width = parseFloat(document.getElementById('width').value);
                        result = length * width;
                        break;

                    case 'circle':
                        const radius = parseFloat(document.getElementById('radius').value);
                        result = Math.PI * radius * radius;
                        break;
                }
                resultDiv.innerHTML = `<h3>Area: ${result.toFixed(2)} square units</h3>`;
                break;

            case 'perimeter':
                switch(shape) {
                    case 'square':
                        const side = parseFloat(document.getElementById('side').value);
                        result = 4 * side;
                        break;

                    case 'rectangle':
                        const length = parseFloat(document.getElementById('length').value);
                        const width = parseFloat(document.getElementById('width').value);
                        result = 2 * (length + width);
                        break;

                    case 'circle':
                        const radius = parseFloat(document.getElementById('radius').value);
                        result = 2 * Math.PI * radius;
                        break;
                }
                resultDiv.innerHTML = `<h3>Perimeter: ${result.toFixed(2)} units</h3>`;
                break;

            case 'volume':
                switch(shape) {
                    case 'cube':
                        const edge = parseFloat(document.getElementById('edge').value);
                        result = edge * edge * edge;
                        break;

                    case 'rectangular-prism':
                        const length = parseFloat(document.getElementById('length').value);
                        const width = parseFloat(document.getElementById('width').value);
                        const height = parseFloat(document.getElementById('height').value);
                        result = length * width * height;
                        break;

                    case 'cylinder':
                        const radius = parseFloat(document.getElementById('radius').value);
                        const height = parseFloat(document.getElementById('height').value);
                        result = Math.PI * radius * radius * height;
                        break;
                }
                resultDiv.innerHTML = `<h3>Volume: ${result.toFixed(2)} cubic units</h3>`;
                break;
        }
    }

    // Highlight active menu item
    menuItems.forEach(item => {
        item.addEventListener('click', function() {
            menuItems.forEach(i => i.classList.remove('active'));
            this.classList.add('active');
        });
    });
});

This JavaScript code handles the dynamic behavior of your calculator. It listens for menu item clicks, displays the appropriate form based on the selected operation, and calculates the result when the calculate button is clicked. The code includes input validation and proper formatting of results.

Complete Example

Here's a complete example of a geometry calculator with a menu-driven interface:

<!DOCTYPE html>
<html>
<head>
    <title>Geometry Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .calculator-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
        }

        .menu {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }

        .menu-item {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .menu-item:hover {
            background-color: #2980b9;
        }

        .menu-item.active {
            background-color: #2c3e50;
        }

        .calculator-form {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .calculator-form div {
            margin-bottom: 10px;
        }

        .calculator-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .calculator-form input, .calculator-form select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        #calculate-btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }

        #calculate-btn:hover {
            background-color: #27ae60;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            min-height: 50px;
        }

        .result h3 {
            margin: 0;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="calculator-container">
        <h1>Geometry Calculator</h1>
        <div class="menu">
            <button class="menu-item active" data-operation="area">Calculate Area</button>
            <button class="menu-item" data-operation="perimeter">Calculate Perimeter</button>
            <button class="menu-item" data-operation="volume">Calculate Volume</button>
        </div>
        <div class="calculator-form">
            <h2>Calculate Area</h2>
            <div>
                <label for="shape">Select Shape:</label>
                <select id="shape">
                    <option value="square">Square</option>
                    <option value="rectangle">Rectangle</option>
                    <option value="circle">Circle</option>
                </select>
            </div>
            <div id="shape-inputs">
                <div>
                    <label for="side">Side Length:</label>
                    <input type="number" id="side" min="0" step="0.01">
                </div>
            </div>
            <button id="calculate-btn">Calculate</button>
        </div>
        <div class="result"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuItems = document.querySelectorAll('.menu-item');
            const calculatorForm = document.querySelector('.calculator-form');
            const resultDiv = document.querySelector('.result');

            // Menu item click handler
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    const operation = this.getAttribute('data-operation');
                    displayForm(operation);
                });
            });

            // Display the appropriate form based on selected operation
            function displayForm(operation) {
                calculatorForm.innerHTML = '';

                switch(operation) {
                    case 'area':
                        calculatorForm.innerHTML = `
                            <h2>Calculate Area</h2>
                            <div>
                                <label for="shape">Select Shape:</label>
                                <select id="shape">
                                    <option value="square">Square</option>
                                    <option value="rectangle">Rectangle</option>
                                    <option value="circle">Circle</option>
                                </select>
                            </div>
                            <div id="shape-inputs"></div>
                            <button id="calculate-btn">Calculate</button>
                        `;
                        setupShapeInputs();
                        break;

                    case 'perimeter':
                        calculatorForm.innerHTML = `
                            <h2>Calculate Perimeter</h2>
                            <div>
                                <label for="shape">Select Shape:</label>
                                <select id="shape">
                                    <option value="square">Square</option>
                                    <option value="rectangle">Rectangle</option>
                                    <option value="circle">Circle</option>
                                </select>
                            </div>
                            <div id="shape-inputs"></div>
                            <button id="calculate-btn">Calculate</button>
                        `;
                        setupShapeInputs();
                        break;

                    case 'volume':
                        calculatorForm.innerHTML = `
                            <h2>Calculate Volume</h2>
                            <div>
                                <label for="shape">Select Shape:</label>
                                <select id="shape">
                                    <option value="cube">Cube</option>
                                    <option value="rectangular-prism">Rectangular Prism</option>
                                    <option value="cylinder">Cylinder</option>
                                </select>
                            </div>
                            <div id="shape-inputs"></div>
                            <button id="calculate-btn">Calculate</button>
                        `;
                        setupShapeInputs();
                        break;
                }

                // Add event listener to calculate button
                document.getElementById('calculate-btn').addEventListener('click', calculate);
            }

            // Set up inputs based on selected shape
            function setupShapeInputs() {
                const shapeSelect = document.getElementById('shape');
                const shapeInputs = document.getElementById('shape-inputs');

                shapeSelect.addEventListener('change', function() {
                    const selectedShape = this.value;

                    switch(selectedShape) {
                        case 'square':
                            shapeInputs.innerHTML = `
                                <div>
                                    <label for="side">Side Length:</label>
                                    <input type="number" id="side" min="0" step="0.01">
                                </div>
                            `;
                            break;

                        case 'rectangle':
                            shapeInputs.innerHTML = `
                                <div>
                                    <label for="length">Length:</label>
                                    <input type="number" id="length" min="0" step="0.01">
                                </div>
                                <div>
                                    <label for="width">Width:</label>
                                    <input type="number" id="width" min="0" step="0.01">
                                </div>
                            `;
                            break;

                        case 'circle':
                            shapeInputs.innerHTML = `
                                <div>
                                    <label for="radius">Radius:</label>
                                    <input type="number" id="radius" min="0" step="0.01">
                                </div>
                            `;
                            break;

                        case 'cube':
                            shapeInputs.innerHTML = `
                                <div>
                                    <label for="edge">Edge Length:</label>
                                    <input type="number" id="edge" min="0" step="0.01">
                                </div>
                            `;
                            break;

                        case 'rectangular-prism':
                            shapeInputs.innerHTML = `
                                <div>
                                    <label for="length">Length:</label>
                                    <input type="number" id="length" min="0" step="0.01">
                                </div>
                                <div>
                                    <label for="width">Width:</label>
                                    <input type="number" id="width" min="0" step="0.01">
                                </div>
                                <div>
                                    <label for="height">Height:</label>
                                    <input type="number" id="height" min="0" step="0.01">
                                </div>
                            `;
                            break;

                        case 'cylinder':
                            shapeInputs.innerHTML = `
                                <div>
                                    <label for="radius">Radius:</label>
                                    <input type="number" id="radius" min="0" step="0.01">
                                </div>
                                <div>
                                    <label for="height">Height:</label>
                                    <input type="number" id="height" min="0" step="0.01">
                                </div>
                            `;
                            break;
                    }
                });

                // Trigger change event to set initial inputs
                shapeSelect.dispatchEvent(new Event('change'));
            }

            // Calculate the result based on selected operation and shape
            function calculate() {
                const operation = document.querySelector('.menu-item.active')?.getAttribute('data-operation');
                const shape = document.getElementById('shape').value;
                let result = 0;

                switch(operation) {
                    case 'area':
                        switch(shape) {
                            case 'square':
                                const side = parseFloat(document.getElementById('side').value);
                                result = side * side;
                                break;

                            case 'rectangle':
                                const length = parseFloat(document.getElementById('length').value);
                                const width = parseFloat(document.getElementById('width').value);
                                result = length * width;
                                break;

                            case 'circle':
                                const radius = parseFloat(document.getElementById('radius').value);
                                result = Math.PI * radius * radius;
                                break;
                        }
                        resultDiv.innerHTML = `<h3>Area: ${result.toFixed(2)} square units</h3>`;
                        break;

                    case 'perimeter':
                        switch(shape) {
                            case 'square':
                                const side = parseFloat(document.getElementById('side').value);
                                result = 4 * side;
                                break;

                            case 'rectangle':
                                const length = parseFloat(document.getElementById('length').value);
                                const width = parseFloat(document.getElementById('width').value);
                                result = 2 * (length + width);
                                break;

                            case 'circle':
                                const radius = parseFloat(document.getElementById('radius').value);
                                result = 2 * Math.PI * radius;
                                break;
                        }
                        resultDiv.innerHTML = `<h3>Perimeter: ${result.toFixed(2)} units</h3>`;
                        break;

                    case 'volume':
                        switch(shape) {
                            case 'cube':
                                const edge = parseFloat(document.getElementById('edge').value);
                                result = edge * edge * edge;
                                break;

                            case 'rectangular-prism':
                                const length = parseFloat(document.getElementById('length').value);
                                const width = parseFloat(document.getElementById('width').value);
                                const height = parseFloat(document.getElementById('height').value);
                                result = length * width * height;
                                break;

                            case 'cylinder':
                                const radius = parseFloat(document.getElementById('radius').value);
                                const height = parseFloat(document.getElementById('height').value);
                                result = Math.PI * radius * radius * height;
                                break;
                        }
                        resultDiv.innerHTML = `<h3>Volume: ${result.toFixed(2)} cubic units</h3>`;
                        break;
                }
            }

            // Highlight active menu item
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    menuItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>

This complete example includes all the components we've discussed: HTML structure, CSS styling, and JavaScript functionality. You can copy this code into a single HTML file and open it in your browser to see the calculator in action.

FAQ

What browsers does this calculator work in?

This calculator should work in all modern browsers including Chrome, Firefox, Safari, and Edge. It uses standard HTML, CSS, and JavaScript that's supported by these browsers.

Can I add more shapes to the calculator?

Yes, you can easily add more shapes by extending the switch statements in the JavaScript code. Just add new cases for each shape and include the appropriate input fields and calculation formulas.

How can I make the calculator more visually appealing?

You can enhance the visual design by adding more CSS styles, using different colors, adding animations, or incorporating images. The calculator's functionality will remain the same regardless of the visual changes.

Is there a way to save calculations?

You could add local storage functionality to save calculations, but this would require additional JavaScript code. The current implementation focuses on the core calculator functionality without additional features.