Skip to content
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

Jump to bottom

Clone #9

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Clone #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c13a8cb
chek problems
Antongron Oct 12, 2020
fb1302b
try again find different
Antongron Oct 12, 2020
20adac6
fix: add my html body
Antongron Oct 15, 2020
4a43cdd
fix: add my css
Antongron Oct 15, 2020
8a109b8
fix: change body script.js
Antongron 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: 33 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,40 @@
<!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 rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></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 class="calculator-grid">
<div class="output calc-display">
<input disabled type="text" id="display" value="0" name="" placeholder="000000000000000000" class="calc-display-input">
<!--<div data-current-operand class="current-operand"></div> -->
</div>
<button id="AC" data-all-clear class="clear_btn">AC</button>
<button id="DEL" data-delete class="clear_btn">DEL</button>
<button data-operation>√</button>
<button data-operation>÷</button>
<button data-number>7</button>
<button data-number>9</button>
<button data-number>8</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>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>-</button>
<button data-operation>^</button>
<button data-number>0</button>
<button decimal>.</button>
<button data-operation class="span-two">=</button>
<button class="four-size" plus-minus>±</button>
</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>
</body>
</html>
</html>
235 changes: 114 additions & 121 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,126 +1,119 @@
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
this.clear()
}

clear() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}

delete() {
this.currentOperand = this.currentOperand.toString().slice(0, -1)
}

appendNumber(number) {
if (number === '.' && this.currentOperand.includes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}

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

compute() {
let computation
const prev = parseFloat(this.previousOperand)
const current = parseFloat(this.currentOperand)
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
}
this.currentOperand = computation
this.operation = undefined
this.previousOperand = ''
}

getDisplayNumber(number) {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split('.')[0])
const decimalDigits = stringNumber.split('.')[1]
let integerDisplay
if (isNaN(integerDigits)) {
integerDisplay = ''
let numbers = document.querySelectorAll('[data-number]'),
operations = document.querySelectorAll('[data-operation]'),
decemalBtn = document.querySelector('[decimal]'),
clearBtns = document.querySelectorAll('.clear_btn'),
resultBtn = document.querySelector('[data-equals]'),
plusMinusBtn = document.querySelector('[plus-minus]'),
display = document.getElementById('display'),
MemoryCurrentNumber = 0,
MemoryNewNumber = false,
MemoryPendingOperation = '';


for (let i = 0; i < numbers.length; i++) {
let number = numbers[i];
number.addEventListener('click', function (e) {
NumberPress(e.target.textContent);
})
};

for (let i = 0; i < operations.length; i++) {
let operationBtn = operations[i];
operationBtn.addEventListener('click', function (e) {
operation(e.target.textContent);
});
};

for (let i = 0; i < clearBtns.length; i++) {

let clearBtn = clearBtns[i];
clearBtn.addEventListener('click', function (e) {
clear(e.srcElement.id);
});
};

decemalBtn.addEventListener('click', decimal);

plusMinusBtn.addEventListener('click', negativeNumber);


function NumberPress(number) {
if (MemoryNewNumber) {
display.value = number;
MemoryNewNumber = false;
} else {
integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })
}
if (decimalDigits != null) {
return `${integerDisplay}.${decimalDigits}`
if (display.value === '0') {
display.value = number;
} else {
display.value += number;
}
};
};

function operation(op) {
let localOperationMemory = display.value;


if (MemoryNewNumber && MemoryPendingOperation !== '=') {
display.value = MemoryCurrentNumber;
} else {
return integerDisplay
MemoryNewNumber = true;
if (MemoryPendingOperation === '+') {
MemoryCurrentNumber = +parseFloat((MemoryCurrentNumber*10+localOperationMemory*10)/10);
} else if (MemoryPendingOperation === '-') {
MemoryCurrentNumber = +parseFloat((MemoryCurrentNumber*10-localOperationMemory*10)/10);
} else if (MemoryPendingOperation === '*') {
MemoryCurrentNumber = +parseFloat(((MemoryCurrentNumber*10)*(localOperationMemory*10))/100);
} else if (MemoryPendingOperation === '÷') {
MemoryCurrentNumber = +parseFloat((MemoryCurrentNumber*10)/(localOperationMemory*10));
} else if (MemoryPendingOperation === '√') {
MemoryCurrentNumber **= parseFloat(1/localOperationMemory);
if (MemoryCurrentNumber.toString() == NaN.toString()) {
MemoryCurrentNumber = "Error";
};
} else if (MemoryPendingOperation === '^') {
MemoryCurrentNumber **= parseFloat(localOperationMemory);
} else {
MemoryCurrentNumber= parseFloat(localOperationMemory);
};
display.value = MemoryCurrentNumber;
MemoryPendingOperation = op;
}
}

updateDisplay() {
this.currentOperandTextElement.innerText =
this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
this.previousOperandTextElement.innerText =
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`

console.log('click on button with operation ' + op +'!');
};

function decimal(argument) {
let localDecimalMemory = display.value;

if (MemoryNewNumber) {
localDecimalMemory ='0.';
MemoryNewNumber = false;
} else {
this.previousOperandTextElement.innerText = ''
if (localDecimalMemory.indexOf('.') === -1 ) {
localDecimalMemory += '.';
};
};
display.value = localDecimalMemory;
};

function clear(id) {
if (id === 'DEL') {
display.value = '0';
MemoryNewNumber = true;
} else if (id === 'AC') {
display.value = '0';
MemoryNewNumber = true;
MemoryCurrentNumber = 0;
MemoryPendingOperation = '';
}
}
}


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 calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})

operationButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.chooseOperation(button.innerText)
calculator.updateDisplay()
})
})

equalsButton.addEventListener('click', button => {
calculator.compute()
calculator.updateDisplay()
})

allClearButton.addEventListener('click', button => {
calculator.clear()
calculator.updateDisplay()
})

deleteButton.addEventListener('click', button => {
calculator.delete()
calculator.updateDisplay()
})
console.log('click on button with '+ id +'!');
};



function negativeNumber(argument) {
let localNegatuveNumberMemory = display.value;
MemoryCurrentNumber = localNegatuveNumberMemory * (-1);
display.value = MemoryCurrentNumber;
};
Loading