javaScriptCalculator/calculator.html at main · AmeliaES/javaScriptCalculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!-- html page to show calculator -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8 />
        <title>Calculator</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div data-cy="calculator" class="calculator">
            <div class="calc-text">
                <p data-cy="answer" id="answer"> </p>
            </div>

            <div class="operator-keys">
                <button data-cy="add" type="button" class="operator">+</button>
                <button data-cy="minus" type="button" class="operator">-</button>
                <button data-cy="multiply" type="button" class="operator">*</button>
                <button data-cy="divide" type="button" class="operator">/</button>
            </div>

            <div class="number-keys">
                <button data-cy="7" type="button" class="numbers">7</button>
                <button data-cy="8" type="button" class="numbers">8</button>
                <button data-cy="9" type="button" class="numbers">9</button>

                <button data-cy="4" type="button" class="numbers">4</button>
                <button data-cy="5" type="button" class="numbers">5</button>
                <button data-cy="6" type="button" class="numbers">6</button>

                <button data-cy="1" type="button" class="numbers">1</button>
                <button data-cy="2" type="button" class="numbers">2</button>
                <button data-cy="3" type="button" class="numbers">3</button>

                <button data-cy="0" type="button" class="zero">0</button>
                <button data-cy="decimal" type="button" class="decimal">.</button>
                <button data-cy="clear" type="button" class="clear">C</button>

            </div>

            <div class="equal-key">
                <button data-cy="equals" type="button" class="equals">=</button>
            </div>

        </div>

        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const display = document.getElementById("answer"); // Select the display
                const buttons = document.querySelectorAll("button");

                // Define sets for operators, numbers, and special keys
                const operators = new Set(['+', '-', '*', '/']);
                const numbers = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
                const decimal = new Set(['.']);
                const clear = new Set(['C']);
                const equals = new Set(['=']);

                // Variable to keep track of the current and previous input
                const inputField = {
                    display: display.textContent,
                    stringToEval: null,
                    currentValue: null,
                    previousValue: null,
                };

                buttons.forEach(button => {
                    button.addEventListener("click", () => {
                        // Update currentValue with the button clicked
                        inputField.currentValue = button.textContent;

                        // Print to console for debugging
                        console.log(`Before button logic: ${JSON.stringify(inputField)}`);

                        // - **Numbers**: if a user clicks on a number then there are some options depending on a few things:
                        //      - append that digit to the current display, ie. for making a number with multiple digits
                        //      - replace that number, ie. after clicking an opertator or equals button
                        if(numbers.has(inputField.currentValue)) {
                            // Starting a new calculation
                            if(inputField.display === ' ' || equals.has(inputField.previousValue)) {
                                // Update display with the number clicked
                                inputField.display = inputField.currentValue;
                                // Update the string to evaluate
                                inputField.stringToEval = inputField.currentValue;

                            // Appending a number to a current calculation, when previous button is an operator
                            } else if (operators.has(inputField.previousValue)) {
                                // Update the display with current number
                                inputField.display = inputField.currentValue;
                                // Update the string to evaluate
                                inputField.stringToEval += inputField.currentValue;

                            // Append number to string to make a multi digit number
                            } else if (numbers.has(inputField.previousValue) || decimal.has(inputField.previousValue)) {
                                // Append the number clicked to the display
                                inputField.display += inputField.currentValue;
                                inputField.stringToEval += inputField.currentValue;
                            }
                        } else if(operators.has(inputField.currentValue)) {
                            // - **Operators**: if a user clicks on an operator:
                            //      - append that operator to the string to evaluate only when the previous value is a number (not a decimal)
                            //      - however the display should not change, the previous number should stay the same at this point
                            //      - if the user clicks on the operator multiple times, ie ++++_*/ one after another then replace the last character (an operator character) with the operator that was last clicked.

                            if(operators.has(inputField.previousValue)) {
                                // Replace the last operator with the current operator
                                inputField.stringToEval = inputField.stringToEval.slice(0, -1) + inputField.currentValue;
                            } else if(numbers.has(inputField.previousValue) || equals.has(inputField.previousValue)) {
                                // Append the operator to the string to evaluate
                                inputField.stringToEval += inputField.currentValue;
                            }

                        } else if(decimal.has(inputField.currentValue)) {
                            // - **Decimal**: if a user clicks on decimal:
                            //     - append a decimal to string
                            //     - but only if the previous value is a number
                            //     - and not if there is already a decimal in the string
                            if( (numbers.has(inputField.previousValue) || equals.has(inputField.previousValue)) && !inputField.display.includes('.')) {
                                // Append the decimal to the display
                                inputField.display += inputField.currentValue;
                                // Append the decimal to the string to evaluate
                                inputField.stringToEval += inputField.currentValue;
                            }

                        } else if(clear.has(inputField.currentValue)) {
                            // - **Clear**: if a user clicks on clear:
                            //     - replace the display with empty white space or an empty string
                            //     - replace the string to evaluate with null
                            inputField.display = ' ';
                            inputField.stringToEval = null;

                        } else if(equals.has(inputField.currentValue)) {
                            // - **Equals**: if a user clicks on equals:
                            //     - evalulate that string
                            //     - but only evaluate if the last character is a number, it cannot be a "." or an operator character.
                            //     - replace the display with the result of the evaluation
                            if (numbers.has(inputField.previousValue)) {
                                // Check for division by zero
                                if (inputField.stringToEval.includes('/0')) {
                                    inputField.display = 'Undefined';
                                    // Update the string to evaluate
                                    inputField.stringToEval = null;
                                } else {
                                    // Evaluate the string
                                    inputField.display = eval(inputField.stringToEval).toString();
                                    // Update the string to evaluate
                                    inputField.stringToEval = inputField.display;
                                }

                            }
                        }

                        // Update previousValue ready for next button click
                        inputField.previousValue = inputField.currentValue;

                        // Update the display
                        display.textContent = inputField.display;

                        // Print to console for debugging
                        console.log(`After button logic: ${JSON.stringify(inputField)}`);
                    });
                });
            });

        </script>
    </body>
</html>