https://anshulpro.github.io/other/Embedded%20Calculator/calculate_now.js

1//display ids
2let secondaryDisplayString = "";
3let primaryDisplayString = "";
4const secondaryDisplayId = document.getElementById("display_screen_text_secondary");
5const primaryDisplayId = document.getElementById("display_screen_text_primary");
6
7let isEqualsToPressed = false;
8
9//function to render the secondary text on the display
10function showSecondaryDisplay() {
11    secondaryDisplayId.textContent = secondaryDisplayString || "0";
12}
13
14//the two functions will run the first time just to display the default 0 on the display
15showSecondaryDisplay();
16showPrimaryDisplay();
17
18//function to make the commas as per indian local standards
19function standardStringNotation(string) {
20    let num = Number(string).toLocaleString('en-IN');
21    return String(num);
22} 
23
24//function to render the primary text on the display
25function showPrimaryDisplay() {
26    primaryDisplayId.textContent = standardStringNotation(primaryDisplayString) || "0";
27    isEqualsToPressed = true;
28}
29
30
31//the switch cases for the number and decimal buttons
32const gridContainerNumbers = document.getElementById('grid-container-numbers');
33gridContainerNumbers.onclick = (event) =>{
34    switch(event.target.id){
35        case 'number1': secondaryDisplayString += "1";
36                        break;
37        case 'number2': secondaryDisplayString += "2";
38                        break;
39        case 'number3': secondaryDisplayString += "3";
40                        break;
41        case 'number4': secondaryDisplayString += "4";
42                        break;
43        case 'number5': secondaryDisplayString += "5";
44                        break;
45        case 'number6': secondaryDisplayString += "6";
46                        break;
47        case 'number7': secondaryDisplayString += "7";
48                        break;
49        case 'number8': secondaryDisplayString += "8";
50                        break;
51        case 'number9': secondaryDisplayString += "9";
52                        break;
53        case 'number0': secondaryDisplayString += "0";
54                        break;
55        case 'number00': secondaryDisplayString += "00";
56                        break;
57        case 'number000': secondaryDisplayString += "000";
58                        break;
59        case 'decimal': secondaryDisplayString += ".";
60                        break;
61    }
62    showSecondaryDisplay();
63}
64
65//capturing input keyboard keys 
66document.onkeydown = (event) => {
67    if(calculateParent.classList.contains('visible')){
68        //numbers, decimals, operators
69        const allowedKeys = "0123456789.+-*/";
70        if (allowedKeys.includes(event.key)) {
71            secondaryDisplayString += event.key;
72            showSecondaryDisplay();
73        }
74
75        //equalTo button
76        else if(event.key == "="){

77            if(/[+\-*/]/.test(secondaryDisplayString)){
78                primaryDisplayString = eval(secondaryDisplayString).toFixed(2);
79                showPrimaryDisplay();
80            }
81        }
82
83        //Delete button
84        else if(event.key == "Backspace"){
85            if(secondaryDisplayString.length > 0){
86                secondaryDisplayString = secondaryDisplayString.slice(0, -1);
87                showSecondaryDisplay();
88            }
89        }
90
91        //AC button
92        else if(event.key == "Clear"){
93            if(secondaryDisplayString.length > 0){
94                secondaryDisplayString = "";
95                showSecondaryDisplay();
96                primaryDisplayString = "";
97                showPrimaryDisplay();
98            }
99        }
100    }
101};
102
103//adding event listeners on all the operators
104const gridContainerOperators = document.getElementById('grid-container-operator');
105gridContainerOperators.onclick = (event) =>{
106    if(event.target.id == "plusOperator")   
107        secondaryDisplayString += "+";
108    else if(event.target.id == "minusOperator")
109        secondaryDisplayString += "-";
110    else if(event.target.id == "divisionOperator")
111        secondaryDisplayString += "/";
112    else if(event.target.id == "multiplicationOperator")
113        secondaryDisplayString += "*";
114    showSecondaryDisplay();
115}
116
117
118//delete button to keep removing the last operand/operator pressed 
119const deleteButton = document.getElementById('deleteButton');
120deleteButton.onclick = () => {

121    if(secondaryDisplayString.length > 0){
122        secondaryDisplayString = secondaryDisplayString.slice(0, -1);
123        showSecondaryDisplay();
124    }
125}
126
127//AC or all clear button to delete the current display and reset 
128const clearCurrentCalculationButton = document.getElementById('clearCurrentCalculationButton');
129clearCurrentCalculationButton.onclick = () => {
130    if(secondaryDisplayString.length >= 0 || primaryDisplayString.length >= 0){
131        secondaryDisplayString = "";
132        showSecondaryDisplay();
133        primaryDisplayString = "";
134        showPrimaryDisplay();
135    }
136}
137
138//adding event listeners on equalsTo button 
139const equalsTo = document.getElementById('equalsTo');
140equalsTo.onclick = () => {
141    //check if the there is an operator included or not
142    if(/[+\-*/]/.test(secondaryDisplayString)){
143        primaryDisplayString = eval(secondaryDisplayString);
144        if(Number(primaryDisplayString) % 1 !==0){
145            primaryDisplayString = String(Number(primaryDisplayString).toFixed(2));
146        }
147        showPrimaryDisplay();
148    } 
149    //last step would be to use the commas properly to show the evaluated sum
150}
151
152
153//when save button is pressed, the calculation is saved in the memory
154const calculationHistoryParent = document.getElementById('calculation_history');
155const saveCurrentCalculationButton = document.getElementById('save_current_calculation_button');
156saveCurrentCalculationButton.onclick = () => {
157    //when equalstobutton is pressed atleast once
158    if(isEqualsToPressed == true && secondaryDisplayString !=="" && primaryDisplayString !==""){
159        calculationHistoryParent.insertAdjacentHTML('afterbegin', `
160            <div class="calculation_history_container">
161                    <div class="calculation_history_item_dropdown"> 
162                        <button class="three_dot_icon_button"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
163                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19 19.75C19 18.9216 19.6716 18.25 20.5 18.25C21.3284 18.25 22 18.9216 22 19.75C22 20.5784 21.3284 21.25 20.5 21.25C19.6716 21.25 19 20.5784 19 19.75Z" fill="black" fill-opacity="0.4"/>
164                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19 14.5C19 13.6716 19.6716 13 20.5 13C21.3284 13 22 13.6716 22 14.5C22 15.3284 21.3284 16 20.5 16C19.6716 16 19 15.3284 19 14.5Z" fill="black" fill-opacity="0.4"/>
165                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19 25C19 24.1716 19.6716 23.5 20.5 23.5C21.3284 23.5 22 24.1716 22 25C22 25.8284 21.3284 26.5 20.5 26.5C19.6716 26.5 19 25.8284 19 25Z" fill="black" fill-opacity="0.4"/>
166                        </svg></button>
167                        <div class="calculation_history_item_dropdown_menu">
168                            <div class="calculation_history_item_dropdown_menu_item" data-action="useCalculations">Use this value</div>
169                            <div class="calculation_history_item_dropdown_menu_item" data-action="copyToClipboard">Copy</div>
170                            <div class="calculation_history_item_dropdown_menu_item" data-action="removeCalculation">Remove</div>
171                        </div>
172                    </div>
173                    <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 2px;">
174                        <div class="calculation_history_text_secondary">${secondaryDisplayString}</div>
175                        <div class="calculation_history_text_primary">${standardStringNotation(primaryDisplayString)}</div>
176                    </div>
177                </div>`);
178        secondaryDisplayString = "";
179        showSecondaryDisplay();
180        primaryDisplayString = "";
181        showPrimaryDisplay();
182    }
183}
184
185//when 3 dots button is clicked the dropdown opens
186const calculationHistoryList = document.getElementById('calculation_history');
187
188//input field 
189const inputField = document.getElementById('input_field');
190
191calculationHistoryList.onclick = (event) =>{
192  // Only respond if a three-dot button was clicked
193  if (event.target.parentNode.classList.contains('three_dot_icon_button')) {
194
195    // Find the dropdown for the clicked list item
196    const listItem = event.target.closest('div');
197    const specificdropdown = listItem.querySelector('.calculation_history_item_dropdown_menu');
198    specificdropdown.style.display = 'flex';
199
200    //option1 - "Use this value" passes the value from the history to the input field
201    const useThisValue = listItem.parentNode.querySelector('[data-action="useCalculations"]');
202    useThisValue.onclick = () => {
203        // cleanvalue is required since the value has commas which need to removed before passing to input field as it is of type number
204        inputField.value = listItem.parentNode.querySelector('.calculation_history_text_primary').textContent;
205    }
206    //option2 - "Copy" copies the final value to clipboard
207    const copyToClipboard = listItem.parentNode.querySelector('[data-action="copyToClipboard"]');
208    copyToClipboard.onclick = () =>{
209        navigator.clipboard.writeText(listItem.parentNode.querySelector('.calculation_history_text_primary').textContent)
210        .catch(err => {
211            console.error('Failed to copy: ', err);
212        });
213    }
214    //option3 - "remove" removes the current calculation history item 
215    const removeCalculation = listItem.parentNode.querySelector('[data-action="removeCalculation"]');
216    removeCalculation.onclick = () => {
217        removeCalculation.parentNode.parentNode.parentNode.remove();
218    }
219    // stop event bubbling
220    event.stopPropagation();
221  } 
222  // If clicked outside any three-dot button, close all dropdowns
223  else {
224    document.querySelectorAll('.calculation_history_item_dropdown_menu').forEach(menu => {
225      menu.style.display = 'none';
226    });
227  }
228};
229
230// Hide dropdowns if clicking outside the calculation history
231document.onclick = () => {
232    document.querySelectorAll('.calculation_history_item_dropdown_menu').forEach(menu => {
233        menu.style.display = 'none';
234    });
235};
236
237//toggle button on calculator icon
238const calculateParent = document.getElementById('calculate_parent');
239const calculateButton = document.getElementById('calculate_button');
240calculateButton.onclick = () => {
241    calculateButton.classList.toggle('calculate_button_OFF');
242    calculateButton.classList.toggle('calculate_button_ON');
243    calculateParent.classList.toggle('visible');
244    calculateParent.classList.toggle('hidden');
245}
246
247//when you want to insert the current calculation to the input field
248const useCurrentCalculationButton = document.getElementById('use_current_calculation_button');
249useCurrentCalculationButton.onclick = () => {
250    //when equalsTo button is pressed atleast once 

251    if(isEqualsToPressed == true && secondaryDisplayString !=="" && primaryDisplayString !==""){
252        inputField.value = standardStringNotation(primaryDisplayString);
253    }
254}