Semi-Finished
This commit is contained in:
BananaBJones
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) {
|
||||
let sum = num1 + num2;
|
||||
return sum;
|
||||
|
|
@ -8,28 +14,31 @@ const subtract = function(num1, num2) {
|
|||
return sum;
|
||||
};
|
||||
|
||||
const sum = function(array) {
|
||||
let sum = 0;
|
||||
if (array.length > 0) {
|
||||
for (i = 0; i < array.length; i++ ) {
|
||||
sum += array[i];
|
||||
}
|
||||
} else {
|
||||
let sum = 0;
|
||||
return sum;
|
||||
}
|
||||
return sum;
|
||||
};
|
||||
// const sum = function(array) {
|
||||
// let sum = 0;
|
||||
// if (array.length > 0) {
|
||||
// for (i = 0; i < array.length; i++ ) {
|
||||
// sum += array[i];
|
||||
// }
|
||||
// } else {
|
||||
// let sum = 0;
|
||||
// return sum;
|
||||
// }
|
||||
// return sum;
|
||||
// };
|
||||
|
||||
const multiply = function(array) {
|
||||
const multiply = function(num1, num2) {
|
||||
let sum = 1;
|
||||
for (i = 0; i < array.length; i++) {
|
||||
sum = sum * array[i];
|
||||
}
|
||||
sum = num1 * num2;
|
||||
return sum;
|
||||
|
||||
};
|
||||
|
||||
const divide = function(num1, num2) {
|
||||
let sum = num1 / num2;
|
||||
return sum;
|
||||
}
|
||||
|
||||
const power = function(num1, num2) {
|
||||
let sum = 1;
|
||||
for (i = 0; i < num2; i++) {
|
||||
|
|
@ -48,19 +57,107 @@ const factorial = function(num) {
|
|||
|
||||
const operate = function(op, num1, num2) {
|
||||
switch (op) {
|
||||
case 'add':
|
||||
case '+':
|
||||
return add(num1, num2);
|
||||
case 'subtract':
|
||||
case '-':
|
||||
return subtract(num1, num2);
|
||||
case 'multiply':
|
||||
case '*':
|
||||
return multiply(num1, num2);
|
||||
case 'power':
|
||||
case '/':
|
||||
return divide(num1, num2);
|
||||
case '^':
|
||||
return power(num1, num2);
|
||||
case 'factorial':
|
||||
case '!':
|
||||
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>
|
||||
<div class="container">
|
||||
<div class="calculator">
|
||||
<div class='display calc-top'>1000</div>
|
||||
<div class="clear">C</div>
|
||||
<div class="power">a ^</div>
|
||||
<div class="factorial">n!</div>
|
||||
<div class="divide">/</div>
|
||||
<div class="num">7</div>
|
||||
<div class="num">8</div>
|
||||
<div class="num">9</div>
|
||||
<div class="multiply"></div>
|
||||
<div class="num">4</div>
|
||||
<div class="num">5</div>
|
||||
<div class="num">6</div>
|
||||
<div class="minus">-</div>
|
||||
<div class="num">1</div>
|
||||
<div class="num">2</div>
|
||||
<div class="num">3</div>
|
||||
<div class="plus">+</div>
|
||||
<div class="decimal">.</div>
|
||||
<div class="num">0</div>
|
||||
<div class="backspace"><</div>
|
||||
<div class="top">
|
||||
<div class='display'>0</div>
|
||||
</div>
|
||||
<div class="btn op clear" id="clear">C</div>
|
||||
<div class="btn op power" id="^">a ^</div>
|
||||
<div class="btn op factorial" id="!">n!</div>
|
||||
<div class="btn op divide" id="/">/</div>
|
||||
<div class="btn num" id="7">7</div>
|
||||
<div class="btn num" id="8">8</div>
|
||||
<div class="btn num" id="9">9</div>
|
||||
<div class="btn op multiply" id="*">*</div>
|
||||
<div class="btn num" id="4">4</div>
|
||||
<div class="btn num" id="5">5</div>
|
||||
<div class="btn num" id="6">6</div>
|
||||
<div class="btn op minus" id="-">-</div>
|
||||
<div class="btn num" id="1">1</div>
|
||||
<div class="btn num" id="2">2</div>
|
||||
<div class="btn num" id="3">3</div>
|
||||
<div class="btn op plus" id="+">+</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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