COPS-CSOC-2022 · somudas · Jun 9, 2022 · Jun 9, 2022 · Jun 9, 2022
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -5,7 +5,7 @@
 
 - [ ] Android
 - [ ] Flutter
-- [ ] Web Devlopment
+- [x] Web Devlopment
 
 ### Task Completed
 <!-- you only have to fill in one of the tasks -->
@@ -19,14 +19,14 @@
 
 #### Calculator
 
-- [ ] **Task 1**: Create a simple calculator with basic mathematical operations.
-- [ ] **Task 2**: Add complex operations including exponentiation, logarithms, trigonometry, etc.
-- [ ] **Task 3:** Add an option to change settings, say from radians to degrees and vice versa, and an option to change the theme of the app.
+- [x] **Task 1**: Create a simple calculator with basic mathematical operations.
+- [x] **Task 2**: Add complex operations including exponentiation, logarithms, trigonometry, etc.
+- [x] **Task 3:** Add an option to change settings, say from radians to degrees and vice versa, and an option to change the theme of the app.
 - [ ] **Task 4:** Feature to show a history of previous calculations.
 - [ ] **Extras:** Add feature for matrix calculations and plotting of simple basic graphs using equations.
 
 ### Submission
 
 <!-- Add in your repo and apk link or web site link as per track -->
