+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
\ 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