diff --git a/app.js b/app.js new file mode 100644 index 0000000..6036d06 --- /dev/null +++ b/app.js @@ -0,0 +1,256 @@ +let slidingOn = false; + +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"; + + 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: "", + 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= "", + 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.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; + } +} + +function inverseNumber() { + if (calculator.displayNumber === '0') { + return; + } + calculator.displayNumber = calculator.displayNumber * -1; +} + +function handleOperator(operator) { + if (!calculator.waitingForSecondNumber) { + calculator.waitingForFirstNumber=false; + calculator.operator = operator; + calculator.displayNumber += operator; + calculator.waitingForSecondNumber = true; + // calculator.firstNumber = calculator.displayNumber; + } else { + alert('Enter 2nd 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.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^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.secondNumber, + operator: calculator.operator, + result: result + } + putHistory(history); + calculator.displayNumber = result.toString(); + calculator.firstNumber=calculator.displayNumber; + calculator.waitingForFirstNumber = true; + calculator.waitingForSecondNumber = false; + calculator.secondNumber = ""; + renderHistory(); +} + +// document.querySelector(".backspace").addEventListener('click',()=>{ +// return(calculator.displayNumber=calculator.displayNumber-digit); +// }) + +document.querySelector(".clear").addEventListener('click', function(event) { + clearCalculator(); + updateDisplay(); +}) + +document.querySelector(".negative").addEventListener('click', function(event) { + inverseNumber(); + updateDisplay(); +}) + +document.querySelector(".equals").addEventListener('click', function(event) { + performCalculation(false); + updateDisplay(); +}) + +document.querySelector(".backspace").addEventListener('click', function(event) { + backspace(); + updateDisplay(); +}) + +document.querySelectorAll(".unary").forEach(element => { + element.addEventListener('click', function(event) { + calculator.operator = element.innerText; + performCalculation(true); + updateDisplay(); + }) +}) + +document.querySelectorAll(".number").forEach(element => { + element.addEventListener('click', function(event) { + inputDigit(event.target.innerText); + updateDisplay() + + // 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); + }) +}) + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8afd61f --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + + Web Calculator + + + + + + + + + + + + + + +
+
+

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

+ + + + + + + + + + +
First NumOperatorSecond NumResult
+
+ + + + + diff --git a/storage.js b/storage.js new file mode 100644 index 0000000..c6ee109 --- /dev/null +++ b/storage.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(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..b28689a --- /dev/null +++ b/style.css @@ -0,0 +1,181 @@ +body { + margin: 0px; +} + +h1{ + margin: 0; +} + +.heading{ + /* background-color: #827397; */ + /* color: #363062; */ + font-size: 2rem; + font-weight: bold; + text-align: center; + font-family: 'Libre Baskerville', serif; + margin: 0; + padding: 10px; +} + +.main1 { + display: flex; + flex-direction: column; + /* position: relative; */ + width: 450px; + height: 600px; + margin: auto; + margin-top: 20px; + padding: 20px; + background-color: black; + border-radius: 20px; +} + +.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;; +} + +#displayNumber { + font-size: 1em; +} + +.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;; +} + +.inner { + display: flex; + flex-direction: column; + flex-basis: 93%; + /* width: 600px; */ + height: 100%; +} + +.slide-box { + display: none; + flex-direction: column; + /* flex-basis: 30%; */ + width: 300px; + height: 100%; +} + +.my-row { + display: flex; + flex-basis: 25%; +} + +.large { + /* padding: 10px !important; + padding-top: 20px !important; */ + font-size: 1.2em !important; +} + +.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%; +} + +.my-button:hover { + font-weight: bold; +} + +.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 { + 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: black; + color: white; +} + +tr:nth-child(even) { + background-color: gray; +} + +.center { + margin-top: 50px; + text-align: center; + font-size: 3rem; + margin: auto; + background-color: orange; + padding: 10px; + } + + @media screen and (max-width: 400px) { + .main1{ + width: 350px; + height: 420px; + } + .my-display{ + height: 70px; + font-size: 3rem; + } + + }