Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSOC - CALCULATOR #46

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 142 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -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()
});
}
92 changes: 92 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
82 changes: 82 additions & 0 deletions storage.js
Original file line number Diff line number Diff line change
@@ -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();
}
Loading