Skip to content

Calculator en #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Zhenya84 wants to merge 4 commits into
base: calculator-en
Choose a base branch
from
Open

Calculator en #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
496a077
Update index.html
Zhenya84 Oct 14, 2020
bad5b93
Update styles.css
Zhenya84 Oct 14, 2020
3177059
Update script.js
Zhenya84 Oct 14, 2020
fec3eff
Update script.js
Zhenya84 Oct 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 32 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator</title>
<link href="styles.css" rel="stylesheet">
<script src="script.js" defer></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link href="styles.css" rel="stylesheet"></link>
<script src="script.js" defer></script>
</head>
<body>
<div class="calculator-grid">
<div class="output">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
<button data-all-clear class="span-two">AC</button>
<button data-delete>DEL</button>
<button data-operation>÷</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operation>+</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operation>-</button>
<button data-number>.</button>
<button data-number>0</button>
<button data-equals class="span-two">=</button>
</div>
<div class="calculator-grid">
<div class="output">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
<button data-all-clear>AC</button>
<button data-delete>DEL</button>
<button data-root>sqrt</button>
<button data-operation>÷</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operation>+</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operation>-</button>
<button data-number>.</button>
<button data-number>0</button>
<button data-operation>pow</button>
<button data-minus-plus>+-</button>
<button data-equals class="span-four">=</button>
</body>
</html>
</html>
72 changes: 54 additions & 18 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,34 @@ class Calculator {
this.previousOperandTextElement = previousOperandTextElement;
this.currentOperandTextElement = currentOperandTextElement;
this.readyToReset = false;
this.sign = false;
this.clear();
}

root() {
if (this.currentOperand === '') return;
if (this.currentOperand < 0) return this.currentOperand = 'Ошибка';
this.currentOperand = Math.sqrt(this.currentOperand);
}

signChange() {
if (this.currentOperand === '' || this.currentOperand == 0) return;
else if (this.sign == false && this.currentOperand > 0) {
this.currentOperand = `-${this.currentOperand}`;
this.sign = true;
}
else {
this.currentOperand = Math.abs(this.currentOperand);
this.sign = false;
}
}

clear() {
this.currentOperand = '';
this.previousOperand = '';
this.operation = undefined;
this.readyToReset = false;
this.sign = false;
}

delete() {
Expand All @@ -24,34 +44,38 @@ class Calculator {

chooseOperation(operation) {
if (this.currentOperand === '') return;
if (this.previousOperand !== '' && this.previousOperand !== '') {
if (this.currentOperand !== '' && this.previousOperand !== '') {
this.compute();
}
this.operation = operation;
this.previousOperand = this.currentOperand;
this.currentOperand = '';
this.sign = false;
}

compute() {
let computation;
const prev = parseFloat(this.previousOperand);
const current = parseFloat(this.currentOperand);
if (isNaN(prev) || isNaN(current)) return;
if (isNaN(prev) || isNaN(current)) return
switch (this.operation) {
case '+':
computation = prev + current;
break
case '-':
computation = prev - current;
break
case '*':
computation = prev * current;
break
case '÷':
computation = prev / current;
break
default:
return;
case '+':
computation = (prev * 10 + current * 10) / 10;
break
case '-':
computation = (prev * 10 - current * 10) / 10;
break
case '*':
computation = ((prev * 10) * (current * 10)) / 100;
break
case '÷':
computation = (prev * 10 / current * 10) / 100;
break
case 'pow':
computation = Math.pow(prev, current);
break
default:
return;
}
this.readyToReset = true;
this.currentOperand = computation;
Expand All @@ -63,7 +87,7 @@ class Calculator {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split('.')[0])
const decimalDigits = stringNumber.split('.')[1]
let integerDisplay
let integerDisplay;
if (isNaN(integerDigits)) {
integerDisplay = ''
} else {
Expand All @@ -77,6 +101,7 @@ class Calculator {
}

updateDisplay() {
if (this.currentOperand === 'Ошибка') return this.currentOperandTextElement.innerText = this.currentOperand;
this.currentOperandTextElement.innerText =
this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
Expand All @@ -88,14 +113,15 @@ class Calculator {
}
}


const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');
const signChangeButton = document.querySelector('[data-minus-plus]');
const rootButton = document.querySelector('[data-root]');

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

Expand Down Expand Up @@ -134,3 +160,13 @@ deleteButton.addEventListener('click', button => {
calculator.delete();
calculator.updateDisplay();
})

signChangeButton.addEventListener('click', button => {
calculator.signChange();
calculator.updateDisplay();
})

rootButton.addEventListener('click', button => {
calculator.root();
calculator.updateDisplay();
})
12 changes: 6 additions & 6 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ body {
align-content: center;
min-height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
grid-template-rows: minmax(120px, auto) repeat(6, 100px);
}

.calculator-grid > button {
Expand All @@ -31,10 +31,6 @@ body {
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);
Expand All @@ -55,4 +51,8 @@ body {
.output .current-operand {
color: white;
font-size: 2.5rem;
}
}

.span-four {
grid-column: span 4;
}