Semi-Finished
This commit is contained in:
parent
2d3daeba4c
commit
ca9e3e4c47
|
@ -1,3 +1,9 @@
|
||||||
|
let displayValue = 0;
|
||||||
|
let operator = 0;
|
||||||
|
let num1 = 0;
|
||||||
|
let num2 = 0;
|
||||||
|
const specialChars = ['!', '^', '*', '/', '+', '-'];
|
||||||
|
|
||||||
const add = function(num1, num2) {
|
const add = function(num1, num2) {
|
||||||
let sum = num1 + num2;
|
let sum = num1 + num2;
|
||||||
return sum;
|
return sum;
|
||||||
|
@ -8,28 +14,31 @@ const subtract = function(num1, num2) {
|
||||||
return sum;
|
return sum;
|
||||||
};
|
};
|
||||||
|
|
||||||
const sum = function(array) {
|
// const sum = function(array) {
|
||||||
let sum = 0;
|
// let sum = 0;
|
||||||
if (array.length > 0) {
|
// if (array.length > 0) {
|
||||||
for (i = 0; i < array.length; i++ ) {
|
// for (i = 0; i < array.length; i++ ) {
|
||||||
sum += array[i];
|
// sum += array[i];
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
let sum = 0;
|
// let sum = 0;
|
||||||
return sum;
|
// return sum;
|
||||||
}
|
// }
|
||||||
return sum;
|
// return sum;
|
||||||
};
|
// };
|
||||||
|
|
||||||
const multiply = function(array) {
|
const multiply = function(num1, num2) {
|
||||||
let sum = 1;
|
let sum = 1;
|
||||||
for (i = 0; i < array.length; i++) {
|
sum = num1 * num2;
|
||||||
sum = sum * array[i];
|
|
||||||
}
|
|
||||||
return sum;
|
return sum;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const divide = function(num1, num2) {
|
||||||
|
let sum = num1 / num2;
|
||||||
|
return sum;
|
||||||
|
}
|
||||||
|
|
||||||
const power = function(num1, num2) {
|
const power = function(num1, num2) {
|
||||||
let sum = 1;
|
let sum = 1;
|
||||||
for (i = 0; i < num2; i++) {
|
for (i = 0; i < num2; i++) {
|
||||||
|
@ -48,19 +57,107 @@ const factorial = function(num) {
|
||||||
|
|
||||||
const operate = function(op, num1, num2) {
|
const operate = function(op, num1, num2) {
|
||||||
switch (op) {
|
switch (op) {
|
||||||
case 'add':
|
case '+':
|
||||||
return add(num1, num2);
|
return add(num1, num2);
|
||||||
case 'subtract':
|
case '-':
|
||||||
return subtract(num1, num2);
|
return subtract(num1, num2);
|
||||||
case 'multiply':
|
case '*':
|
||||||
return multiply(num1, num2);
|
return multiply(num1, num2);
|
||||||
case 'power':
|
case '/':
|
||||||
|
return divide(num1, num2);
|
||||||
|
case '^':
|
||||||
return power(num1, num2);
|
return power(num1, num2);
|
||||||
case 'factorial':
|
case '!':
|
||||||
return factorial(num1);
|
return factorial(num1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
function updateDisplay(id) {
|
||||||
|
switch (id) {
|
||||||
|
case '+':
|
||||||
|
case '-':
|
||||||
|
case '*':
|
||||||
|
case '/':
|
||||||
|
case '^':
|
||||||
|
case '!':
|
||||||
|
case '.':
|
||||||
|
let includesSpec = specialChars.some(char => display.textContent.includes(char));
|
||||||
|
if (includesSpec) {
|
||||||
|
let num2 = display.textContent.split(/[\/+^!-*-]/);
|
||||||
|
num1 = num2[0];
|
||||||
|
num1 = parseFloat(num1);
|
||||||
|
num2 = num2[1];
|
||||||
|
num2 = parseFloat(num2);
|
||||||
|
let currentAnswer = operate(operator, num1, num2);
|
||||||
|
operator = id;
|
||||||
|
display.textContent = currentAnswer + id;
|
||||||
|
displayValue = display.textContent;
|
||||||
|
break;
|
||||||
|
|
||||||
let answer = operate("multiply", 1, 2);
|
}
|
||||||
|
else {
|
||||||
|
num1 = display.textContent;
|
||||||
|
num1 = parseFloat(num1);
|
||||||
|
operator = id;
|
||||||
|
display.textContent += id;
|
||||||
|
displayValue = display.textContent;
|
||||||
|
console.log('false');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case '1':
|
||||||
|
case "2":
|
||||||
|
case "3":
|
||||||
|
case "4":
|
||||||
|
case "5":
|
||||||
|
case "6":
|
||||||
|
case '7':
|
||||||
|
case '8':
|
||||||
|
case '9':
|
||||||
|
case '0':
|
||||||
|
if (displayValue === 0) {
|
||||||
|
display.textContent = '';
|
||||||
|
display.textContent = id;
|
||||||
|
displayValue = display.textContent;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
display.textContent += id;
|
||||||
|
displayValue = display.textContent;
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case 'back':
|
||||||
|
let newString = display.textContent.slice(0, -1);
|
||||||
|
display.textContent = newString
|
||||||
|
displayValue = display.textContent;
|
||||||
|
console.log('back');
|
||||||
|
break;
|
||||||
|
case 'equals':
|
||||||
|
let num2 = display.textContent.split(/[\/+^!-*-]/);
|
||||||
|
num1 = num2[0];
|
||||||
|
num1 = parseFloat(num1);
|
||||||
|
num2 = num2[1];
|
||||||
|
num2 = parseFloat(num2);
|
||||||
|
let answer = operate(operator, num1, num2)
|
||||||
|
display.textContent = answer;
|
||||||
|
displayValue = answer;
|
||||||
|
console.log('equals');
|
||||||
|
break;
|
||||||
|
case 'clear':
|
||||||
|
display.textContent = '0';
|
||||||
|
displayValue = 0;
|
||||||
|
console.log('clear');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
console.log(answer);
|
const display = document.querySelector('.display');
|
||||||
|
|
||||||
|
const buttons = document.querySelectorAll('.btn');
|
||||||
|
buttons.forEach((button) => {
|
||||||
|
button.addEventListener('click', (e) => {
|
||||||
|
// operate(button.id);
|
||||||
|
updateDisplay(button.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// let answer = operate("multiply", 1, 2);
|
||||||
|
|
||||||
|
// console.log(answer);
|
|
@ -12,26 +12,29 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="calculator">
|
<div class="calculator">
|
||||||
<div class='display calc-top'>1000</div>
|
<div class="top">
|
||||||
<div class="clear">C</div>
|
<div class='display'>0</div>
|
||||||
<div class="power">a ^</div>
|
</div>
|
||||||
<div class="factorial">n!</div>
|
<div class="btn op clear" id="clear">C</div>
|
||||||
<div class="divide">/</div>
|
<div class="btn op power" id="^">a ^</div>
|
||||||
<div class="num">7</div>
|
<div class="btn op factorial" id="!">n!</div>
|
||||||
<div class="num">8</div>
|
<div class="btn op divide" id="/">/</div>
|
||||||
<div class="num">9</div>
|
<div class="btn num" id="7">7</div>
|
||||||
<div class="multiply"></div>
|
<div class="btn num" id="8">8</div>
|
||||||
<div class="num">4</div>
|
<div class="btn num" id="9">9</div>
|
||||||
<div class="num">5</div>
|
<div class="btn op multiply" id="*">*</div>
|
||||||
<div class="num">6</div>
|
<div class="btn num" id="4">4</div>
|
||||||
<div class="minus">-</div>
|
<div class="btn num" id="5">5</div>
|
||||||
<div class="num">1</div>
|
<div class="btn num" id="6">6</div>
|
||||||
<div class="num">2</div>
|
<div class="btn op minus" id="-">-</div>
|
||||||
<div class="num">3</div>
|
<div class="btn num" id="1">1</div>
|
||||||
<div class="plus">+</div>
|
<div class="btn num" id="2">2</div>
|
||||||
<div class="decimal">.</div>
|
<div class="btn num" id="3">3</div>
|
||||||
<div class="num">0</div>
|
<div class="btn op plus" id="+">+</div>
|
||||||
<div class="backspace"><</div>
|
<div class="btn op decimal" id=".">.</div>
|
||||||
|
<div class="btn op num zero" id="0">0</div>
|
||||||
|
<div class="btn op backspace" id="back"><</div>
|
||||||
|
<div class="btn op equals" id="equals">=</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,85 @@
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.8em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator {
|
||||||
|
border: solid #E5A9A9 10px;
|
||||||
|
/* box-shadow: 5px 5px 15px 5px #000000; */
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
/* align-items:flex-end; */
|
||||||
|
align-content: center;
|
||||||
|
background-color: #E5A9A9;
|
||||||
|
height: 500px;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
background-color: #F4E4BA;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 2em;
|
||||||
|
border-bottom: solid #E5A9A9 4px;
|
||||||
|
width: 400px;
|
||||||
|
height: 83px;
|
||||||
|
-webkit-box-shadow: inset 0px 0px 0px 2px #000000;
|
||||||
|
box-shadow: inset 0px 0px 0px 2px #000000;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.display {
|
||||||
|
margin-right: 0.1em;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 1px 1px 3px 1px #000000;
|
||||||
|
/* border-top: solid #E5A9A9 1px;
|
||||||
|
border-right: solid #E5A9A9 1px; */
|
||||||
|
width: 99px;
|
||||||
|
height: 81.5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: darkgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
/* transform: scale(1.1); */
|
||||||
|
background-color: #FBD87F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.op {
|
||||||
|
background-color: #AF4D98;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
background-color: #DDE8B9;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
background-color: #D66BA0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.num.zero {
|
||||||
|
/* border-bottom: solid black 2px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.op.equals {
|
||||||
|
/* background-color: black; */
|
||||||
|
}
|
Loading…
Reference in New Issue