Untitled

import React, { useState } from "react";

function Calculator() {
    const [input, setInput] = useState("");
    const handleClick = (value) => {
        setInput((prev) => prev + value);
    }
    const handleClear = () => {
        setInput("");
    }
    const handleCalculate = () => {
        try {
            setInput(eval(input).toString());
        }
        catch (error) {
            console.error(error);
        }
    }
    return (
        <div style={styles.container}>
            <div style={styles.display}>{input || 0}</div>
            <div style={styles.buttons}>
                <button onClick={handleClear}>C</button>
                <button onClick={() => handleClick("/")}>/</button>
                <button onClick={() => handleClick("*")}>*</button>
                <button onClick={() => handleClick("-")}>-</button>

                <button onClick={() => handleClick("7")}>7</button>
                <button onClick={() => handleClick("8")}>8</button>
                <button onClick={() => handleClick("9")}>9</button>
                <button onClick={() => handleClick("+")}>+</button>

                <button onClick={() => handleClick("4")}>4</button>
                <button onClick={() => handleClick("5")}>5</button>
                <button onClick={() => handleClick("6")}>6</button>
                <button style={styles.equals} onClick={handleCalculate}>=</button>

                <button onClick={() => handleClick("1")}>1</button>
                <button onClick={() => handleClick("2")}>2</button>
                <button onClick={() => handleClick("3")}>3</button>
                <button onClick={() => handleClick("0")}>0</button>
                <button onClick={() => handleClick(".")}>.</button>
            </div>
        </div>
    ); 
}

const styles = {
    container: {
        width : "250px",
        margin : "50px auto",
        border : "2px solid #333",
        borderRadius : "8px",
        overflow : "hidden",
        fontFamily : "Arial, sans-serif"
    },
    display: {
        background : "#222",
        color : "white",
        fontSize : "2em",
        textAlign : "right",
        padding : "10px"
    },
    buttons: {
        display : "grid",
        gridTemplateColumns : "repeat(4, 1fr)",
        gap : "5px",
        padding : "10px"
    },
    equals: {
        gridRow: "span 2",
        background : "#4CAF50",
        color : "white"
    }
};

export default Calculator;