calculator/main.js at main · M1ke-Gru/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
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
class Calculator {
  constructor() {
    this.buttons = document.querySelector("#buttons");
    this.currentInput = document.querySelector("#currentInput");
    this.currentString = "0";
    this.lastInputed = document.querySelector("#lastInputed");
    this.keys = [...["(", ")", "DEL"], ..."C!^√/123*456+789-±0.=".split('')];
    this.operators = ["(", "!", "√", "^", "*", "/", "+", "-"];
    this.otherCharactersPressed = "";
    this.createKeys();
    this.keyboardListener();
  }

  createKeys() {
    for (let i = 0; i < 24; ++i) {
      const buttonElement = new Button(this.keys[i], this, i % 4, i / 6);
    }
  }

  clickedWithTimeout(value) {
    const timeoutMilliseconds = 5000;
    const timeoutId = setTimeout(() => {
        this.currentString = "Error: execution timeout";
        this.currentInput.innerHTML = this.currentString;
    }, timeoutMilliseconds);

    try {
        this.clicked(value);
    } finally {
        clearTimeout(timeoutId);
    }
  }

  clicked(value) {
    if (this.currentString === "0") {
      this.currentString = "";
    }
    if (!(this.operators.includes(value) && this.currentString[this.currentString.length - 1] === value && value !== "(" && value !== ")")) {
      switch (value) {
        case "=":
          this.currentString = this.currentString.concat(value);
          const inputCorrector = new InputCorrector(this.currentString);
          this.currentString = inputCorrector.correct();
          this.lastInputed.innerHTML = this.currentString;
          this.currentString = "";
          const calculate = new Calculate();
          this.currentString = calculate.main(this.lastInputed.innerHTML);
          break;
        case "C":
          this.lastInputed.innerHTML = "";
          this.currentString = "0";
          break;
        case "DEL":
          this.currentString = this.currentString.slice(0, this.currentString.length - 1);
          break;
        case "±":
          this.currentString = negation(this.currentString.length, this.currentString, this.operators);
          break;
        default:
          this.currentString = this.currentString.concat(value);
          break;
      }
    }
    if (this.currentString === ".") {
      this.currentString = "0."
    }
    const cantBeFirst = [")", "!", "^", "*", "/", "+"];
    for (let i of cantBeFirst) {
      if (i === this.currentString) {
        this.currentString = "0";
        break;
      }
    }

    this.currentInput.innerHTML = this.currentString;
  }

  keyboardListener() {
    document.addEventListener('keydown', (event) => {
      let key = event.key;
      if (this.keys.includes(key)) {
        this.clickedWithTimeout(key);
      } else if (key === "Backspace") {
        this.clickedWithTimeout("DEL");
      } else if (key === "Enter") {
        this.clickedWithTimeout("=");
      } else if (key.toLowerCase() === "c") {
        this.clickedWithTimeout("C");
      } else if (key.length === 1) {
        this.otherCharactersPressed += key;
        if (this.otherCharactersPressed.slice(-4) === "sqrt") {
          this.clickedWithTimeout("√");
        }
        if (this.otherCharactersPressed.slice(-2) === "pm") {
          this.clickedWithTimeout("±");
        }
      }
    });
  }
}

class Button {
  constructor(value, calculator, pos_x, pos_y, height = 1, width = 1) {
    const button = document.createElement("button");
    this.value = value;
    button.type = "button";
    button.innerHTML = value;
    this.addCSS(button, height, width, pos_x, pos_y);
    calculator.buttons.appendChild(button);
    button.addEventListener('click', () => calculator.clickedWithTimeout(this.value))
  }

  addCSS(button, height, width, pos_x, pos_y) {
    button.style.width = "100%";
    button.style.height = "100%";
    button.style.fontSize = "20px";
    button.style.borderRadius = "10px";
    button.style.backgroundColor = "aliceblue";
    const rightBorder = pos_x + height;
    const bottomBorder = pos_y + width;
    button.style.gridArea = "${pos_x} / ${pos_y} / ${rightBorder} / ${bottomBorder}";
  }
}

const calculator = new Calculator();