calculator/javascript.js at master · holahoon/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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
let display_screen = document.querySelector("#display-screen");
// let power_btn = document.getElementById('btn-power');
let num_btn = document.getElementsByClassName("num");
let operator_btn = document.getElementsByClassName("operator");
let clear_entry_btn = document.querySelector("#btn-clear-entry");
let backspace_btn = document.querySelector("#btn-delete");
let decimal_btn = document.querySelector("#btn-decimal");
let power_boolean = false;
var displayVal = "0";
var pendingVal;
var calculateArray = [];

power = () => {
  if (power_boolean === false) {
    power_boolean = true;
    displayVal = "0";
    // powerOnIndicator();
    run();
  } else if (power_boolean === true) {
    power_boolean = false;
    displayVal = "";
    // powerOffIndicator();
    run();
  }
};

/* --- Functions to apply --- */
// Functions to turn the lights on / off
powerOnIndicator = () => {
  document.getElementById("on-light").style.backgroundColor =
    "rgb(46, 154, 243)";
  document.getElementById("off-light").style.backgroundColor = "#fff";
  display_screen.value = "0";
  let power_btn = document.querySelector("#btn-power");
  power_btn.classList.remove("power");
  power_btn.classList.add("power-on-blue");
};
powerOffIndicator = () => {
  document.getElementById("on-light").style.backgroundColor = "#fff";
  document.getElementById("off-light").style.backgroundColor =
    "rgb(253, 122, 99)";
  display_screen.value = "";
  let power_btn = document.querySelector("#btn-power");
  power_btn.classList.remove("power-on-blue");
  power_btn.classList.add("power");
};

/* --- Function to display the numbers on the screen when clicked --- */
const displayNumbers = clickObj => {
  // targets the value of the button clicked
  let btnNumber = clickObj.target.value;
  // if the value of the screen is 0, clear it first to display numbers clicked
  if (displayVal === "0") {
    displayVal = "";
  }
  displayVal += btnNumber;
  display_screen.value = displayVal; //  displays the displayVal on the screen
};

/* --- CE button and del buton functions --- */
clear_entry_btn.onclick = () => {
  displayVal = "0";
  pendingVal = undefined;
  calculateArray = [];
  display_screen.value = displayVal;
};
backspace_btn.onclick = () => {
  let len = displayVal.length - 1;
  displayVal = displayVal.slice(0, len);
  if (displayVal === "") {
    displayVal = "0";
  }
  display_screen.value = displayVal;
};

/* --- decimal function --- */
decimal_btn.onclick = () => {
  if (!displayVal.includes(".")) {
    displayVal += ".";
    display_screen.value = displayVal;
  }
};

/* --- Function to perform the operators --- */
const performOperation = clickObj => {
  let operator = clickObj.target.value;

  switch (operator) {
    case "/":
      pendingVal = displayVal;
      displayVal = "";
      display_screen.value = "/";
      calculateArray.push(pendingVal);
      calculateArray.push("/");
      break;
    case "*":
      pendingVal = displayVal;
      displayVal = "";
      display_screen.value = "*";
      calculateArray.push(pendingVal);
      calculateArray.push("*");
      break;
    case "+":
      pendingVal = displayVal;
      displayVal = "";
      display_screen.value = "+";
      calculateArray.push(pendingVal);
      calculateArray.push("+");
      break;
    case "-":
      pendingVal = displayVal;
      displayVal = "";
      display_screen.value = "-";
      calculateArray.push(pendingVal);
      calculateArray.push("-");
      break;
    case "=":
      calculateArray.push(displayVal);
      let calculate = eval(calculateArray.join(" ")); // ['1', '+', '2'] -> eval('1' '+' '2')
      displayVal = "";
      display_screen.value = calculate;
    // calculateArray = [];
    default:
      break;
  }
};

// Function for eventListener to add functions to the buttons to run
let makeItWork = () => {
  for (let i = 0; i < num_btn.length; i++) {
    num_btn[i].addEventListener("click", displayNumbers, false);
  }
  for (let i = 0; i < operator_btn.length; i++) {
    operator_btn[i].addEventListener("click", performOperation, false);
  }
};

const run = () => {
  if (power_boolean === true) {
    powerOnIndicator();
    makeItWork();
  } else {
    powerOffIndicator();
  }
};

// run();