Create a Scientific Calculator Using LWC

<template>
    <div class="calculator">
        <lightning-layout>
            <lightning-layout-item size="6" padding="around-small">
                <lightning-input type="text" label="Result" value={result} disabled></lightning-input>
            </lightning-layout-item>
    
        <div class="buttons">
           <lightning-layout-item size="6" padding="around-small"> 
            <div class="button-row">
            <lightning-button-group>
                <lightning-button label="7" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="8" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="9" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="/" onclick={handleButtonClick}></lightning-button>
            </lightning-button-group>
            </div>

            <div class="button-row">
            <lightning-button-group>
                <lightning-button label="4" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="5" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="6" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="-" onclick={handleButtonClick}></lightning-button>
            </lightning-button-group>
            </div>

            <div class="button-row">
            <lightning-button-group>
                <lightning-button label="1" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="2" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="3" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="+" onclick={handleButtonClick}></lightning-button>
            </lightning-button-group>
            </div>

            <div class="button-row">
            <lightning-button-group>
                <lightning-button label="0" onclick={handleButtonClick}></lightning-button>
                <lightning-button label="." onclick={handleButtonClick}></lightning-button>
                <lightning-button label="C" onclick={clearResult}></lightning-button>
                <lightning-button label="=" onclick={calculateResult}></lightning-button>
            </lightning-button-group>
            </div>
           </lightning-layout-item>

           <lightning-layout-item size="6" padding="around-small">
            <div class="button-row">
            <lightning-button-group>
                <lightning-button label="sin" onclick={handleTrigFunction}></lightning-button>
                <lightning-button label="cos" onclick={handleTrigFunction}></lightning-button>
                <lightning-button label="tan" onclick={handleTrigFunction}></lightning-button>
                <lightning-button label="^" onclick={handleButtonClick}></lightning-button>
            </lightning-button-group>
            </div>
           </lightning-layout-item>

        </div>
        </lightning-layout>
    </div>
</template>

import { LightningElement, track } from 'lwc';

export default class ScientificCalculator extends LightningElement {
    @track result = '';

    handleButtonClick(event) {
        const buttonValue = event.target.label;
        this.result += buttonValue;
    }

    clearResult() {
        this.result = '';
    }

    calculateResult() {
        try {
            this.result = eval(this.result);
        } catch (error) {
            this.result = 'Error';
        }
    }

    handleTrigFunction(event) {
        const trigFunction = event.target.label;
        const angle = parseFloat(prompt(`Enter the angle in degrees for ${trigFunction}`));

        if (!isNaN(angle)) {
            const radians = (angle * Math.PI) / 180;

            switch (trigFunction) {
                case 'sin':
                    this.result = Math.sin(radians).toFixed(1);
                    break;
                case 'cos':
                    this.result = Math.cos(radians).toFixed(1);
                    break;
                case 'tan':
                    this.result = Math.tan(radians).toFixed(1);
                    break;
                default:
                    break;
            }
        } else {
            this.result = 'Invalid input';
        }
    }
}

.calculator {
    max-width: 400px;
    margin: auto;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.lightning-input {
    margin-bottom: 16px;
    font-size: 1.5em;
    text-align: right;
}

.buttons {
    display: flex;
    flex-direction: column;
}

.button-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.lightning-button {
    font-size: 1.2em;
    padding: 15px;
    flex: 1;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.lightning-button:hover {
    background-color: #ccc;
}

/* Optional: Add styling for different button types */
.lightning-button[onclick*=handleTrigFunction] {
    background-color: #4caf50; /* Green */
    color: white;
}

.lightning-button[onclick*=handleButtonClick] {
    background-color: #008CBA; /* Blue */
    color: white;
}

.lightning-button[onclick*=clearResult] {
    background-color: #f44336; /* Red */
    color: white;
}

.lightning-button[onclick*=calculateResult] {
    background-color: #4CAF50; /* Green */
    color: white;
}