learning-jsdp/ch07/decorators_multiple.html at main · addyosmani/learning-jsdp · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Object Decoration Example</title>
    <style>
      .decoration-container {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Object Decoration Example</h1>
    <div class="decoration-container">
      <label for="engravingCheckbox">Engraving ($200)</label>
      <input type="checkbox" id="engravingCheckbox" />
    </div>
    <div class="decoration-container">
      <label for="insuranceCheckbox">Insurance ($250)</label>
      <input type="checkbox" id="insuranceCheckbox" />
    </div>
    <div class="decoration-container">
      <label for="memoryCheckbox">Memory ($75)</label>
      <input type="checkbox" id="memoryCheckbox" />
    </div>
    <button onclick="decorateMacBook()">Decorate MacBook</button>
    <div id="macBookOutput"></div>

    <script>
      // MacBook class
      class MacBook {
        constructor() {
          this.cost = 997;
          this.screenSize = 11.6;
        }
        getCost() {
          return this.cost;
        }
        getScreenSize() {
          return this.screenSize;
        }
      }

      // Decorator 1: Engraving
      class Engraving extends MacBook {
        constructor(macBook) {
          super();
          this.macBook = macBook;
        }

        getCost() {
          return this.macBook.getCost() + 200;
        }
      }

      // Decorator 2: Insurance
      class Insurance extends MacBook {
        constructor(macBook) {
          super();
          this.macBook = macBook;
        }

        getCost() {
          return this.macBook.getCost() + 250;
        }
      }

      // Decorator 3: Memory
      class Memory extends MacBook {
        constructor(macBook) {
          super();
          this.macBook = macBook;
        }

        getCost() {
          return this.macBook.getCost() + 75;
        }
      }

      // Init main object
      let mb = new MacBook();

      // Decorate MacBook function
      function decorateMacBook() {
        const engravingCheckbox = document.getElementById('engravingCheckbox');
        const insuranceCheckbox = document.getElementById('insuranceCheckbox');
        const memoryCheckbox = document.getElementById('memoryCheckbox');

        if (engravingCheckbox.checked) {
          mb = new Engraving(mb);
        }

        if (insuranceCheckbox.checked) {
          mb = new Insurance(mb);
        }

        if (memoryCheckbox.checked) {
          mb = new Memory(mb);
        }

        displayMacBook(mb);
      }

      // Display MacBook details
      function displayMacBook(macBook) {
        const output = document.getElementById('macBookOutput');
        output.innerHTML = `
          <p><strong>Cost:</strong> ${macBook.getCost()}</p>
          <p><strong>Screen Size:</strong> ${macBook.getScreenSize()}"</p>
        `;
      }
    </script>
  </body>
</html>