Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
        <style>
                body {
                                display: flex;
                                            justify-content: center;
                                                        align-items: center;
                                                                    height: 100vh;
                                                                                background-color: #f4f4f4;
                                                                                            font-family: Arial, sans-serif;
                }

                        .calculator {
                                        background: #222;
                                                    padding: 20px;
                                                                border-radius: 10px;
                                                                            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
                        }

                                #display {
                                                width: 100%;
                                                            height: 50px;
                                                                        font-size: 22px;
                                                                                    margin-bottom: 10px;
                                                                                                text-align: right;
                                                                                                            padding-right: 10px;
                                                                                                                        border: none;
                                                                                                                                    border-radius: 5px;
                                }

                                        .buttons {
                                                        display: grid;
                                                                    grid-template-columns: repeat(4, 60px);
                                                                                gap: 10px;
                                        }

                                                button {
                                                                height: 50px;
                                                                            font-size: 18px;
                                                                                        border: none;
                                                                                                    border-radius: 5px;
                                                                                                                cursor: pointer;
                                                }

                                                        button:hover {
                                                                        opacity: 0.8;
                                                        }

                                                                .operator {
                                                                                background-color: orange;
                                                                                            color: white;
                                                                }

                                                                        .equal {
                                                                                        background-color: green;
                                                                                                    color: white;
                                                                        }

                                                                                .clear {
                                                                                                background-color: red;
                                                                                                            color: white;
                                                                                }
                                                                                    </style>
                                                                                    </head>
                                                                                    <body>

                                                                                    <div class="calculator">
                                                                                        <input type="text" id="display" disabled>

                                                                                            <div class="buttons">
                                                                                                    <button onclick="clearDisplay()" class="clear">C</button>
                                                                                                            <button onclick="appendValue('%')" class="operator">%</button>
                                                                                                                    <button onclick="appendValue('/')" class="operator">/</button>
                                                                                                                            <button onclick="appendValue('*')" class="operator">*</button>

                                                                                                                                    <button onclick="appendValue('7')">7</button>
                                                                                                                                            <button onclick="appendValue('8')">8</button>
                                                                                                                                                    <button onclick="appendValue('9')">9</button>
                                                                                                                                                            <button onclick="appendValue('-')" class="operator">-</button>

                                                                                                                                                                    <button onclick="appendValue('4')">4</button>
                                                                                                                                                                            <button onclick="appendValue('5')">5</button>
                                                                                                                                                                                    <button onclick="appendValue('6')">6</button>
                                                                                                                                                                                            <button onclick="appendValue('+')" class="operator">+</button>

                                                                                                                                                                                                    <button onclick="appendValue('1')">1</button>
                                                                                                                                                                                                            <button onclick="appendValue('2')">2</button>
                                                                                                                                                                                                                    <button onclick="appendValue('3')">3</button>
                                                                                                                                                                                                                            <button onclick="calculate()" class="equal">=</button>

                                                                                                                                                                                                                                    <button onclick="appendValue('0')" style="grid-column: span 2;">0</button>
                                                                                                                                                                                                                                            <button onclick="appendValue('.')">.</button>
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                                                <script>
                                                                                                                                                                                                                                                    function appendValue(value) {
                                                                                                                                                                                                                                                                document.getElementById("display").value += value;
                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                        function clearDisplay() {
                                                                                                                                                                                                                                                                    document.getElementById("display").value = "";
                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                            function calculate() {
                                                                                                                                                                                                                                                                        try {
                                                                                                                                                                                                                                                                                        document.getElementById("display").value = 
                                                                                                                                                                                                                                                                                                        eval(document.getElementById("display").value);
                                                                                                                                                                                                                                                                        } catch {
                                                                                                                                                                                                                                                                                        alert("Invalid Expression");
                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                            </script>

                                                                                                                                                                                                                                                            </body>
                                                                                                                                                                                                                                                            </html>
                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                    }
                                                                                }
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
Editor is loading...