Calculator/myscript.js at main · Preethi-ST/Calculator · 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
//Key press event listener
document.addEventListener('keypress', (event) => {
    var name = event.key;
    //var code = event.code;
    // Alert the key name and key code on keydown
    if(isNaN(name) && name !== '+' && name !== '-' && name !== '*' && name !== '/'){
    alert(`Key pressed ${name} \n Enter only numbers`);}
   /*  return false;}
    else
    { return true;} */
  }, false);
 document.getElementsByClassName("main")[0].innerHTML =

    `<h3 class="tag"> My Calculator</h3><br>
    <div class="container">
        <div id="screen-container">
            <div id="display"></div>
        </div>
        <div class="buttons">
            <div class="btn-group-vertical">
                <button type="button" class="btn btn-info mt-2" id="one">1</button>
                <button type="button" class="btn btn-info mt-2" id="four">4</button>
                <button type="button" class="btn btn-info mt-2" id="seven">7</button>
                <button type="button" class="btn btn-info mt-2 operator" id="modulo">%</button>
                <button type="button" class="btn btn-info mt-2 operator" id="division">/</button>

            </div>
            <div class="btn-group-vertical">
                <button type="button" class="btn btn-info mt-2" id="two">2</button>
                <button type="button" class="btn btn-info mt-2" id="five">5</button>
                <button type="button" class="btn btn-info mt-2" id="eight">8</button>
                <button type="button" class="btn btn-info mt-2 operator" id="minus"> - </button>
                <button type="button" class="btn btn-info mt-2 operator" id="open"> ( </button>

            </div>
            <div class="btn-group-vertical">
                <button type="button" class="btn btn-info mt-2" id="three">3</button>
                <button type="button" class="btn btn-info mt-2" id="six">6</button>
                <button type="button" class="btn btn-info mt-2" id="nine">9</button>
                <button type="button" class="btn btn-info mt-2 operator" id="multiply">*</button>
                <button type="button" class="btn btn-info mt-2 operator" id="close"> ) </button>

            </div>
            <div class="btn-group-vertical">
            <button type="button" class="btn btn-info mt-2 operator" id="add"> + </button>
            <button type="button" class="btn btn-secondary mt-2 operator btn-width" id="equal"> = </button>
            <button type="button" class="btn btn-light mt-2 operator btn-width" id="clear"> C</button>


            </div>

        </div>
    </div>`;

 document.addEventListener("DOMContentLoaded",function(){
    let display_text = document.getElementById('display');
    console.log(display_text, typeof display_text);
    let operation = document.querySelectorAll('.btn-group-vertical button');
    let operation_array = Array.from(operation);
    operation_array.map(button => button.addEventListener('click',
        function(){
            if(button.innerText !== '=')
            {
                display_text.innerText += button.innerText;
            }
            if(button.innerText === '=')
            {
                display_text.innerText = eval(display_text.innerText);
            }
            if(button.innerText === 'C'){
                display_text.innerText = "";
            }
        }));
});