TILAlgorithm & Quiz

daily_quiz33

CSS, HTML, Poiema, Quiz, TIL, Web, algorithm, coding, javascript

quiz

문제 출처 : poiema

Counter

img

  • 요구 사항

    1. 최소값은 0이다. 즉, 0과 양수만으로 카운트한다.

    2. 클로저로 구현한다.


1. 함수 자체를 리턴하고 함수를 받아와서 출력하는 방법

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Counter</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 130px;
      margin: 20px auto;
      font-size: 24px;
      color: #3f51b5;
    }

    button {
      padding: 5px 10px;
      font-size: 24px;
      border-radius: 5px;
      color: #3f51b5;
      border-color: #3f51b5;
      outline: none;
      cursor: pointer;
    }

    .counter {
      width: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="increase">+</button>
    <div class="counter">0</div>
    <button class="decrease">-</button>
  </div>

  <script>
    const $counter = document.querySelector('.counter');
    const $increase = document.querySelector('.increase');
    const $decrease = document.querySelector('.decrease');

    const Counter = (function () {
      let count = 0;

      return function (fr) {
        count = fr(count);
        $counter.textContent = count;
      };
    }());

    const increase = (n) => ++n;

    const decrease = (n) => {
      if (n == 0) return 0;
      return --n;
    };

    $increase.onclick = () => Counter(increase);
    $decrease.onclick = () => Counter(decrease);
  </script>
</body>
</html>

생성자 함수로 만들고 생성자함수 객체 프로토타입의 메소드를 호출하는 방법

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
const $counter = document.querySelector('.counter');
const $increase = document.querySelector('.increase');
const $decrease = document.querySelector('.decrease');

const Counter = (function () {
  let count = 0;

  function Counters() {
  }

  Counters.prototype.increase = function () {
    $counter.textContent = count++;
  };

  Counters.prototype.decrease = function () {
    if (count == 0) return;
    $counter.textContent = --count;
  };

  return Counters;
}());

const counts = new Counter();

$increase.onclick = () => {
  counts.increase();
};

$decrease.onclick = () => {
  counts.decrease();
};

객체(증가함수, 감소함수)를 리턴하는 방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const $counter = document.querySelector('.counter');
const $increase = document.querySelector('.increase');
const $decrease = document.querySelector('.decrease');

const Counter = (function () {
  let count = 0;
  
  return {
    increase() {
      $counter.textContent = ++count;
    },
    decrease() {
      if (count == 0) return;
      $counter.textContent = --count;
    }
  };
}());


$increase.onclick = () => Counter.increase();
$decrease.onclick = () => Counter.decrease();
Share