├── README.md
├── assets
    ├── storage.js
    ├── style.css
    └── Kalkulator.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | #  Website Kalkulator
2 | 


--------------------------------------------------------------------------------
/assets/storage.js:
--------------------------------------------------------------------------------
 1 | const CACHE_KEY = "calculation_history";
 2 |  
 3 | function checkForStorage() {
 4 |    return typeof(Storage) !== "undefined";
 5 | }
 6 |  
 7 | function putHistory(data) {
 8 |    if (checkForStorage()) {
 9 |        let historyData = null;
10 |        if (localStorage.getItem(CACHE_KEY) === null) {
11 |            historyData = [];
12 |        } else {
13 |            historyData = JSON.parse(localStorage.getItem(CACHE_KEY));
14 |        }
15 |  
16 |        historyData.unshift(data);
17 |  
18 |        if (historyData.length > 5) {
19 |            historyData.pop();
20 |        }
21 |  
22 |        localStorage.setItem(CACHE_KEY, JSON.stringify(historyData));
23 |    }
24 | }
25 |  
26 | function showHistory() {
27 |    if (checkForStorage) {
28 |        return JSON.parse(localStorage.getItem(CACHE_KEY)) || [];
29 |    } else {
30 |        return [];
31 |    }
32 | }
33 |  
34 | function renderHistory() {
35 |    const historyData = showHistory();
36 |    let historyList = document.querySelector("#historyList");
37 |    historyList.innerHTML = "";
38 |  
39 |    for (let history of historyData) {
40 |        let row = document.createElement('tr');
41 |        row.innerHTML = "<td>" + history.firstNumber + "</td>";
42 |        row.innerHTML += "<td>" + history.operator + "</td>";
43 |        row.innerHTML += "<td>" + history.secondNumber + "</td>";
44 |        row.innerHTML += "<td>" + history.result + "</td>";
45 |  
46 |        historyList.appendChild(row);
47 |    }
48 | }
49 |  
50 | renderHistory();


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     font-family: sans-serif;
 7 | }
 8 | 
 9 | .flex-container-column {
10 |     display: flex;
11 |     flex-direction: column;
12 |     max-width: 800px;
13 |     margin: 0 auto;
14 |     text-align: right;
15 | }
16 | 
17 | .flex-container-row {
18 |     display: flex;
19 | }
20 | 
21 | .button {
22 |     flex-basis: 25%;
23 |     font-size: 1.5em;
24 |     text-align: center;
25 |     padding: 40px;
26 |     border: 1px solid black;
27 |     background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
28 |     cursor: pointer;
29 | }
30 | 
31 | .double {
32 |     flex-basis: 50%;
33 |  }
34 | 
35 |  .display {
36 |     color: white;
37 |     width: 100%;
38 |     padding: 10px 20px;
39 |     background-color: #333333;
40 |     border: 1px solid black;
41 |     font-size: 2em;
42 |  }
43 | 
44 |  .operator,
45 |  .negative,
46 |  .equals {
47 |     background: orange;
48 |  }
49 | 
50 |  .card {
51 |     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
52 |     border-radius: 5px;
53 |     padding: 30px;
54 |     margin-top: 20px;
55 |  }
56 | 
57 |  .button:hover {
58 |     font-weight: bold;
59 |  }
60 | 
61 |  .history {
62 |     width: 80%;
63 |     margin: 30px auto 0 auto;
64 |     overflow: scroll;
65 |  }
66 | 
67 |  table {
68 |     border-collapse: collapse;
69 |     border-spacing: 0;
70 |     width: 100%;
71 |     border: 1px solid #ddd;
72 |  }
73 | 
74 |  th,
75 |  td {
76 |     text-align: center;
77 |     padding: 16px;
78 |  }
79 | 
80 |  th {
81 |     background-color: orange;
82 |     color: white;
83 |  }
84 | 
85 |  tr:nth-child(even) {
86 |     background-color: #d2d2d2;
87 |  }
88 | 
89 |  @media screen and (max-width: 513px) {
90 |     .button {
91 |         padding: 10px;
92 |     }
93 |     .history {
94 |         width: 100%;
95 |     }
96 |  }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <title>Calculator | Bert</title>
 6 |     <link rel="stylesheet" href="assets/style.css">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="flex-container-column card">
