diff --git a/index.css b/index.css new file mode 100644 index 0000000..c431300 --- /dev/null +++ b/index.css @@ -0,0 +1,202 @@ +* { + 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: 80%; + } + .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; + } + .history { + width: 80%; + margin: 30px auto 0 auto; + overflow: scroll; + /* color: white; */ + } + +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..c7d122e --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + + Web Calculator + + + + + + + + + +
+

Calculator

+
+ + + +
+
+

+ 0 +

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

History

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

Copyright 2022 Phantom

+
+ + + + + + 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();