calculator/script.js at main · anndcodes/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
// calculator buttons and display screen to use with event listener
const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const decimalButton = document.querySelector('[data-decimal]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const clearButton = document.querySelector('[data-clear]');
const display = document.querySelector('.display');

// variables to handle operations
let firstNum = "";
let secNum = "";
let operator = "";
let currentNum = "0";
let result = "";

// variables to make cursor animation on clear
let blink = document.createElement("div");
blink.className = "blink";
blink.textContent = "|";

// event to clear the display
clearButton.addEventListener('click', function(){
  console.clear();
  display.textContent = "";
  display.appendChild(blink);

  firstNum = "";
  secNum = "";
  currentNum = "0";
  operator = "";
  result = "";
})

// event to delete last number
deleteButton.addEventListener('click', function() {
  if(result) {
    currentNum = "0";
    firstNum = "";
    display.textContent = currentNum;
  } else {
    currentNum = Number(currentNum.toString().slice(0, -1));
    display.textContent = currentNum;
  }
})

// event to populate numbers on display and get the current number
numberButtons.forEach(number => {
  number.addEventListener('click', function() {
    currentNum = parseFloat(currentNum + this.value);
    display.textContent = currentNum;
  })
})


// event to to make operation with decimal
decimalButton.addEventListener('click', function(){
  currentNum.toString().includes(".") ? currentNum : currentNum += ".";
  display.textContent = currentNum;
})


// event to save operator
operationButtons.forEach(op => {
  op.addEventListener('click', function() {
    if(firstNum && op && currentNum) {
      secNum = currentNum;
      result = parseFloat(operate(firstNum, operator, secNum).toFixed(1));
      display.textContent = result;
      firstNum = result;
      currentNum = "0";
      operator = this.value;
    } else if(op !== "" && currentNum !== "" && firstNum === "") {
      operator = this.value;
      firstNum = currentNum;
      currentNum = "0";
     } else if(firstNum && op) {
      operator = this.value;
      secNum = currentNum;
    }
  })
})


// event to make operations when pressing "=" key
equalsButton.addEventListener('click', function() {
  if(operator === "") {
    currentNum = 0;
  } else if(operator && currentNum === "0") {
    currentNum = 0;
  } else {
    secNum = currentNum;
    result = parseFloat((operate(firstNum, operator, secNum)).toFixed(1));
    display.textContent = result;
    console.log(`this is the result ${result}`);
    firstNum = result;
    secNum = "";
    currentNum = 0;
  }
})

// function to make operations
function operate(num1, op, num2) {
  console.log(`the operation is ${num1} ${op} ${num2}`);
  switch(op) {
    case "+":
      console.log(`the result is ${num1 + num2}`);
      return num1 + num2;
      break;
    case "-":
      console.log(`the result is ${num1 - num2}`);
      return num1 - num2;
      break;
    case "×":
      console.log(`the result is ${num1 * num2}`);
      return num1 * num2;
      break;
    case "÷":
      console.log(`the result is ${num1 / num2}`);
      return num1 / num2;
      break;
  }
}

// keyboard support
document.addEventListener('keydown', e => {
  let buttons = document.querySelectorAll('button');
  buttons.forEach(button => {
    if((e.key === button.innerText)
       || ((e.key === "Enter") && (button.innerText === "="))
       || ((e.key === "Backspace") && (button.innerText === "DEL"))
       || ((e.key === "Escape") && (button.innerText === "AC"))
       || ((e.key === "*") && (button.innerText === "×"))
       || ((e.key === "/") && (button.innerText === "÷"))) {
          button.click();
          e.preventDefault();
    }
  })
})