Geometry Calculator Design using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023

In this article, we will see how to design a Geometry Calculator using HTML, CSS, and JavaScript. A Geometry calculator is used to calculate the area and parameters of different shapes and figures, like circles, rectangles, squares, triangles, etc. This can be helpful in cases where one wants to calculate the circumference or the area covered by any geometrical figure. In this article, we will learn how to create a geometry calculator that can calculate the area and parameters of geometrical shapes of rectangles, circles, and triangles.

Preview

Approach

Make a dropdown menu that allows the user to select a geometric shape, such as a rectangle, triangle, or circle.
Now, provide input fields for length, breadth, and height, depending on the shape that you have selected.
Clicks on the “Calculate” button, the function will determine the result for the selected shape.
When the user selects a different shape after clicking on the “Calculate” button, the results are shown by clicking again on calculate button.

Example: In this example, we will see how to design a geometry calculator by using HTML CSS javascript.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Geometry Calculator Design using 
        HTML CSS and JavaScript
    </title>
 
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
 
        .calculator {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }
 
        #input-fields {
            width: 100%;
            text-align: left;
        }
 
        .input-container {
            margin: 20px 0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex: 1;
            width: 100%;
            position: relative;
        }
 
        input {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            position: absolute;
            right: 0;
            top: 5px;
        }
 
        h1 {
            margin: 0;
            color: #333;
        }
 
        #results {
            display: none;
        }
 
        button {
            text-align: center;
        }
 
        .selector {
            flex-direction: row;
            justify-content: space-between;
        }
 
        #results {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="calculator">
        <h1>Geometry Calculator</h1>
        <div class="input-container selector">
            <label for="shape">Select a shape:</label>
            <select id="shape" onchange="selectShape()">
                <option value="triangle">Triangle</option>
                <option value="circle">Circle</option>
                <option value="rectangle">Rectangle</option>
                <option value="square">Square</option>
                <option value="parallelogram">
                    Parallelogram
                </option>
            </select>
        </div>
        <div id="input-fields">
            <div class="input-container" id="length-div">
                <label for="length">Length:</label>
                <input type="number" id="length">
            </div>
            <div class="input-container" id="width-div">
                <label for="width">Width:</label>
                <input type="number" id="width">
            </div>
            <div class="input-container" id="base-div">
                <label for="base">Base:</label>
                <input type="number" id="base">
            </div>
            <div class="input-container" id="height-div">
                <label for="height">Height:</label>
                <input type="number" id="height">
            </div>
            <div class="input-container" id="radius-div">
                <label for="radius">Radius:</label>
                <input type="number" id="radius">
            </div>
        </div>
        <div>
            <button id="calculate-btn">Calculate</button>
        </div>
        <div id="results">
            <p id="area">Area: 0</p>
            <p id="perimeter">Perimeter: 0</p>
        </div>
    </div>
 
    <script>
        function selectShape() {
            resetResults()
 
            const shape = document.getElementById("shape").value;
            document.getElementById("input-fields").style.display = "block";
 
            const divs = [
                "length-div", "width-div", "base-div", 
                "height-div", "radius-div"
            ];
             
            for (const div of divs) {
                document.getElementById(div).style.display = "none";
            }
 
            if (shape === "rectangle") {
                document.getElementById("length-div").style.display = "block";
                document.getElementById("width-div").style.display = "block";
            } else if (shape === "triangle") {
                document.getElementById("base-div").style.display = "block";
                document.getElementById("height-div").style.display = "block";
            } else if (shape === "circle") {
                document.getElementById("radius-div").style.display = "block";
            } else if (shape === "square") {
                document.getElementById("length-div").style.display = "block";
                document.getElementById("width-div").style.display = "block";
            } else if (shape === "parallelogram") {
                document.getElementById("base-div").style.display = "block";
                document.getElementById("height-div").style.display = "block";
            }
        }
 
        function calculate() {
            const shape = 
                document.getElementById("shape").value;
            const areaElement = 
                document.getElementById("area");
            const perimeterElement = 
                document.getElementById("perimeter");
 
            let area, perimeter;
 
            if (shape === "rectangle") {
                const length = parseFloat(
                    document.getElementById("length").value);
                const width = parseFloat(
                    document.getElementById("width").value);
                area = length * width;
                perimeter = 2 * (length + width);
            } else if (shape === "triangle") {
                const base = parseFloat(
                    document.getElementById("base").value);
                const height = parseFloat(
                    document.getElementById("height").value);
                area = 0.5 * base * height;
                perimeter = base + 2 * Math.sqrt(
                    Math.pow(height, 2) + Math.pow(base / 2, 2));
            } else if (shape === "circle") {
                const radius = parseFloat(
                    document.getElementById("radius").value);
                area = Math.PI * Math.pow(radius, 2);
                perimeter = 2 * Math.PI * radius;
            } else if (shape === "square") {
                const side = parseFloat(
                    document.getElementById("length").value);
                area = side * side;
                perimeter = 4 * side;
            } else if (shape === "parallelogram") {
                const base = parseFloat(
                    document.getElementById("base").value);
                const height = parseFloat(
                    document.getElementById("height").value);
                area = base * height;
                perimeter = 2 * (base + height);
            }
 
            areaElement.textContent = 
                `Area: ${area.toFixed(2)}`;
            perimeterElement.textContent = 
                `Perimeter: ${perimeter.toFixed(2)}`;
            document.getElementById("results")
                .style.display = "block";
        }
 
        function resetResults() {
            document.getElementById("results")
                .style.display = "none";
        }
 
        document.getElementById('calculate-btn')
            .addEventListener('click', () => {
                calculate()
            });
 
        selectShape();
    </script>
</body>
 
</html>