calculator/script3.js at master · yoga1234/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
148
149
150
// history display, don't use before finish
const historyDisplay = document.querySelector('.history-screen');
// result display
const display = document.querySelector('.display');
// get all of the button
const calcButton = document.querySelectorAll('button');
// container for saving custom attribute
const container = document.querySelector('.container');

// function for calculating the result
const calculate = (n1, operator, n2) => {

  const firstNum = parseFloat(n1);
  const secondNum = parseFloat(n2);

  if(operator === 'add') {
    return firstNum + secondNum;
  }
  if(operator === 'subtract') {
    return firstNum - secondNum;
  }
  if(operator === 'multiply') {
    return firstNum * secondNum;
  }
  if(operator === 'divide') {
    return firstNum / secondNum;
  }

}

// main calculator function
function mainFunc(e) {
  const key = e.target;
  const action = key.dataset.button;
  const keyContent = key.textContent; // get the number with textContent
  const displayedNum = display.textContent; // get the display with textContent
  const previousKeyType = container.dataset.previousKeyType;

  // remove .key-pressed class from all keys
  Array.from(key.parentNode.children).forEach(k => k.classList.remove('key-pressed'));

  // user click on the number key
  if(action === 'number') {
    if(
      displayedNum === '0' ||
      previousKeyType === 'operator' ||
      previousKeyType === 'calculate'
    ) {
      display.textContent = keyContent;
    } else {
      display.textContent = displayedNum + keyContent;
    }
    container.dataset.previousKeyType = 'number';
  }

  // user click on the operator key
  if(
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply'  ||
    action === 'divide'
  ) {
    // check if the value is exists
    const firstValue = container.dataset.firstValue;
    const operator = container.dataset.operator;
    const secondValue = displayedNum;

    // it's sufficient to check for firstValue and operator because secondValue always exists
    if(
      firstValue &&
      operator &&
      previousKeyType !== 'operator' &&
      previousKeyType !== 'calculate'
    ) {
      const calcValue = calculate(firstValue, operator, secondValue);
      display.textContent = calcValue;

      // update calculated value as firstValue
      container.dataset.firstValue = calcValue
    } else {
      // if there are no calculations, set displayedNum as the firstValue
      container.dataset.firstValue = displayedNum;
    }

    key.classList.add('key-pressed');
    // add custom attribute
    container.dataset.previousKeyType = 'operator';
    // saving the calculation value
    container.dataset.operator = action;
  }

  // user click on the decimal key
  if(action === 'decimal') {
    // check if the display already have dot
    if(!displayedNum.includes('.')) {
      display.textContent = displayedNum + '.';
    }
    if(
      previousKeyType === 'operator' ||
      previousKeyType === 'equal'
    ) {
      display.textContent = '0.';
    }
    container.dataset.previousKeyType = 'decimal';
  }

  // user click on the clear key
  if(action === 'clear') {
    // reset calculator to its initial state
    container.dataset.firstValue = '';
    container.dataset.modValue = '';
    container.dataset.operator = '';
    container.dataset.previousKeyType = '';
    display.textContent = 0;

    container.dataset.previousKeyType = 'clear';
  }

  // user click on the equal key
  if(action === 'equal') {
    let firstValue = container.dataset.firstValue;
    let operator = container.dataset.operator;
    let secondValue = displayedNum;

    // check if user already enter number
    if(firstValue) {
      if(previousKeyType === 'equal') {
        firstValue = displayedNum;
        secondValue = container.dataset.modValue;
      }
      display.textContent = calculate(firstValue, operator, secondValue);
    }

    // set modValue attribute
    container.dataset.modValue = secondValue;
    container.dataset.previousKeyType = 'equal';
  }

  // user click on the delete button
  if(action === 'delete') {
    // remove the current entry
    display.textContent = 0;

    container.dataset.previousKeyType = 'delete';
  }

}

// add event listener to all of the button
calcButton.forEach(key => key.addEventListener('click', mainFunc));