From a14b97e7e59784c635658289619f9a1b8f6af041 Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Thu, 9 Jun 2022 23:51:20 +0530 Subject: [PATCH 1/8] Add files via upload --- index.html | 97 ++++++++++++++++++++++++++++++ script.js | 158 +++++++++++++++++++++++++++++++++++++++++++++++++ storingData.js | 82 +++++++++++++++++++++++++ style.css | 130 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 467 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 storingData.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b466de0 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + + + Web Calculator + + + + + + + +
+

Calculator

+
+
+
+

+ 0 +

+
+
+
sin^-1
+
cos^-1
+
tan^-1
+
e
+
+
+
|x|
+
x^2
+
sqrt
+
/
+
+
+
ln
+
log
+
1/x
+
*
+
+
+
sin
+
cos
+
tan
+
^
+
+
+
7
+
8
+
9
+
+/-
+
+
+
4
+
5
+
6
+
-
+
+
+
1
+
2
+
3
+
+
+
+
+
AC
+
0
+
.
+
=
+
+
+ +
+

History

+ + + + + + + + + + +
First NumOperatorSecond NumResult
+
+ +
+

Copyright 2022 Phantom

+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..47ef9ca --- /dev/null +++ b/script.js @@ -0,0 +1,158 @@ +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 === "^") { + result = Math.pow(parseFloat(calculator.firstNumber),parseFloat(calculator.displayNumber) ) + } + if (calculator.operator === "sqrt") { + result = Math.sqrt(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "x^2") { + result = Math.pow(parseFloat(calculator.firstNumber),2) + } + if (calculator.operator == "|x|") { + result = Math.abs(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "sin^-1") { + result = Math.asin(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "cos^-1") { + result = Math.acos(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "tan^-1") { + result = Math.atan(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "e") { + result = Math.exp(parseFloat(calculator.firstNumber)) + } + // if() + + + // 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(); +} + +const buttons = document.querySelectorAll(".button"); +for (let button of buttons) { + button.addEventListener('click', function (event) { + + // mendapatkan objek elemen yang diklik + 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() + }); +} \ No newline at end of file diff --git a/storingData.js b/storingData.js new file mode 100644 index 0000000..bcc7889 --- /dev/null +++ b/storingData.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 = "" + history.firstNumber + ""; + row.innerHTML += "" + history.operator + ""; + row.innerHTML += "" + history.secondNumber + ""; + row.innerHTML += "" + history.result + ""; + + 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(); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..177bbe7 --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +* { + margin: 0; + box-sizing: border-box; +} + +body { + /* background-image: url("download (10).jpg"); */ + font-family: sans-serif; +} + +.heading{ + background-color: #018558; + color: #bde902; + font-size: 5rem; + text-align: center; + margin-bottom: 25px; + font-family: 'Roboto Slab', serif; +} + +.flex-container-column { + display: flex; + flex-direction: column; + background-color: #e9edc9; + max-width: 800px; + margin: auto; + text-align: right; +} + +.flex-container-row { + display: flex; +} + +.button { + flex-basis: 25%; + + font-size: 1.5em; + text-align: center; + padding: 40px; + border: 1px solid black; + background-color: #bde902; + cursor: pointer; +} + +.double { + flex-basis: 50%; +} + +.display { + color: #bde902; + width: 100%; + padding: 10px 20px; + background-color: #333333; + border: 1px solid black; + font-size: 2em; +} + +.operator, +.negative, +.equals { + background: #018558; + color: #bde902; +} + +.card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + border-radius: 5px; + padding: 30px; + margin-top: 20px; +} + +.button:hover { + font-weight: bold; +} + +@media screen and (max-width:513px) { + .button { + padding: 10px; + margin: auto; + } +} + +.history { + width: 80%; + margin: 30px auto 0 auto; + overflow: scroll; +} + +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + border: 1px solid #ddd; +} + +th, +td { + text-align: center; + padding: 16px; +} + +th { + background-color: #018558; + + color: #bde902; +} + +tr:nth-child(even) { + background-color: white; +} + +.center { + margin-top: 50px; + text-align: center; + font-size: 5rem; + margin: auto; + font-family: 'Roboto Slab', serif; + background-color: #018558; + color: #bde902; + padding: 10px; + } + +@media screen and (max-width: 513px) { + .button { + padding: 10px; + } + + .history { + width: 100%; + } +} \ No newline at end of file From 088f42ff26c1855372ae80a9bde79cbd7c86615c Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:29:46 +0530 Subject: [PATCH 2/8] Update index.html --- index.html | 69 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 47 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index b466de0..e4fe1b4 100644 --- a/index.html +++ b/index.html @@ -7,43 +7,68 @@ Web Calculator + + - +
-

Calculator

+

Calculator

+ + +
-

+

0

-
sin^-1
-
cos^-1
-
tan^-1
-
e
+
sin^-1
+
cos^-1
+
tan^-1
+
e
-
|x|
-
x^2
-
sqrt
-
/
+
|x|
+
x^2
+
sqrt
+
ln
+
-
ln
-
log
-
1/x
-
*
+ +
log
+
sin
+
cos
+
tan
-
sin
-
cos
-
tan
-
^
+
%
+
/
+
*
+
CE
7
@@ -89,9 +114,9 @@

History

Copyright 2022 Phantom

- + - + - \ No newline at end of file + From 6060a198fc8d57e279451be7104d26b5aa839da9 Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:30:50 +0530 Subject: [PATCH 3/8] Delete style.css --- style.css | 130 ------------------------------------------------------ 1 file changed, 130 deletions(-) delete mode 100644 style.css diff --git a/style.css b/style.css deleted file mode 100644 index 177bbe7..0000000 --- a/style.css +++ /dev/null @@ -1,130 +0,0 @@ -* { - margin: 0; - box-sizing: border-box; -} - -body { - /* background-image: url("download (10).jpg"); */ - font-family: sans-serif; -} - -.heading{ - background-color: #018558; - color: #bde902; - font-size: 5rem; - text-align: center; - margin-bottom: 25px; - font-family: 'Roboto Slab', serif; -} - -.flex-container-column { - display: flex; - flex-direction: column; - background-color: #e9edc9; - max-width: 800px; - margin: auto; - text-align: right; -} - -.flex-container-row { - display: flex; -} - -.button { - flex-basis: 25%; - - font-size: 1.5em; - text-align: center; - padding: 40px; - border: 1px solid black; - background-color: #bde902; - cursor: pointer; -} - -.double { - flex-basis: 50%; -} - -.display { - color: #bde902; - width: 100%; - padding: 10px 20px; - background-color: #333333; - border: 1px solid black; - font-size: 2em; -} - -.operator, -.negative, -.equals { - background: #018558; - color: #bde902; -} - -.card { - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - border-radius: 5px; - padding: 30px; - margin-top: 20px; -} - -.button:hover { - font-weight: bold; -} - -@media screen and (max-width:513px) { - .button { - padding: 10px; - margin: auto; - } -} - -.history { - width: 80%; - margin: 30px auto 0 auto; - overflow: scroll; -} - -table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - border: 1px solid #ddd; -} - -th, -td { - text-align: center; - padding: 16px; -} - -th { - background-color: #018558; - - color: #bde902; -} - -tr:nth-child(even) { - background-color: white; -} - -.center { - margin-top: 50px; - text-align: center; - font-size: 5rem; - margin: auto; - font-family: 'Roboto Slab', serif; - background-color: #018558; - color: #bde902; - padding: 10px; - } - -@media screen and (max-width: 513px) { - .button { - padding: 10px; - } - - .history { - width: 100%; - } -} \ No newline at end of file From 21bc7629ab48e2f72d99725d3ec3eb3aee894eea Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:31:20 +0530 Subject: [PATCH 4/8] Delete storingData.js --- storingData.js | 82 -------------------------------------------------- 1 file changed, 82 deletions(-) delete mode 100644 storingData.js diff --git a/storingData.js b/storingData.js deleted file mode 100644 index bcc7889..0000000 --- a/storingData.js +++ /dev/null @@ -1,82 +0,0 @@ -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 = "" + history.firstNumber + ""; - row.innerHTML += "" + history.operator + ""; - row.innerHTML += "" + history.secondNumber + ""; - row.innerHTML += "" + history.result + ""; - - 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(); -} \ No newline at end of file From 64a75dca4ae289e608b1bbf383488631ea6cdf22 Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:31:50 +0530 Subject: [PATCH 5/8] Delete script.js --- script.js | 158 ------------------------------------------------------ 1 file changed, 158 deletions(-) delete mode 100644 script.js diff --git a/script.js b/script.js deleted file mode 100644 index 47ef9ca..0000000 --- a/script.js +++ /dev/null @@ -1,158 +0,0 @@ -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 === "^") { - result = Math.pow(parseFloat(calculator.firstNumber),parseFloat(calculator.displayNumber) ) - } - if (calculator.operator === "sqrt") { - result = Math.sqrt(parseFloat(calculator.firstNumber)) - } - if (calculator.operator == "x^2") { - result = Math.pow(parseFloat(calculator.firstNumber),2) - } - if (calculator.operator == "|x|") { - result = Math.abs(parseFloat(calculator.firstNumber)) - } - if (calculator.operator == "sin^-1") { - result = Math.asin(parseFloat(calculator.firstNumber)) - } - if (calculator.operator == "cos^-1") { - result = Math.acos(parseFloat(calculator.firstNumber)) - } - if (calculator.operator == "tan^-1") { - result = Math.atan(parseFloat(calculator.firstNumber)) - } - if (calculator.operator == "e") { - result = Math.exp(parseFloat(calculator.firstNumber)) - } - // if() - - - // 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(); -} - -const buttons = document.querySelectorAll(".button"); -for (let button of buttons) { - button.addEventListener('click', function (event) { - - // mendapatkan objek elemen yang diklik - 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() - }); -} \ No newline at end of file From 89ad2f720d95189855c7004ffbac3a1009f69f6c Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:33:05 +0530 Subject: [PATCH 6/8] Add files via upload --- index.css | 196 +++++++++++++++++++++++++ index.js | 391 +++++++++++++++++++++++++++++++++++++++++++++++++ storingData.js | 55 +++++++ 3 files changed, 642 insertions(+) create mode 100644 index.css create mode 100644 index.js create mode 100644 storingData.js diff --git a/index.css b/index.css new file mode 100644 index 0000000..b8d500a --- /dev/null +++ b/index.css @@ -0,0 +1,196 @@ +* { + margin: 0; + box-sizing: border-box; +} + +body { + /* background-image: url("download (10).jpg"); */ + font-family: sans-serif; +} + +.heading{ + background-color: white; + color: black; + font-size: 5rem; + text-align: center; + font-family: 'Roboto Slab', serif; +} + +.flex-container-column { + display: flex; + flex-direction: column; + background-color: #ced4da; + max-width: 800px; + margin: auto; + text-align: right; + padding: 20px; +} + +.flex-container-row { + display: flex; +} + +.navbarBg{ + background-color: #e7ebee; +} + +.button { + flex-basis: 25%; + color: black; + font-size: 1.5em; + text-align: center; + padding: 40px; + border: 1px solid black; + background-color: #e3e3e3; + cursor: pointer; +} + +.double { + flex-basis: 50%; +} + +.display { + color: white; + width: 100%; + padding: 10px 20px; + background-color: black; + border: 1px solid black; + + height: 15vh; +} +#displaynumber{ + font-size: 2.5rem ; +} + +/* .backspace{ + flex-basis: 25%; + color: black; + font-size: 1.5em; + text-align: center; + padding: 40px; + border: 1px solid black; + background: #f6f6f8; + cursor: pointer; + +} */ + + +.operator, +.negative, +.equals { + background: #f6f6f8; + color: black; +} + +.card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + border-radius: 5px; + padding: 30px; + /* margin-top: 20px; */ + background-color: #ced4da; + margin: 20px auto; +} + +.button:hover { + font-weight: bold; +} + +@media screen and (max-width:513px) { + .button { + padding: 10px; + margin: auto; + } +} + +.history { + width: 80%; + margin: 30px auto 0 auto; + overflow: scroll; + /* color: white; */ +} + +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + border: 1px solid #ddd; +} + +th, +td { + text-align: center; + padding: 16px; +} + +th { + background-color: black; + + color: white; +} + +tr:nth-child(even) { + background-color: #f6f6f8; +} +tr:nth-child(odd) { + background-color: #e3e3e3; +} + +.center { + margin-top: 50px; + text-align: center; + font-size: 5rem; + margin: auto; + font-family: 'Roboto Slab', serif; + background-color: white; + color: black; + padding: 10px; + } + + +@media screen and (max-width: 840px) { + + .button { + padding: 20px; + } + .card{ + margin: 20px; + } + .heading{ + font-size: 4.2rem; + } + .center{ + font-size: 4.2rem; + } +} +@media screen and (max-width: 513px) { + .button { + padding: 10px; + } + + .history { + width: 100%; + } + .heading{ + font-size: 3.5rem; + } + .center{ + font-size: 3.5rem; + } + +} +@media screen and (max-width: 400px) { + + .button { + padding: 8px; + } + .display{ + height: 12vh; + } + .heading{ + font-size: 2.5rem; + } + .center{ + font-size: 2.5rem; + } + +} \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..a9008c7 --- /dev/null +++ b/index.js @@ -0,0 +1,391 @@ +const calculator = { + displayNumber: '0', + operator: "", + firstNumber: "", + secondNumber:"", + waitingForOperator: false, + waitingForFirstNumber: false, + waitingForSecondNumber: false +}; + +function updateDisplay() { + document.querySelector("#displayNumber").innerText = calculator.displayNumber; +} + +function clearCalculator() { + calculator.displayNumber= '0', + calculator.operator= "", + calculator.firstNumber= "", + calculator.secondNumber="", + calculator.waitingForOperator= false, + calculator.waitingForFirstNumber= false, + calculator.waitingForSecondNumber= false +} + +function inputDigit(digit) { + if(calculator.operator==""){ + if(calculator.firstNumber==""){ + calculator.firstNumber=digit; + calculator.displayNumber=digit; + } + else{ + calculator.firstNumber= calculator.firstNumber+""+digit + calculator.displayNumber=calculator.displayNumber+""+digit; + } + } + + else { + if(calculator.secondNumber==""){ + calculator.secondNumber=digit; + calculator.displayNumber=calculator.displayNumber+" "+digit; + } + else{ + calculator.secondNumber=calculator.secondNumber+""+digit; + calculator.displayNumber=calculator.displayNumber+""+digit; + } + } +} + + + + +function inverseNumber() { + if (calculator.displayNumber === '0') { + return; + } + calculator.displayNumber = calculator.displayNumber * -1; + if(calculator.firstNumber!=""&&calculator.secondNumber==""){ + calculator.firstNumber=(calculator.firstNumber*-1).toString(); + } + else{ + calculator.secondNumber=(calculator.secondNumber*-1).toString(); + } +} + + +function performCalculation() { + + if(calculator.firstNumber==""){ + alert("Enter the First Number"); + return; + } + else if(calculator.operator==""){ + alert("Enter the First Number"); + return; + } + else if(calculator.secondNumber==""){ + alert("Enter the First Number"); + return; + } + + + let result = 0; + if (calculator.operator === "+") { + result = parseFloat(calculator.firstNumber) + parseFloat(calculator.secondNumber); + } + if (calculator.operator === "-") { + result = parseFloat(calculator.firstNumber) - parseFloat(calculator.secondNumber) + } + if (calculator.operator === "*") { + result = parseFloat(calculator.firstNumber) * parseFloat(calculator.secondNumber) + } + if (calculator.operator === "/") { + result = parseFloat(calculator.firstNumber) / parseFloat(calculator.secondNumber) + } + if (calculator.operator == "%") { + result = parseFloat(calculator.firstNumber) % parseFloat(calculator.secondNumber) + } + + if (calculator.operator === "^") { + result = Math.pow(parseFloat(calculator.firstNumber),parseFloat(calculator.secondNumber) ) + } + 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 == "x^2") { + result = Math.pow(parseFloat(calculator.firstNumber),2) + } + if (calculator.operator == "|x|") { + result = Math.abs(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "sin^-1") { + result = Math.asin(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "cos^-1") { + result = Math.acos(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "tan^-1") { + result = Math.atan(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "e") { + result = Math.exp(parseFloat(calculator.firstNumber)) + } + const history = { + firstNumber: calculator.firstNumber, + secondNumber: calculator.secondNumber, + operator: calculator.operator, + result: result + } + putHistory(history); + calculator.displayNumber = result.toString(); + calculator.firstNumber=calculator.displayNumber; + renderHistory(); + calculator.operator=""; + calculator.secondNumber=""; + console.log(calculator.firstNumber); + console.log(calculator.secondNumber); + console.log(calculator.displayNumber); + console.log(calculator.operator); + console.log(typeof(calculator.displayNumber)) +} + + +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')) { + console.log(calculator.firstNumber); + console.log(calculator.secondNumber); + performCalculation(); + updateDisplay(); + return; + } + + if (target.classList.contains('operator')) { + // console.log(calculator.displayNumber) + calculator.displayNumber=calculator.displayNumber+" "+target.innerText; + calculator.operator=target.innerText + updateDisplay() + console.log(calculator.firstNumber); + console.log(calculator.secondNumber); + console.log(calculator.displayNumber); + console.log(calculator.operator); + return; + + } + + if (target.classList.contains('backspace')) { + + + // if(calculator.firstNumber.length==""){ + // calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1) + // } + if(calculator.operator==""){ + if(calculator.firstNumber.length==1){ + calculator.firstNumber=""; + calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1) + } + else{ + calculator.firstNumber = calculator.firstNumber.slice(0, calculator.firstNumber.length-1); + calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1) + } + } + else if(calculator.secondNumber==""){ + calculator.operator = ""; + calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1) + } + else{ + if(calculator.secondNumber.length==1){ + calculator.secondNumber=""; + calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1) + } + else{ + calculator.secondNumber = calculator.secondNumber.slice(0, calculator.secondNumber.length-1); + calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1) + } + } + // calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1) + console.log(calculator.firstNumber); + console.log(calculator.secondNumber); + console.log(calculator.displayNumber); + console.log(calculator.operator); + + updateDisplay(); + return; + } + + + inputDigit(target.innerText); + updateDisplay() + + // console.log(event); + console.log(calculator.firstNumber); + console.log(calculator.secondNumber); + console.log(calculator.displayNumber); + console.log(calculator.operator); + // console.log(typeof(target.innerText)) + }); +} + +const theme=document.querySelector("#darkTheme"); + +theme.addEventListener("click", ()=>{ + if(theme.innerHTML==="Switch to Dark Theme"){ + theme.innerText="Switch to Light Theme" + document.querySelector(".heading").style.color = "white"; + document.querySelector(".heading").style.transition="color 1s ease"; + document.querySelector(".heading").style.backgroundColor = "black"; + document.querySelector(".heading").style.transition="background 1s ease"; + const buttons=document.querySelectorAll(".button"); + buttons.forEach((button)=>{ + return button.style.backgroundColor="#14397d"; + }) + buttons.forEach((button)=>{ + return button.style.transition="background 1s ease"; + }) + buttons.forEach((button)=>{ + return button.style.borderColor="white"; + }) + const operators=document.querySelectorAll(".operator"); + operators.forEach((operator)=>{ + return operator.style.backgroundColor="#77b5d9"; + }) + operators.forEach((operator)=>{ + return operator.style.transition="background 1s ease"; + }) + buttons.forEach((button)=>{ + return button.style.color="white"; + }) + buttons.forEach((button)=>{ + return button.style.transition="color 1s ease"; + }) + document.querySelector(".navbarBg").style.backgroundColor="#14397d"; + document.querySelector(".navbarBg").style.transition="background 1s ease"; + document.querySelector("#darkTheme").style.color="white"; + document.querySelector(".equals").style.backgroundColor="#77b5d9"; + document.querySelector(".equals").style.transition="background 1s ease"; + document.querySelector(".negative").style.backgroundColor="#77b5d9"; + document.querySelector(".negative").style.transition="background 1s ease"; + document.querySelector(".display").style.color="white"; + document.querySelector(".flex-container-column").style.backgroundColor="#d7eaf3"; + document.querySelector(".flex-container-column").style.transition="background 1s ease"; + document.querySelector(".history").style.backgroundColor="#d7eaf3"; + document.querySelector(".history").style.transition="background 1s ease"; + const tableRow=document.getElementsByTagName("td"); + for(let i=0;i{ + return row.style.backgroundColor="#14397d"; + }) + even.forEach((row)=>{ + return row.style.transition="background 1s ease"; + }) + const odd=document.querySelectorAll("tr:nth-child(odd)"); + odd.forEach((row)=>{ + return row.style.backgroundColor="#77b5d9"; + }) + odd.forEach((row)=>{ + return row.style.transition="background 1s ease"; + }) + document.querySelector(".center").style.backgroundColor="black"; + document.querySelector(".center").style.transition="background 1s ease"; + document.querySelector(".center").style.color="white"; + document.querySelector(".center").style.transition="color 1s ease"; + document.querySelector("body").style.backgroundColor="#00296b"; + document.querySelector("body").style.transition="background 1s ease"; + document.querySelector("#sciCal").style.color="white"; + } + + else{ + theme.innerText="Switch to Dark Theme" + document.querySelector(".heading").style.color = "black"; + document.querySelector(".heading").style.backgroundColor = "white"; + const buttons=document.querySelectorAll(".button"); + buttons.forEach((button)=>{ + return button.style.backgroundColor="#e3e3e3"; + }) + buttons.forEach((button)=>{ + return button.style.color="black"; + }) + buttons.forEach((button)=>{ + return button.style.borderColor="black"; + }) + + const operators=document.querySelectorAll(".operator"); + operators.forEach((operator)=>{ + return operator.style.backgroundColor="#f6f6f8"; + }) + document.querySelector(".navbarBg").style.backgroundColor="#e7ebee"; + document.querySelector("#darkTheme").style.color="black"; + document.querySelector(".equals").style.backgroundColor="#f6f6f8"; + document.querySelector(".negative").style.backgroundColor="#f6f6f8"; + document.querySelector(".display").style.color="white"; + document.querySelector(".flex-container-column").style.backgroundColor="#ced4da"; + document.querySelector(".history").style.backgroundColor="#ced4da"; + const tableRow=document.getElementsByTagName("td"); + for(let i=0;i{ + return row.style.backgroundColor="#f6f6f8"; + }) + const odd=document.querySelectorAll("tr:nth-child(odd)"); + odd.forEach((row)=>{ + return row.style.backgroundColor="#e3e3e3"; + }) + document.querySelector(".center").style.backgroundColor="white"; + document.querySelector(".center").style.color="black"; + document.querySelector("body").style.backgroundColor="white"; + document.querySelector("#sciCal").style.color="black"; + } +}); + +const scientific=document.querySelectorAll(".hideme"); +scientific.forEach((func)=>{ + return func.style.display="none"; +}) + +const sciCal=document.querySelector("#sciCal") +sciCal.addEventListener("click",()=>{ + if(sciCal.innerText==="Scientific Calculator"){ + sciCal.innerText="Regular Calculator" + scientific.forEach((func)=>{ + return func.style.display="block"; + }) + } + else{ + sciCal.innerText="Scientific Calculator" + scientific.forEach((func)=>{ + return func.style.display="none"; + }) + } +}) diff --git a/storingData.js b/storingData.js new file mode 100644 index 0000000..c6ee109 --- /dev/null +++ b/storingData.js @@ -0,0 +1,55 @@ +const CACHE_KEY = "calculation_history"; + +function checkForStorage() { + //to check whether browser supports local storage + // console.log( (Storage) ) + return typeof (Storage) !== "undefined"; +} + +function putHistory(data) { + if (checkForStorage()) { + let historyData = null; + if (localStorage.getItem(CACHE_KEY) === null) { + historyData = []; + } else { + //give java script data + + historyData = JSON.parse(localStorage.getItem(CACHE_KEY)); + + } +//add new data in begining of array + historyData.unshift(data); + + if (historyData.length > 5) { + historyData.pop(); + } + //sent json data + 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 = "" + history.firstNumber + ""; + row.innerHTML += "" + history.operator + ""; + row.innerHTML += "" + history.secondNumber + ""; + row.innerHTML += "" + history.result + ""; + + historyList.appendChild(row); + } +} + +renderHistory(); From 41aa39052c375b274c36e5544b5b16a32613ff7a Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:36:38 +0530 Subject: [PATCH 7/8] Update index.css --- index.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index b8d500a..c431300 100644 --- a/index.css +++ b/index.css @@ -168,7 +168,7 @@ tr:nth-child(odd) { } .history { - width: 100%; + width: 80%; } .heading{ font-size: 3.5rem; @@ -192,5 +192,11 @@ tr:nth-child(odd) { .center{ font-size: 2.5rem; } + .history { + width: 80%; + margin: 30px auto 0 auto; + overflow: scroll; + /* color: white; */ + } -} \ No newline at end of file +} From bd5e0f24d1c6d77538511e7ea58282a2fb7cb9fa Mon Sep 17 00:00:00 2001 From: Samar1110 <98534735+Samar1110@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:53:22 +0530 Subject: [PATCH 8/8] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e4fe1b4..c7d122e 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@ Matrix Calculator
- Graph Calculator + Graph Calculator