CSOC - CALCULATOR

app.js

@@ -0,0 +1,142 @@
+const calculator = {
+    displayNumber: '0',
+    operator: null,
+    firstNumber: null,
+    waitingForSecondNumber: false
+};
+
+function updateDisplay() {
+    document.querySelector("#displayNumber").innerText = calculator.displayNumber;
+}
+
+function clearCalculator() {
+    calculator.displayNumber = '0';
+    calculator.operator = null;
+    calculator.firstNumber = null;
+    calculator.waitingForSecondNumber = false;
+}
+
+function inputDigit(digit) {
+    if (calculator.waitingForSecondNumber && calculator.firstNumber === calculator.displayNumber) {
+        calculator.displayNumber = digit;
+    } else {
+        if (calculator.displayNumber === '0') {
+            calculator.displayNumber = digit;
+        } else {
+            calculator.displayNumber += digit;
+        }
+    }
+}
+
+function inverseNumber() {
+    if (calculator.displayNumber === '0') {
+        return;
+    }
+    calculator.displayNumber = calculator.displayNumber * -1;
+}
+
+function handleOperator(operator) {
+    if (!calculator.waitingForSecondNumber) {
+        calculator.operator = operator;
+        calculator.waitingForSecondNumber = true;
+        calculator.firstNumber = calculator.displayNumber;
+    } else {
+        alert('Enter 2nd number first')
+    }
+}
+
+function performCalculation() {
+    if (calculator.firstNumber == null || calculator.operator == null) {
+        alert("Enter a number first");
+        return;
+    }
+
+    let result = 0;
+    if (calculator.operator === "+") {
+        result = parseFloat(calculator.firstNumber) + parseFloat(calculator.displayNumber);
+    }
+    if (calculator.operator === "-")  {
+        result = parseFloat(calculator.firstNumber) - parseFloat(calculator.displayNumber)
+    }
+    if (calculator.operator === "*")  {
+        result = parseFloat(calculator.firstNumber) * parseFloat(calculator.displayNumber)
+    }
+    if (calculator.operator === "/")  {
+        result = parseFloat(calculator.firstNumber) / parseFloat(calculator.displayNumber)
+    }
+    if (calculator.operator === "1/x")  {
+        result = 1/parseFloat(calculator.firstNumber) 
+    }
+    if (calculator.operator === "sin")  {
+        result = Math.sin(parseFloat(calculator.firstNumber)) 
+    }
+    if (calculator.operator === "cos")  {
+        result = Math.cos(parseFloat(calculator.firstNumber)) 
+    }
+    if (calculator.operator === "tan")  {
+        result = Math.tan(parseFloat(calculator.firstNumber)) 
+    }
+    if (calculator.operator === "log")  {
+        result = Math.log10(parseFloat(calculator.firstNumber)) 
+    }
+    if (calculator.operator === "ln")  {
+        result = Math.log(parseFloat(calculator.firstNumber)) 
+    }
+    if (calculator.operator === "sqrt")  {
+        result = Math.sqrt(parseFloat(calculator.firstNumber)) 
+    }
+    if (calculator.operator == "π")  {
+        result = Math.PI * (parseFloat(calculator.firstNumber)) 
+    }
+    if (calculator.operator == "e")  {
+        result = Math.exp(parseFloat(calculator.firstNumber))
+    }
+    if (calculator.operator == "|x|")  {
+        result = Math.abs(parseFloat(calculator.firstNumber))
+    }
+
+    const history = {
+        firstNumber: calculator.firstNumber,
+        secondNumber: calculator.displayNumber,
+        operator: calculator.operator,
+        result: result
+    }
+    putHistory(history);
+    calculator.displayNumber = result;
+    renderHistory();
+}
+
+const buttons = document.querySelectorAll(".button");
+for (let button of buttons) {
+    button.addEventListener('click', function (event) {
+
+        const target = event.target;
+
+        if (target.classList.contains('clear')) {
+            clearCalculator();
+            updateDisplay();
+            return;
+        }
+
+        if (target.classList.contains('negative')) {
+            inverseNumber();
+            updateDisplay();
+            return;
+        }
+
+        if (target.classList.contains('equals')) {
+            performCalculation();
+            updateDisplay();
+            return;
+        }
+
+        if (target.classList.contains('operator')) {
+            handleOperator(target.innerText)
+            updateDisplay();
+            return;
+        }
+
+        inputDigit(target.innerText);
+        updateDisplay()
+    });
+}