12 |         <div class="display">
13 |         <h1 id="displayNumber">0</h1>
14 |         </div>
15 |         <div class="flex-container-row">
16 |             <div class="button">7</div>
17 |             <div class="button">8</div>
18 |             <div class="button">9</div>
19 |             <div class="button negative">+/-</div>
20 |         </div>
21 |         <div class="flex-container-row">
22 |             <div class="button">4</div>
23 |             <div class="button">5</div>
24 |             <div class="button">6</div>
25 |             <div class="button operator">-</div>
26 |         </div>
27 |         <div class="flex-container-row">
28 |             <div class="button">1</div>
29 |             <div class="button">2</div>
30 |             <div class="button">3</div>
31 |             <div class="button operator">+</div>
32 |         </div>
33 |         <div class="flex-container-row">
34 |             <div class="button clear">CE</div>
35 |             <div class="button">0</div>
36 |             <div class="button equals double">=</div>
37 |         </div>
38 |     </div>
39 |     <div class="history card">
40 |         <h2>Riwayat Perhitungan</h2>
41 |         <table>
42 |             <thead>
43 |                 <tr>
44 |                     <th>Angka Pertama</th>
45 |                     <th>Operator</th>
46 |                     <th>Angka Kedua</th>
47 |                     <th>Hasil</th>
48 |                 </tr>
49 |             </thead>
50 |             <tbody id="historyList"></tbody>
51 |         </table>
52 |     </div>
53 | 
54 |     <script src="assets/storage.js"></script>
55 |     <script src="assets/Kalkulator.js"></script>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/assets/Kalkulator.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | const calculator = {
  4 |     displayNumber: '0',
  5 |     operator: null,
  6 |     firstNumber: null,
  7 |     isWaitForSecondNumber: false,
  8 | };
  9 | 
 10 | function updateDisplay() {
 11 |     document.querySelector('#displayNumber').innerText = calculator.displayNumber;
 12 | }
 13 | 
 14 | function clearCalculator() {
 15 |     calculator.displayNumber = '0';
 16 |     calculator.operator = null;
 17 |     calculator.firstNumber = null;
 18 |     calculator.isWaitForSecondNumber = false;
 19 | }
 20 | 
 21 | function inputDigit(digit) {
 22 |     if (calculator.displayNumber === '0') {
 23 |         calculator.displayNumber = digit;
 24 |     } else {
 25 |         calculator.displayNumber += digit;
 26 |     }
 27 | }
 28 | 
 29 | function inverseNumber() {
 30 |     if (calculator.displayNumber === '0') {
 31 |       return;
 32 |     }
 33 |     calculator.displayNumber = calculator.displayNumber * -1;
 34 |   }
 35 | 
 36 | function handleOperator(operator) {
 37 |     if (!calculator.isWaitForSecondNumber) {
 38 |         calculator.operator = operator;
 39 |         calculator.isWaitForSecondNumber = true;
 40 |         calculator.firstNumber = calculator.displayNumber;
 41 | 
 42 |             // mengatur ulang nilai display number supaya tombol selanjutnya dimulai dari angka pertama lagi
 43 |         calculator.displayNumber = '0';
 44 |     } else {
 45 |         alert('Operator sudah ditetapkan');
 46 |     }
 47 | }
 48 | 
 49 | function performCalculation() {
 50 |     if (calculator.firstNumber == null || calculator.operator == null) {
 51 |         alert("Anda belum menetapkan operator");
 52 |         return;
 53 |     }
 54 |   
 55 |     let result = 0;
 56 |     if (calculator.operator === "+") {
 57 |         result = parseInt(calculator.firstNumber) + parseInt(calculator.displayNumber);
 58 |     } else {
 59 |         result = parseInt(calculator.firstNumber) - parseInt(calculator.displayNumber)
 60 |     }
 61 |   
 62 |     // objek yang akan dikirimkan sebagai argumen fungsi putHistory()
 63 |     const history = {
 64 |         firstNumber: calculator.firstNumber,
 65 |         secondNumber: calculator.displayNumber,
 66 |         operator: calculator.operator,
 67 |         result: result
 68 |     }
 69 |     putHistory(history);
 70 |     calculator.displayNumber = result;
 71 |     renderHistory();
 72 |  }
 73 | 
 74 | const buttons = document.querySelectorAll('.button');
 75 | 
 76 | for (const button of buttons) {
 77 |     button.addEventListener('click', function (event) {
 78 |         // mendapatkan objek elemen yang diklik
 79 |         const target = event.target;
 80 | 
 81 |         if (target.classList.contains('clear')) {
 82 |             clearCalculator();
 83 |             updateDisplay();
 84 |             return;
 85 |         }
 86 | 
 87 |         if (target.classList.contains('negative')) {
 88 |             inverseNumber();
 89 |             updateDisplay();
 90 |             return;
 91 |         }
 92 | 
 93 |         if (target.classList.contains('equals')) {
 94 |             performCalculation();
 95 |             updateDisplay();
 96 |             return;
 97 |         }
 98 | 
 99 |         if (target.classList.contains('operator')) {
100 |             handleOperator(target.innerText);
101 |             return;
102 |         }
103 | 
104 |         inputDigit(target.innerText);
105 |         updateDisplay();
106 |     });
107 | }
108 | 
109 | const history = {
110 |     firstNumber: calculator.firstNumber,
111 |     secondNumber: calculator.displayNumber,
112 |     operator: calculator.operator,
113 |     result: result
114 | }


--------------------------------------------------------------------------------