From 247a345466ed247bf011d28559ef41b21f8746b4 Mon Sep 17 00:00:00 2001 From: AnantJain05 <74446727+AnantJain05@users.noreply.github.com> Date: Thu, 9 Jun 2022 14:16:44 -0400 Subject: [PATCH 1/7] Add files via upload --- app.js | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 92 ++++++++++++++++++++++++++++++++++ storage.js | 82 +++++++++++++++++++++++++++++++ style.css | 131 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 447 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 storage.js create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..246dd1d --- /dev/null +++ b/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() + }); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..57af848 --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ + + + + + + + Web Calculator + + + + + + + +
+

CALCULATOR

+
+
+
+

+ 0 +

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

History

+ + + + + + + + + + +
OperandOperatorOperandResult
+
+ + + + + + + + \ No newline at end of file diff --git a/storage.js b/storage.js new file mode 100644 index 0000000..bcc7889 --- /dev/null +++ b/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 = "" + 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..d41a727 --- /dev/null +++ b/style.css @@ -0,0 +1,131 @@ +* { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + margin: 0; + background-color: #E9D5CA; +} + +.heading{ + background-color: #827397; + color: #363062; + font-size: 4rem; + font-weight: bold; + text-align: center; + font-family: 'Libre Baskerville', serif; + margin: 0; + padding: 10px; +} + +.flex-container-column { + display: flex; + flex-direction: column; + background-color: #363062; + 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: -webkit-linear-gradient(top, #d2d2d2, #ddd); */ + background-color: #E9D5CA; + cursor: pointer; +} + +.double { + flex-basis: 50%; +} + +.display { + color: #4D4C7D; + width: 100%; + padding: 10px 20px; + background-color: white; + border: 1px solid black; + font-size: 2em; +} + +.operator, +.negative, +.equals { + background: #827397; +} + +.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; + background-color: white; + text-align: center; +} + +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + border: 1px solid #ddd; +} + +th, +td { + text-align: center; + padding: 16px; +} + +th { + background-color: #363062; + color: white; +} + +tr:nth-child(even) { + background-color: #827397; +} + +.center { + margin-top: 50px; + text-align: center; + font-size: 3rem; + margin: auto; + background-color: orange; + padding: 10px; + } + +@media screen and (max-width: 513px) { + .button { + padding: 10px; + } + + .history { + width: 100%; + } +} \ No newline at end of file From 1dd0d56212230544f0f3f91468acb89e29ecc753 Mon Sep 17 00:00:00 2001 From: AnantJain05 <74446727+AnantJain05@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:28:26 +0530 Subject: [PATCH 2/7] Update index.html --- index.html | 169 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 105 insertions(+), 64 deletions(-) diff --git a/index.html b/index.html index 57af848..3e2a14a 100644 --- a/index.html +++ b/index.html @@ -3,90 +3,131 @@ - + Web Calculator - + + + + + + -
-

CALCULATOR

-
-
-
-

- 0 -

-
-
-
|x|
-
π
-
e
-
sqrt
-
-
-
ln
-
log
-
1/x
-
/
-
-
-
sin
-
cos
-
tan
-
*
-
-
-
7
-
8
-
9
-
+/-
-
-
-
4
-
5
-
6
-
-
+ + +
+
+

0

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

History

- - - - + + + +
OperandOperatorOperandResultFirst NumOperatorSecond NumResult
- - - - + + - - \ No newline at end of file + From 5131cfb92ff9c8e6e6e1453d70e56fbd8fe26cde Mon Sep 17 00:00:00 2001 From: AnantJain05 <74446727+AnantJain05@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:29:34 +0530 Subject: [PATCH 3/7] Update style.css --- style.css | 160 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 105 insertions(+), 55 deletions(-) diff --git a/style.css b/style.css index d41a727..b28689a 100644 --- a/style.css +++ b/style.css @@ -1,17 +1,15 @@ -* { - box-sizing: border-box; +body { + margin: 0px; } -body { - font-family: sans-serif; +h1{ margin: 0; - background-color: #E9D5CA; } .heading{ - background-color: #827397; - color: #363062; - font-size: 4rem; + /* background-color: #827397; */ + /* color: #363062; */ + font-size: 2rem; font-weight: bold; text-align: center; font-family: 'Libre Baskerville', serif; @@ -19,66 +17,116 @@ body { padding: 10px; } -.flex-container-column { +.main1 { display: flex; flex-direction: column; - background-color: #363062; - max-width: 800px; + /* position: relative; */ + width: 450px; + height: 600px; margin: auto; - text-align: right; + margin-top: 20px; + padding: 20px; + background-color: black; + border-radius: 20px; } -.flex-container-row { +.my-display { display: flex; + flex-basis: 20%; + text-align: right; + justify-content: right; + color: #4D4C7D; + width: 100%; + height: 40px; + /* padding: 5px 10px; */ + background-color: white; + border: 1px solid black; + font-size: 4em; + border-radius: 20px;; } -.button { - flex-basis: 25%; +#displayNumber { + font-size: 1em; +} - font-size: 1.5em; - text-align: center; - padding: 40px; - border: 1px solid black; - /* background: -webkit-linear-gradient(top, #d2d2d2, #ddd); */ - background-color: #E9D5CA; - cursor: pointer; +.outer{ + flex-basis: 80%; + display: flex; + flex-direction: row; + justify-content: left; + align-content: center; + position: relative; + align-items: center; + background-color: gray; + margin: auto; + margin-top: 20px; + width: 100%; + /* height: 100%; */ + border-radius: 20px;; } -.double { - flex-basis: 50%; +.inner { + display: flex; + flex-direction: column; + flex-basis: 93%; + /* width: 600px; */ + height: 100%; } -.display { - color: #4D4C7D; - width: 100%; - padding: 10px 20px; - background-color: white; - border: 1px solid black; - font-size: 2em; +.slide-box { + display: none; + flex-direction: column; + /* flex-basis: 30%; */ + width: 300px; + height: 100%; +} + +.my-row { + display: flex; + flex-basis: 25%; } -.operator, -.negative, -.equals { - background: #827397; +.large { + /* padding: 10px !important; + padding-top: 20px !important; */ + font-size: 1.2em !important; } -.card { - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - border-radius: 5px; - padding: 30px; - margin-top: 20px; +.my-button { + display: flex; + flex-basis: 25%; + font-size: 1.7em; + text-align: center; + margin: 10px; + border: 1px solid black; + background: -webkit-linear-gradient(top, #d2d2d2, #ddd); + /* background-color: #E9D5CA; */ + cursor: pointer; + background-color: #04AA6D; /* Green */ + border: none; + color: black; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 50%; } -.button:hover { +.my-button:hover { font-weight: bold; } -@media screen and (max-width:513px) { - .button { - padding: 10px; - margin: auto; - } +.arrow1 { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + right: 0px; + flex-basis: 20%; + width: 30px; + background: -webkit-linear-gradient(top, #d2d2d2, #ddd); + /* background-color: ; */ + height: 100%; + cursor: pointer; } .history { @@ -103,12 +151,12 @@ td { } th { - background-color: #363062; + background-color: black; color: white; } tr:nth-child(even) { - background-color: #827397; + background-color: gray; } .center { @@ -120,12 +168,14 @@ tr:nth-child(even) { padding: 10px; } -@media screen and (max-width: 513px) { - .button { - padding: 10px; + @media screen and (max-width: 400px) { + .main1{ + width: 350px; + height: 420px; } - - .history { - width: 100%; + .my-display{ + height: 70px; + font-size: 3rem; } -} \ No newline at end of file + + } From 93ae05488c6649b1fb8f67521a0885c65248eb39 Mon Sep 17 00:00:00 2001 From: AnantJain05 <74446727+AnantJain05@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:30:28 +0530 Subject: [PATCH 4/7] Update app.js --- app.js | 221 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 167 insertions(+), 54 deletions(-) diff --git a/app.js b/app.js index 246dd1d..18593ab 100644 --- a/app.js +++ b/app.js @@ -1,30 +1,81 @@ +let slidingOn = false; + +function slide() { + if (!slidingOn){ + document.querySelector(".slide-box").style.display = "flex"; + document.querySelector(".outer").style.width = "730px"; + document.querySelector(".inner").style.flexBasis = "52%"; + document.querySelector(".arrow-text").innerHTML = "<\n<\n<\n"; + + slidingOn = true; + } + else{ + document.querySelector(".slide-box").style.display = "none"; + document.querySelector(".outer").style.width = "100%"; + document.querySelector(".inner").style.flexBasis = "93%"; + document.querySelector(".arrow-text").innerHTML = ">\n>\n>\n"; + slidingOn = false; + } +} + const calculator = { displayNumber: '0', operator: null, - firstNumber: null, + firstNumber: "", + secondNumber: "", + waitingForOperator: false, + waitingForFirstNumber: true, waitingForSecondNumber: false }; +const k=0; + function updateDisplay() { document.querySelector("#displayNumber").innerText = calculator.displayNumber; } function clearCalculator() { - calculator.displayNumber = '0'; - calculator.operator = null; - calculator.firstNumber = null; - calculator.waitingForSecondNumber = false; + calculator.displayNumber= '0', + calculator.operator= null, + calculator.firstNumber= "", + calculator.secondNumber= "", + calculator.waitingForOperator= false, + calculator.waitingForFirstNumber= true, + calculator.waitingForSecondNumber= false +} + +function backspace(){ + calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1); + if (calculator.waitingForFirstNumber){ + calculator.firstNumber = calculator.firstNumber.slice(0, calculator.firstNumber.length-1); + } + else if (calculator.secondNumber === ""){ + calculator.operator= null; + calculator.waitingForSecondNumber = false; + calculator.waitingForFirstNumber=true; + } + else{ + calculator.secondNumber = calculator.secondNumber.slice(0, calculator.secondNumber.length-1); + } + + if (calculator.displayNumber === "")calculator.displayNumber = "0"; } 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; + if(calculator.waitingForFirstNumber){ + // calculator.waitingForFirstNumber=true; + if (calculator.firstNumber === "NaN" || calculator.firstNumber === "Infinity"){ + calculator.firstNumber = digit; + calculator.displayNumber = ""; } + else calculator.firstNumber+=digit; + if (calculator.displayNumber==='0')calculator.displayNumber=digit + else calculator.displayNumber += digit + } + else if (calculator.waitingForSecondNumber){ + calculator.waitingForSecondNumber=true; + calculator.secondNumber+=digit; + calculator.displayNumber+=digit; } } @@ -37,32 +88,51 @@ function inverseNumber() { function handleOperator(operator) { if (!calculator.waitingForSecondNumber) { + calculator.waitingForFirstNumber=false; calculator.operator = operator; + calculator.displayNumber += operator; calculator.waitingForSecondNumber = true; - calculator.firstNumber = calculator.displayNumber; + // calculator.firstNumber = calculator.displayNumber; } else { alert('Enter 2nd number first') } } -function performCalculation() { - if (calculator.firstNumber == null || calculator.operator == null) { - alert("Enter a number first"); +function performCalculation(unary) { + + if(calculator.firstNumber==""){ + alert("Enter the First Number"); + return; + } + else if(calculator.operator==""){ + alert("Enter the operator"); + return; + } + else if(!unary && calculator.secondNumber==""){ + alert("Enter the second Number"); return; } + let result = 0; if (calculator.operator === "+") { - result = parseFloat(calculator.firstNumber) + parseFloat(calculator.displayNumber); + result = parseFloat(calculator.firstNumber) + parseFloat(calculator.secondNumber); } if (calculator.operator === "-") { - result = parseFloat(calculator.firstNumber) - parseFloat(calculator.displayNumber) + result = parseFloat(calculator.firstNumber) - parseFloat(calculator.secondNumber) } if (calculator.operator === "*") { - result = parseFloat(calculator.firstNumber) * parseFloat(calculator.displayNumber) + result = parseFloat(calculator.firstNumber) * parseFloat(calculator.secondNumber) } if (calculator.operator === "/") { - result = parseFloat(calculator.firstNumber) / parseFloat(calculator.displayNumber) + 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) @@ -85,58 +155,101 @@ function performCalculation() { 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^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^x") { + result = Math.exp(parseFloat(calculator.firstNumber)) + } + if (calculator.operator == "π"){ + result = parseFloat(calculator.firstNumber)*Math.PI; + } + + console.log(calculator.firstNumber, calculator.secondNumber, result); + + result = result.toFixed(5); const history = { firstNumber: calculator.firstNumber, - secondNumber: calculator.displayNumber, + secondNumber: calculator.secondNumber, operator: calculator.operator, result: result } putHistory(history); - calculator.displayNumber = result; + calculator.displayNumber = result.toString(); + calculator.firstNumber=calculator.displayNumber; + calculator.waitingForFirstNumber = true; + calculator.waitingForSecondNumber = false; + calculator.secondNumber = ""; renderHistory(); } -const buttons = document.querySelectorAll(".button"); -for (let button of buttons) { - button.addEventListener('click', function (event) { +// document.querySelector(".backspace").addEventListener('click',()=>{ +// return(calculator.displayNumber=calculator.displayNumber-digit); +// }) - const target = event.target; +document.querySelector(".clear").addEventListener('click', function(event) { + clearCalculator(); + updateDisplay(); +}) - if (target.classList.contains('clear')) { - clearCalculator(); - updateDisplay(); - return; - } +document.querySelector(".negative").addEventListener('click', function(event) { + inverseNumber(); + updateDisplay(); +}) - if (target.classList.contains('negative')) { - inverseNumber(); - updateDisplay(); - return; - } +document.querySelector(".equals").addEventListener('click', function(event) { + performCalculation(false); + updateDisplay(); +}) - if (target.classList.contains('equals')) { - performCalculation(); - updateDisplay(); - return; - } +document.querySelector(".backspace").addEventListener('click', function(event) { + backspace(); + updateDisplay(); +}) - if (target.classList.contains('operator')) { - handleOperator(target.innerText) - updateDisplay(); - return; - } +document.querySelectorAll(".unary").forEach(element => { + element.addEventListener('click', function(event) { + calculator.operator = element.innerText; + performCalculation(true); + updateDisplay(); + }) +}) - inputDigit(target.innerText); +document.querySelectorAll(".number").forEach(element => { + element.addEventListener('click', function(event) { + inputDigit(event.target.innerText); updateDisplay() - }); -} \ No newline at end of file + + // console.log(event); + console.log(calculator.firstNumber); + console.log(calculator.secondNumber); + console.log(calculator.displayNumber); + console.log(calculator.operator); + }) +}); + +document.querySelectorAll(".operator").forEach(element => { + element.addEventListener('click', function(event) { + calculator.operator=event.target.innerText + handleOperator(event.target.innerText); + updateDisplay() + console.log(calculator.firstNumber); + console.log(calculator.secondNumber); + console.log(calculator.displayNumber); + console.log(calculator.operator); + }) +}) + From 29426559eefbb60da43f559b52e3d5b5ac94bd06 Mon Sep 17 00:00:00 2001 From: AnantJain05 <74446727+AnantJain05@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:30:58 +0530 Subject: [PATCH 5/7] Update storage.js --- storage.js | 41 +++++++---------------------------------- 1 file changed, 7 insertions(+), 34 deletions(-) diff --git a/storage.js b/storage.js index bcc7889..c6ee109 100644 --- a/storage.js +++ b/storage.js @@ -1,6 +1,8 @@ const CACHE_KEY = "calculation_history"; function checkForStorage() { + //to check whether browser supports local storage + // console.log( (Storage) ) return typeof (Storage) !== "undefined"; } @@ -10,15 +12,18 @@ function putHistory(data) { 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)); } } @@ -48,35 +53,3 @@ function renderHistory() { } 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 c5b18f53ed86a855600189647ce31f7d6cce35f2 Mon Sep 17 00:00:00 2001 From: AnantJain05 <74446727+AnantJain05@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:55:47 +0530 Subject: [PATCH 6/7] Update index.html --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 3e2a14a..8afd61f 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Web Calculator - + @@ -127,7 +127,7 @@

History

- - + + From 43904af4d0b29a67d2c5714f7ab399b17943f30f Mon Sep 17 00:00:00 2001 From: AnantJain05 <74446727+AnantJain05@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:56:17 +0530 Subject: [PATCH 7/7] Update app.js --- app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app.js b/app.js index 18593ab..6036d06 100644 --- a/app.js +++ b/app.js @@ -4,6 +4,7 @@ function slide() { if (!slidingOn){ document.querySelector(".slide-box").style.display = "flex"; document.querySelector(".outer").style.width = "730px"; + document.querySelector(".outer").style.transitionDuration="1s"; document.querySelector(".inner").style.flexBasis = "52%"; document.querySelector(".arrow-text").innerHTML = "<\n<\n<\n";