tod
/
odin-default-js-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Semi-Finished

This commit is contained in:
BananaBJones 2021-12-09 01:14:04 -07:00
parent 2d3daeba4c
commit ca9e3e4c47
3 changed files with 228 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
08_calculator/calculator.js
View File

@ -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);

43
08_calculator/index.html
View File

@ -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">&lt</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">&lt</div>
<div class="btn op equals" id="equals">=</div>
</div> </div>
</div> </div>

85
08_calculator/styles.css
View File

@ -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; */
}