Skomplikowany kalkulator w js

0

Witam, mam problem, ponieważ nie wiem jak napisać funkcje:
1.która będzie mi wstawiać znak - przed liczbą ( przycisk " +- " ),
2.która będzie usuwać element(pojedynczo) ( przycisk " <- "),
3.która będzie liczyć wartości w nawiasie np, (2+2)/2 ( przyciski: "(" ")" )
Resztę funkcji do typowych działań napisałem, ewentualnie proszę o naniesienie poprawek do kodu ( tak by działał :) )

<!doctype html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="calculator.css">
</head>

<body>
    <div class="calculator">

        <input type="text" class="calculator-screen" id="content" value="" disabled />

        <div class="calculator-odnosniki">

            <button type="button" class="czyszczenie" value="wyczysc">C</button>
            <button type="button" class="operator" style="font-size: 80px;" value="<-">⃖</button>
            <button type="button" class="operator" value="^">x⊃</button>
            <button type="button" class="operator" value="%">%</button>
            <button type="button" class="operator" value="(">❨</button>
            <button type="button" class="operator" value=")">❩</button>
            <button type="button" class="operator" value="pierwiastek">√</button>
            <button type="button" class="operator" value="*">×</button>
            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>
            <button type="button" class="operator" value="/">÷</button>
            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>
            <button type="button" class="operator" value="-">−</button>
            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>
            <button type="button" class="operator" value="+">&plus;</button>
            <button type="button" value="0">0</button>
            <button type="button" class="decimal" value=",">,</button>
            <button type="button" class="operator" value="+-">±</button>
            <button type="button" class="rownasie operator" value="=">=</button>

        </div>
    </div>
    <script>
        const calculator = {
            displayValue: '0',
            firstOperand: null,
            SecondOperand: false,
            operator: null,
        };

        function inputDigit(digit) {
            const {
                displayValue,
                SecondOperand
            } = calculator;

            if (SecondOperand === true) {
                calculator.displayValue = digit;
                calculator.SecondOperand = false;
            } else {
                calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
            }
        }

        function inputDecimal(dot) {
            if (calculator.SecondOperand === true) return;

            if (!calculator.displayValue.includes(dot)) {

                calculator.displayValue += dot;
            }
        }

        function handOperator(nextOperator) {
            const {
                firstOperand,
                displayValue,
                operator
            } = calculator
            const inputValue = parseFloat(displayValue);

            if (operator && calculator.SecondOperand) {
                calculator.operator = nextOperator;
                return;
            }

            if (firstOperand == null) {
                calculator.firstOperand = inputValue;
            } else if (operator) {
                const currentValue = firstOperand || 0;
                const result = arthmeticValues[operator](currentValue, inputValue);

                calculator.displayValue = String(result);
                calculator.firstOperand = result;
            }

            calculator.SecondOperand = true;
            calculator.operator = nextOperator;
        }

        const arthmeticValues = {
            '/': (firstOperand, secondOperand) => firstOperand / secondOperand,

            '*': (firstOperand, secondOperand) => firstOperand * secondOperand,

            '+': (firstOperand, secondOperand) => firstOperand + secondOperand,

            '-': (firstOperand, secondOperand) => firstOperand - secondOperand,

            '^': (firstOperand, secondOperand) => Math.pow(firstOperand, secondOperand),

            'pierwiastek': (firstOperand, secondOperand) => Math.sqrt(secondOperand),

            '%': (firstOperand, secondOperand) => (parseInt(firstOperand) * 100) / parseInt(secondOperand),

            '=': (firstOperand, secondOperand) => secondOperand
        };

        function resetCalculator() {
            calculator.displayValue = '0';
            calculator.firstOperand = null;
            calculator.SecondOperand = false;
            calculator.operator = null;
        }

        function updateDisplay() {
            const display = document.querySelector('.calculator-screen');
            display.value = calculator.displayValue;
        }

        updateDisplay();

        const keys = document.querySelector('.calculator-odnosniki');
        keys.addEventListener('click', (event) => {
            const {
                target
            } = event;
            if (!target.matches('button')) {
                return;
            }

            if (target.classList.contains('operator')) {
                handOperator(target.value);
                updateDisplay();
                return;
            }

            if (target.classList.contains('decimal')) {
                inputDecimal(target.value);
                updateDisplay();
                return;
            }

            if (target.classList.contains('czyszczenie')) {
                resetCalculator();
                updateDisplay();
                return;
            }

            inputDigit(target.value);
            updateDisplay();
        });
    </script>
</body>

</html>


html {
    font-size: 70%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
}

.calculator-screen {
    width: 100%;
    font-size: 5rem;
    height: 80px;
    border: none;
    background-color: #c09ada;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
}

button {
    height: 60px;
    background-color: #a80054;
    border-radius: 3px;
    border: 2px solid #a80054;
    background-color: transparent;
    font-size: 2rem;
    color: #333;
    background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, .04));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 0 rgba(255, 255, 255, .15), 0 1px 0 0 rgba(255, 255, 255, .15);
    text-shadow: 0 1px rgba(255, 255, 255, .4);
}

button:hover {
    background-color: #f169d4;
}

.operator {
    color: #000000;
}

.czyszczenie {
    background-color: rgb(219, 157, 206);
    border-color: #a80054;
    color: #fff;
}

.czyszczenie:hover {
    background-color: #f169d4;
}

.rownasie {
    background-color: rgb(219, 157, 206);
    border-color: #a80054;
    color: rgb(0, 0, 0);
}

.rownasie:hover {
    background-color: #f169d4;
}

.calculator-odnosniki {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;
    color: #245233;
}
1
Hades Wiedźmin napisał(a):

3.która będzie liczyć wartości w nawiasie np, (2+2)/2 ( przyciski: "(" ")" )

Nie bardzo rozumiem o co Ci chodzi. Jeśli wstukujesz po kolej wartości jak na zwykłym tanim kalkulatorze, takim za 5zł, który Od razu liczy wartość to nawiasy nie mają sensu.
Nawiasy mają sens dopiero jak piszesz kalkulator taki za 50zł, gdzie wczytujesz string i go następnie parsujesz. W takim wypadku zalecam zapoznanie się z Odwrotną Notacją Polską i Algorytmem stacji rozrządowej

1
Hades Wiedźmin napisał(a):

Witam, mam problem, ponieważ nie wiem jak napisać funkcje:
1.która będzie mi wstawiać znak - przed liczbą ( przycisk " +- " ),
2.która będzie usuwać element(pojedynczo) ( przycisk " <- "),
3.która będzie liczyć wartości w nawiasie np, (2+2)/2 ( przyciski: "(" ")" )

https://pl.wikipedia.org/wiki/Odwrotna_notacja_polska

ONP bardzo ułatwia wykonywanie na komputerze obliczeń z nawiasami i zachowaniem kolejności działań. Zarówno algorytm konwersji notacji konwencjonalnej (infiksowej) na odwrotną notację polską (postfiksową), jak i algorytm obliczania wartości wyrażenia danego w ONP są bardzo proste i wykorzystują stos.

1 użytkowników online, w tym zalogowanych: 0, gości: 1