index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Calculator</title>
+    <link rel="stylesheet" href="/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <div>
+        <p class="heading">CALCULATOR</p>
+    </div>
+    <div class="flex-container-column card">
+        <div class="display">
+            <h1 id="displayNumber">
+                0
+            </h1>
+        </div>
+        <div class="flex-container-row">
+            <div class="button operator">|x|</div>
+            <div class="button operator">π</div>
+            <div class="button operator">e</div>
+            <div class="button operator">sqrt</div>
+        </div>
+        <div class="flex-container-row">
+            <div class="button operator">ln</div>
+            <div class="button operator">log</div>
+            <div class="button operator">1/x</div>
+            <div class="button operator">/</div>
+        </div>
+        <div class="flex-container-row">
+            <div class="button operator">sin</div>
+            <div class="button operator">cos</div>
+            <div class="button operator">tan</div>
+            <div class="button operator">*</div>
+        </div>
+        <div class="flex-container-row">
+            <div class="button">7</div>
+            <div class="button">8</div>
+            <div class="button">9</div>
+            <div class="button negative">+/-</div>
+        </div>
+        <div class="flex-container-row">
+            <div class="button">4</div>
+            <div class="button">5</div>
+            <div class="button">6</div>
+            <div class="button operator">-</div>
+        </div>
+        <div class="flex-container-row">
+            <div class="button">1</div>
+            <div class="button">2</div>
+            <div class="button">3</div>
+            <div class="button operator">+</div>
+        </div>
+        <div class="flex-container-row">
+            <div class="button clear">CE</div>
+            <div class="button">0</div>
+            <div class="button">.</div>
+            <div class="button equals">=</div>
+
+        </div>
+    </div>
+
+    <div class="history card">
+        <h2>History</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>Operand</th>
+                    <th>Operator</th>
+                    <th>Operand</th>
+                    <th>Result</th>
+                </tr>
+            </thead>
+            <tbody id="historyList"></tbody>
+        </table>
+    </div>
+
+    <!-- <div>
+        <p class="center">Copyright 2022 Kakashi</p>
+    </div> -->
+
+    <script src="storage.js"></script>
+    <script src="app.js"></script>
+</body>
+
+</html>

storage.js

@@ -0,0 +1,82 @@
+const CACHE_KEY = "calculation_history";
+
+function checkForStorage() {
+    return typeof (Storage) !== "undefined";
+}
+
+function putHistory(data) {
+    if (checkForStorage()) {
+        let historyData = null;
+        if (localStorage.getItem(CACHE_KEY) === null) {
+            historyData = [];
+        } else {
+            historyData = JSON.parse(localStorage.getItem(CACHE_KEY));
+        }
+
+        historyData.unshift(data);
+
+        if (historyData.length > 5) {
+            historyData.pop();
+        }
+
+        localStorage.setItem(CACHE_KEY, JSON.stringify(historyData));
+    }
+}
+
+function showHistory() {
+    if (checkForStorage) {
+        return JSON.parse(localStorage.getItem(CACHE_KEY)) || [];
+    } else {
+        return [];
+    }
+}
+
+function renderHistory() {
+    const historyData = showHistory();
+    let historyList = document.querySelector("#historyList");
+    historyList.innerHTML = "";
+
+    for (let history of historyData) {
+        let row = document.createElement('tr');
+        row.innerHTML = "<td>" + history.firstNumber + "</td>";
+        row.innerHTML += "<td>" + history.operator + "</td>";
+        row.innerHTML += "<td>" + history.secondNumber + "</td>";
+        row.innerHTML += "<td>" + history.result + "</td>";
+
+        historyList.appendChild(row);
+    }
+}
+
+renderHistory();
+
+const history = {
+    firstNumber: calculator.firstNumber,
+    secondNumber: calculator.displayNumber,
+    operator: calculator.operator,
+    result: result
+}
+
+function performCalculation() {
+    if (calculator.firstNumber == null || calculator.operator == null) {
+        alert("Anda belum menetapkan operator");
+        return;
+    }
+
+    let result = 0;
+    if (calculator.operator === "+") {
+        result = parseInt(calculator.firstNumber) + parseInt(calculator.displayNumber);
+    } else {
+        result = parseInt(calculator.firstNumber) - parseInt(calculator.displayNumber)
+    }
+
+    // objek yang akan dikirimkan sebagai argumen fungsi putHistory()
+    const history = {
+        firstNumber: calculator.firstNumber,
+        secondNumber: calculator.displayNumber,
+        operator: calculator.operator,
+        result: result
+    }
+    putHistory(history);
+    calculator.displayNumber = result;
+    renderHistory();
+}