diff --git a/public/Vanilla-JavaScript-Calculator-master/img/download (1).png b/public/Vanilla-JavaScript-Calculator-master/img/download (1).png index f7b1c957..3ff6f28a 100644 Binary files a/public/Vanilla-JavaScript-Calculator-master/img/download (1).png and b/public/Vanilla-JavaScript-Calculator-master/img/download (1).png differ diff --git a/public/Vanilla-JavaScript-Calculator-master/index.html b/public/Vanilla-JavaScript-Calculator-master/index.html index 5ee005c7..427d4152 100644 --- a/public/Vanilla-JavaScript-Calculator-master/index.html +++ b/public/Vanilla-JavaScript-Calculator-master/index.html @@ -1,45 +1,84 @@ - - - - Calculator + + + + Calculator + + -
- -
-
- - - - +
+
+ +
+
-
- - - - + + + + + + + + + + + + + + + + + + +
+ - + \ No newline at end of file diff --git a/public/Vanilla-JavaScript-Calculator-master/script.js b/public/Vanilla-JavaScript-Calculator-master/script.js index 563e103e..b6fe306f 100644 --- a/public/Vanilla-JavaScript-Calculator-master/script.js +++ b/public/Vanilla-JavaScript-Calculator-master/script.js @@ -1,24 +1,348 @@ -let input= document.getElementById('inputBox'); -let buttons= document.querySelectorAll('button'); -let string=""; -let arr= Array.from(buttons);// created array for each button -arr.forEach(button=> { - button.addEventListener('click',(e)=>{ - if(e.target.innerHTML=='='){ - string=eval(string); - input.value=string; - } - else if(e.target.innerHTML=='AC'){ - string=""; - input.value=string; - } - else if(e.target.innerHTML=='DEL'){ - string=string.substring(0,string.length-1); - input.value=string ; - } - else{ - string +=e.target.innerHTML; - input.value= string; - } - }) -}) \ No newline at end of file +class Calculator { + constructor(previousOperandTextElement, currentOperandTextElement) { + this.previousOperandTextElement = previousOperandTextElement; + this.currentOperandTextElement = currentOperandTextElement; + this.clear(); + } + + + clear() { + this.currentOperand = ''; + this.previousOperand = ''; + this.operation = undefined; + this.expression = ''; // To store the entire expression + this.deg = true; // Default to degrees mode + this.updateDisplay(); + } + + + delete() { + this.currentOperand = this.currentOperand.toString().slice(0, -1); + this.expression = this.expression.toString().slice(0, -1); + this.updateDisplay(); + } + + + appendNumber(number) { + if (number === '.' && this.currentOperand.includes('.')) return; + this.currentOperand = this.currentOperand.toString() + number.toString(); + this.expression = this.expression.toString() + number.toString(); + this.updateDisplay(); + } + + + chooseOperation(operation) { + if (this.currentOperand === '' && this.expression === '') return; + if (this.currentOperand !== '') { + this.expression += ` ${operation} `; + this.currentOperand = ''; + } else { + this.expression = this.expression.toString().slice(0, -3) + ` ${operation} `; + } + this.updateDisplay(); + } + + + convertCurrentOperand() { + const current = parseFloat(this.currentOperand); + if (isNaN(current)) return; + + if (this.deg) { + // Convert radians to degrees + this.currentOperand = (current * (180 / Math.PI)).toString(); + } else { + // Convert degrees to radians + this.currentOperand = (current * (Math.PI / 180)).toString(); + } + + this.expression = this.currentOperand.toString(); + this.updateDisplay(); + } + + + + choosePowerOperation() { + if (this.currentOperand === '' && this.expression === '') return; + if (this.currentOperand !== '') { + this.expression += `^`; + this.previousOperand = this.currentOperand; + this.currentOperand = ''; + } + this.updateDisplay(); + } + + + compute() { + try { + const formattedExpression = this.formatExpression(this.expression); + const powerMatch = formattedExpression.match(/(\d+)\^(\d+)/); + if (powerMatch) { + const base = parseFloat(powerMatch[1]); + const exponent = parseFloat(powerMatch[2]); + this.currentOperand = Math.pow(base, exponent); + } else { + this.currentOperand = eval(formattedExpression); + } + this.latestAnswer = this.currentOperand; // Store the latest answer + this.expression = this.currentOperand.toString(); + } catch (error) { + this.currentOperand = 'Error'; + } + this.operation = undefined; + this.previousOperand = ''; + this.updateDisplay(); + } + + + formatExpression(expression) { + // Replace the division symbol with JavaScript's division operator + return expression.replace(/÷/g, '/') + .replace(/×/g, '*') + .replace(/(\d)\(/g, '$1*(') + .replace(/\)(\d)/g, ')*$1'); + } + + + computeFunction(func) { + let result; + const current = parseFloat(this.currentOperand); + if (isNaN(current) && func !== 'ans') return; + + + switch (func) { + case 'sin': + result = Math.sin(this.deg ? (current * Math.PI) / 180 : current); + break; + case 'cos': + result = Math.cos(this.deg ? (current * Math.PI) / 180 : current); + break; + case 'tan': + result = Math.tan(this.deg ? (current * Math.PI) / 180 : current); + break; + case 'sqrt': + result = Math.sqrt(current); + break; + case 'log': + result = Math.log10(current); + break; + case 'ln': + result = Math.log(current); + break; + case 'exp': + result = Math.exp(current); + break; + case 'factorial': + result = this.factorial(current); + break; + case 'percent': + result = current / 100; + break; + case 'inv': + result = 1 / current; + break; + case 'pi': + result = Math.PI; + break; + case 'e': + result = Math.E; + break; + case 'rad': + this.deg = false; + this.convertCurrentOperand(); // Convert and update the display + return; // No need to update the display further + case 'deg': + this.deg = true; + this.convertCurrentOperand(); // Convert and update the display + return; // No need to update the display further + case 'pow': + if (this.previousOperand !== '' && !isNaN(parseFloat(this. previousOperand))) { + const base = parseFloat(this.previousOperand); + result = Math.pow(base, current); + } else { + return; + } + break; + case 'ans': + if (this.latestAnswer !== null) { + this.currentOperand = this.latestAnswer; + this.expression = this.latestAnswer.toString(); + this.updateDisplay(); + } + return; + default: + return; + } + + + this.currentOperand = result; + this.expression = result.toString(); + this.latestAnswer = result; // Update the latest answer + this.updateDisplay(); + } + + + factorial(n) { + if (n === 0) return 1; + let result = 1; + for (let i = 1; i <= n; i++) { + result *= i; + } + return result; + } + + + appendBracket(bracket) { + if (bracket === '(') { + if (this.currentOperand !== '' && !isNaN(this.currentOperand.slice(-1))) { + this.expression += `*${bracket}`; + } else { + this.expression += bracket; + } + this.currentOperand = ''; // Reset current operand + } else if (bracket === ')') { + this.expression += bracket; + } + this.updateDisplay(); + } + + + getDisplayNumber(number) { + const stringNumber = number.toString(); + const integerDigits = parseFloat(stringNumber.split('.')[0]); + const decimalDigits = stringNumber.split('.')[1]; + let integerDisplay; + + + if (isNaN(integerDigits)) { + integerDisplay = ''; + } else { + integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 }); + } + if (decimalDigits != null) { + return `${integerDisplay}.${decimalDigits}`; + } else { + return integerDisplay; + } + } + + + updateDisplay() { + this.currentOperandTextElement.innerText = this.expression || this.getDisplayNumber(this.currentOperand); + if (this.operation != null) { + this.previousOperandTextElement.innerText = + `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`; + } else { + this.previousOperandTextElement.innerText = ''; + } + } + } + + + // Helper function to determine the active calculator instance + function activeCalculator() { + return document.getElementById('scientific-calculator').classList.contains('hidden') ? basicCalculator : scientificCalculator; + } + + + // Initialization of calculator instances + const basicCalculator = new Calculator( + document.querySelector('#basic-calculator [data-previous-operand]'), + document.querySelector('#basic-calculator [data-current-operand]') + ); + + + const scientificCalculator = new Calculator( + document.querySelector('#scientific-calculator [data-previous-operand]'), + document.querySelector('#scientific-calculator [data-current-operand]') + ); + + + // Event listeners for number buttons + const numberButtons = document.querySelectorAll('[data-number]'); + numberButtons.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().appendNumber(button.innerText); + }); + }); + + + // Event listeners for operation buttons + const operationButtons = document.querySelectorAll('[data-operation]'); + operationButtons.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().chooseOperation(button.innerText); + }); + }); + + + // Event listener for equals button + const equalsButton = document.querySelectorAll('[data-equals]'); + equalsButton.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().compute(); + }); + }); + + + // Event listener for all clear button + const allClearButton = document.querySelectorAll('[data-all-clear]'); + allClearButton.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().clear(); + }); + }); + + + // Event listener for delete button + const deleteButton = document.querySelectorAll('[data-delete]'); + deleteButton.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().delete(); + }); + }); + + + // Event listeners for function buttons + const functionButtons = document.querySelectorAll('[data-function]'); + functionButtons.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().computeFunction(button.getAttribute('data-function')); + }); + }); + + + // Event listeners for bracket buttons + const leftParenButton = document.querySelectorAll('[data-function="left-paren"]'); + leftParenButton.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().appendBracket('('); + }); + }); + + + const rightParenButton = document.querySelectorAll('[data-function="right-paren"]'); + rightParenButton.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().appendBracket(')'); + }); + }); + + + // Event listener for toggle scientific button + const toggleScientificButtons = document.querySelectorAll('#toggle-scientific'); + toggleScientificButtons.forEach(button => { + button.addEventListener('click', () => { + document.getElementById('basic-calculator').classList.toggle('hidden'); + document.getElementById('scientific-calculator').classList.toggle('hidden'); + }); + }); + + + // event listener for the x^y button: + const powerButton = document.querySelectorAll('[data-function="pow"]'); + powerButton.forEach(button => { + button.addEventListener('click', () => { + activeCalculator().choosePowerOperation(); + }); + }); + \ No newline at end of file diff --git a/public/Vanilla-JavaScript-Calculator-master/styles.css b/public/Vanilla-JavaScript-Calculator-master/styles.css index d57e6e41..f91ae13b 100644 --- a/public/Vanilla-JavaScript-Calculator-master/styles.css +++ b/public/Vanilla-JavaScript-Calculator-master/styles.css @@ -1,58 +1,103 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); - -*{ - margin: 0; - padding: 0; +*, *::before, *::after { box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} - -body{ - width: 100%; - height: 100vh; - display: flex; - Flex-direction : column; + font-family: Gotham Rounded, sans-serif; + font-weight: normal; + + } + + + body { + padding: 0; + margin: 0; + background: linear-gradient(#41ade3,#11568f, #0d6e9e, #00e3ef); + } + + + .calculator-grid { + display: grid; justify-content: center; - align-items: center; - background: linear-gradient(45deg, #0a0a0a, #3a4452); -} - -.calculator{ - border: 1px solid #717377; - padding: 20px; - border-radius: 16px; - background: transparent; - box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5); - -} - -input{ - width: 100%; - border: none; - padding: 24px; - margin: 10px; - background: transparent; - box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1); + align-content: center; + min-height: 100vh; + grid-template-columns: repeat(4, 100px); + grid-template-rows: minmax(120px, auto) repeat(5, 100px); + } + + + #scientific-calculator { + grid-template-columns: repeat(7, 100px); + grid-template-rows: minmax(120px, auto) repeat(5, 100px); + } + + + .calculator-grid > button { cursor: pointer; - color: #ffffff; -} -input::placeholder{ - color: #ffffff; -} -button{ + font-size: 1.5rem; + border: 1px solid white; + outline: none; + background-color: rgba(255, 255, 255, .75); + + } + + + .calculator-grid > button:hover { + background-color: rgba(255, 255, 255, .9); + } + + + .span-two { + grid-column: span 2; + } + + + .output { + grid-column: 1 / -1; + background-color: rgba(0, 0, 0, .75); + display: flex; + align-items: flex-end; + justify-content: space-around; + flex-direction: column; + padding-right: 10px; + word-wrap: break-word; + word-break: break-all; + padding-left: 10px; + + } + + + .output .previous-operand { + color: rgba(255, 255, 255, .75); + font-size: 1.5rem; + } + + + .output .current-operand { + color: white; + font-size: 2.5rem; + } + + + .hidden { + display: none; + } + + + #toggle-scientific { + width: 35.2px; + height: 32.2px; + margin-bottom: 0px; + place-self: flex-start; + } + #toggle-scientific { border: none; - width: 60px; - height: 60px; - margin: 10px; - border-radius: 50%; - background: transparent; - color: #ffffff; - box-shadow: -8px -8px 15px rgba(255,255,255,0.1); + background: none; cursor: pointer; -} -.equalBtn{ - background-color: bisque; -} -.operator{ - color: aquamarine; -} \ No newline at end of file + padding: 0; + } + + + #toggle-scientific img { + width: 35px; + height: 35px; + border-radius: 100px; + } + \ No newline at end of file