-[Repo](link)
-[APK|Web Site](link)
+[Repo](https://github.com/somudas/Calculator)
+[APK|Web Site](https://calculator-ivory-five.vercel.app/)
diff --git a/WebDev.md b/WebDev.md
@@ -51,5 +51,9 @@ Remember, the deadline for this week's task is June 7th, 2022, at 23:59.
 <!-- Add you name in below list as -->
 
 <!-- - Your Name - [Repo Name](Link) [Site](Site Link) -->
+[Calculator](https://github.com/somudas/Calculator)
+
+
+[Vercel-Web Site](https://calculator-ivory-five.vercel.app/)
 
 <!-- - Sanyu Daver - [Tic Tac](https://github.com/sanyud/TicTac) [Site](www.copsiitbhu.co.in) -->
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="main.js" defer></script> 
+</head>
+<body>
+    <div class="toggle">
+        <label class="switch">
+            <input type="checkbox" id="checkbox">
+            <span class="slider round"></span>
+        </label>
+    </div>
+      <div class="container">
+        <div class="display">
+            <div class="prev">456 + </div>
+            <div class="curr">123</div>
+        </div>
+        <div class="buttons">
+                <button unary-operator id="rad">asin</button>
+                <button unary-operatory id="deg">atan</button>
+                <button unary-operator id="x!">x!</button>
+
+                <button id="backspace">⌫</button>
+                <button unary-operator id="%">%</button>
+                <button clear class="last" id="AC">AC</button>
+                <button unary-operator id="Inv">Inv</button>
+                <button unary-operator id="sin">sin</button>
+                <button unary-operator id="ln">ln</button>
+                <button btn-numbers class="numbers" id="7">7</button>
+                <button btn-numbers class="numbers" id="8">8</button>
+                <button btn-numbers class="numbers" id="9">9</button>
+                <button binary-operator class="last" id="÷">÷</button>
+                <button btn-value id="π">π</button>
+                <button unary-operator id="cos">cos</button>
+                <button unary-operator id="log">log</button>
+                <button btn-numbers class="numbers" id="4">4</button>
+                <button btn-numbers class="numbers" id="5">5</button>
+                <button btn-numbers class="numbers" id="6">6</button>
+                <button binary-operator class="last" id="x">x</button>
+                <button id="e">e</button>
+                <button unary-operator id="tan">tan</button>
+                <button unary-operator id="sqrt">√</button>
+                <button btn-numbers class="numbers" id="1">1</button>
+                <button btn-numbers class="numbers" id="2">2</button>
+                <button btn-numbers class="numbers" id="3">3</button>
+                <button binary-operator class="last" id="-">-</button>
+                <button answer id="Ans">Ans</button>
+                <button id="EXP">EXP</button>
+                <button binary-operator id="^">^</button>
+                <button btn-numbers class="numbers" id="0">0</button>
+                <button btn-numbers class="numbers" id=".">.</button>
+                <button eval class="result" id="=">=</button>
+                <button binary-operator class="last" id="+">+</button>
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,244 @@
+function format(x) {
+    let fnl_str = ''
+
+    //finding decimal
+    let k = x.length-1
+    for(let i=x.length-1;i>=0;i--) {
+        if (x[i] == '.'){
+            k = i - 1;
+        }
+    }
+    for(let i = x.length-1; i>k;i--) fnl_str+=x[i];
+
+    for(let i=k; i>=0; i--){
+        if((k-i)%3 == 2 && i!=0){
+            fnl_str += x[i]
+            fnl_str += ','
+        }else
+            fnl_str += x[i]
+    }
+    fnl_str = fnl_str.split('').reverse().join('')
+    return fnl_str
+}
+
+
+
+
+console.log("running")
+
+let numbers = document.querySelectorAll('[btn-numbers]')
+let prevDisplay = document.getElementsByClassName('prev')[0]
+let currDisplay = document.getElementsByClassName('curr')[0]
+let operators = document.querySelectorAll('[binary-operator]')
+let eval = document.getElementsByClassName('result')[0]
+let AC = document.querySelector('[clear]')
+let u_operators = document.querySelectorAll('[unary-operator]')
+let Ans = document.getElementById('Ans')
+let backspace = document.getElementById('backspace')
+
+let isEquals = false
+let currentString = ''
+let currentNumber = ''
+let prevString = ''
+let prevNumber = ''
+let isDot = false
+
+let operand1
+let operand2
+let operator
+
+currDisplay.innerHTML = '0'
+prevDisplay.innerHTML = ''
+
+
+backspace.addEventListener('click', ()=>{
+    currentNumber = currentNumber.substring(0, currentNumber.length-1)
+    currDisplay.innerHTML = format(currentNumber)
+})
+
+numbers.forEach(btn => {
+    btn.addEventListener('click', ()=> {
+
+        let num = btn.innerHTML
+
+        if (num === '.'){
+            if(!isDot)
+                isDot = true
+            else return
+        }
+
+
+        //console.log(num)
+        currentNumber = currentNumber + num.toString();
+        //console.log(currentString)
+
+
+        currentString = format(currentNumber)
+        currDisplay.innerHTML = currentString.toString()
+    })
+})
+
+operators.forEach(btn => {
+    btn.addEventListener('click', () => {
+        let op = btn.innerHTML
+        if (operator != undefined){
+            operator = op
+            prevNumber = operand1 + ' ' + op.toString() + ' '
+            prevDisplay.innerHTML = prevNumber
+            isEquals = false;
+            return
+        }
+
+        prevNumber = currentNumber + ' ' + op.toString() + ' '
+        prevDisplay.innerHTML = prevNumber
+        currDisplay.innerHTML = '0'
+        operand1 = currentNumber
+        operator = op
+        currentNumber = ''
+        isEquals = false;
+    })
+})
+
+eval.addEventListener('click', ()=>{
+    //console.log(currentNumber)
+    //console.log(operand1)
+    if (!isEquals) isEquals = true;
+    else return
+    if (operand1 != undefined && operator != undefined && currentNumber != ''){
+        // console.log(78)
+        operand2 = parseFloat(currentNumber)
+        operand1 = parseFloat(operand1)
+        prevDisplay.innerHTML = prevDisplay.innerHTML + ' ' + currentNumber + ' ='
+        let res
+        if(operator == '+'){
+            res = operand1 + operand2
+        }else if (operator == '-'){
+            res = operand1 - operand2
+        }else if (operator == '÷'){
+            res = operand1 / operand2
+        }else if (operator == 'x'){
+            res = operand1 * operand2
+        }else if (operator == '^'){
+            res = Math.pow(operand1,operand2)
+        }
+        currDisplay.innerHTML = res   
+        isDot = false
+        currentNumber = res
+    }
+})
+
+
+u_operators.forEach(btn => {
+    btn.addEventListener('click', () => {
+
+        if (currentNumber == ''){
+            return            
+        }
+
+        let num = parseFloat(currentNumber)
+        let op = btn.innerHTML
+        let res
+        if (op == 'sin'){
+            res = Math.sin(num)
+            prevDisplay.innerHTML = 'sin( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == 'cos'){
+            res = Math.cos(num)
+            prevDisplay.innerHTML = 'cos( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == 'ln'){
+            res = Math.log(num)
+            prevDisplay.innerHTML = 'ln( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == 'log'){
+            res = Math.log10(num)
+            prevDisplay.innerHTML = 'log( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == 'tan'){
+            res = Math.tan(num)
+            prevDisplay.innerHTML = 'tan( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == 'Inv'){
+            res = 1/num
+            prevDisplay.innerHTML = '( ' + currentString + ' )^-1'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == '√'){
+            res = Math.sqrt(num)
+            prevDisplay.innerHTML = '√( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == 'x!'){
+            res = 1
+            for (let i = 1;i<num;i++){
+                res *= i
+            }
+            prevDisplay.innerHTML = '( ' + currentString + ' )!'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == '%'){
+            res = num/100.0
+            prevDisplay.innerHTML = '( ' + currentString + ' )%'
+            currDisplay.innerHTML = res.toString()
+        }
+        else if (op == 'asin'){
+            res = Math.asin(num)
+            prevDisplay.innerHTML = 'asin( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }else if (op == 'atan'){
+            res = Math.atan(num)
+            prevDisplay.innerHTML = 'atan( ' + currentString + ' )'
+            currDisplay.innerHTML = res.toString()
+        }
+
+        currentNumber = currDisplay.innerHTML
+
+    })
+})
+
+
+AC.addEventListener('click', () => {
+    currDisplay.innerHTML='0'
+    prevDisplay.innerHTML=''
+    currentNumber=''
+    currentString=''
+    prevString = ''
+    prevNumber = ''
+    operand1 = undefined
+    operand2 = undefined
+    operator = undefined
+    isDot = false
+    isEquals = false
+})
+
+Ans.addEventListener('click', () => {
+    currDisplay.innerHTML = currentString
+    prevDisplay.innerHTML = 'Ans'
+})
+
+
+
+let checkbox = document.getElementById('checkbox')
+checkbox.addEventListener('change', ()=>{
+    let body = document.getElementsByTagName("BODY")[0];
+    let disp = document.getElementsByClassName('display')[0]
+    let prev = document.getElementsByClassName('prev')[0]
+    let curr = document.getElementsByClassName('curr')[0]
+
+    if (checkbox.checked){
+        body.style.backgroundColor = "#FFFFFF"
+        disp.style.backgroundColor = "#FFFFFF"
+        prev.style.color = "#000"
+        curr.style.color = "#000"
+    }else{
+        body.style.backgroundColor = "#32322F"
+        disp.style.backgroundColor = "#32322F"
+        prev.style.color = "#888"
+        curr.style.color = "#FFF"
+    }
+})