Like I've written in the title I'm searching a way to have a e-notation as a result of an arithmetic operation. I know that you can write the e-notation in js (simply writing 12e10 for example) but how can I make it appear when I work with big numbers?
To explain me better I'd like to do two thing:
First, I'd like my calculator to display numbers only until 999 999 999. If you tryed to digit more numbers, you wouldn't be able to. How can I do this? I thought about using something in the style of if (display.innerText.length > n ) {don't let the user insert anymore numbers} and it worked but I'd like to know if you knew something different. (Then there is the problem of how to show the numbers: with spaces like in my example, without anything like 999999999 or using the Number.toLocaleString(). So I would need a way that would work for all these situations).
The second thing is that, once you've reached the maximum number values (that is 999 999 999), as soon as you add the next number to do an arithmetic operation you get the e-notation as a result (for example, if I wrote 999 999 999 + 1 I'd like to have 1e9 as a result and not 1 000 000 000.Or If I wrote 999 999 999 + 300 000 000 I'd like to have 1,3e9 and so on).
Can you help me with this problem? I leave the code. I feel that it is not the best solution that I could achive (in terms of readability and length) but it's the first one that I came about with and it works. I'd like to conclude it first, with all the things that I want and THEN try to modify it, making it shorter!
Thank you!
PS: I deleted the code to use the mouse (you just have the 'pushed button effect' when you click the buttons but nothing more) so use the keyboard and the space bar to turn it on!
EDIT: I was suggested another question potentially similar to mine but it wasn't helpful because in my question I'm also asking how to set a limit to the digits that the user can enter (a limit that I would be set to 999 999 999). Also, I'd like my scientific notation to be ne10 and not ne+10 (even though I have a hunch that this could be resolved with replace()).
const keys = document.querySelectorAll('#keys-container div');
const display = document.getElementById('display');
let powerButton = 'OFF';
let number1 = [];
let number2 = [];
let result = undefined;
let operator = undefined;
let decimalPointNumber1 = 'ON';
let decimalPointNumber2 = 'OFF';
window.addEventListener('keydown', function (e) {
switch (e.key) {
case ' ':
powerButton = 'ON';
number1 = [0];
number2 = [];
result = undefined;
operator = undefined;
decimalPointNumber1 = 'ON';
decimalPointNumber2 = 'OFF';
display.innerText = '0';
break;
}
if (powerButton === 'ON' /*&& display.innerText.length < 9*/) {
switch (e.key) {
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
case '0':
if (operator === undefined) {
if (e.key === '0' && number1.length === 1) {
break;
}
else if (number1[1] === '.') {
number1.push(e.key);
display.innerText = number1.join('');
break;
}
else {
number1.push(e.key);
display.innerText = number1.join('').substring(1);
break;
}
}
else if (operator !== undefined) {
number2.push(e.key);
display.innerText = number2.join('');
break;
}
case '+':
case '-':
case '*':
case '/':
if (operator === undefined) {
operator = e.key;
break;
}
else if (operator !== undefined && number2.length > 0) {
if (result === undefined) {
operate(Number(number1.join('')), Number(number2.join('')), operator);
operator = e.key;
decimalPointNumber2 = 'ON';
break;
}
else if (result !== undefined) {
operate(result, Number(number2.join('')), operator);
operator = e.key;
decimalPointNumber2 = 'ON';
break;
}
}
else {
operator = e.key;
break;
}
case '.':
if (number1.length > 0 && decimalPointNumber1 === 'ON' && decimalPointNumber2 === 'OFF') {
number1.push(e.key);
decimalPointNumber1 = 'OFF';
decimalPointNumber2 = 'ON';
display.innerText = number1.join('');
break;
}
else if (number2.length > 0 && decimalPointNumber1 === 'OFF' && decimalPointNumber2 === 'ON') {
number2.push(e.key);
decimalPointNumber2 = 'OFF';
display.innerText = number2.join('');
break;
}
else {
break;
}
case '=':
if (result === undefined && number1.length !== 0) {
operate(Number(number1.join('')), Number(number2.join('')), operator);
break;
}
else if (result !== undefined && number2.length !== 0) {
operate(result, Number(number2.join('')), operator);
break;
}
else {
break;
}
}
}
});
keys.forEach(key => key.addEventListener('mousedown', function (e) {
key.classList.add('press-div');
}));
keys.forEach(key => key.addEventListener('mouseup', function (e) {
key.classList.remove('press-div');
}));
function operate(n1, n2, operator) {
switch (operator) {
case '+':
result = add(n1, n2);
number2 = [];
console.log(result);
display.innerText = result;
break;
case '-':
result = difference(n1, n2);
number2 = [];
console.log(result);
display.innerText = result;
break;
case '*':
result = multiply(n1, n2);
number2 = [];
console.log(result);
display.innerText = result;
break;
case '/':
result = Math.trunc(ratio(n1, n2) * 100) / 100;
number2 = [];
console.log(result);
display.innerText = result;
break;
}
}
function add(a, b) {
return a + b;
}
function difference(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
function ratio(a, b) {
return a / b;
}body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #00162b;
}
body > div {
/* border: 1px solid black;*/
box-sizing: border-box;
}
#main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 0.1px solid #252525;
border-bottom: 3px solid #252525;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 0px 0px 20px 4px #e5e4e2;
}
#display-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 142px;
width: 440px;
background-color: #252525;
}
#display-border {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*border-bottom: 3px solid #2e2e2e;
box-shadow: 0px 2px 2px 1px black;*/
border-radius: 10px;
height: 85px; /*-5px*/
width: 415px; /*-5px*/
}
#display {
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1px solid black;
border-right: 2px solid #4d5c43;
border-bottom: none;
border-left: 2px solid #4d5c43;
padding-right: 10px;
box-sizing: border-box;
height: 70px;
width: 400px;
border-radius: 8.5px;
background: linear-gradient(to bottom, #739a59 40%, #a5c590 90%);
box-shadow: inset 0px 2px 2px 1px #384132;
font-family: 'Consolas';
font-size: 50px;
font-weight: bold;
}
#keyboard {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 420px;
width: 440px;
/*border-bottom: 0.1px solid #252525;
border-right: 0.1px solid #252525;
border-left: 0.1px solid #252525;*/
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #e5e4e2;
}
#keys-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
border: 0.1px solid #2e2e2e;
/*border-bottom: 3px solid #2e2e2e; /* -1px*/
border-radius: 15px;
/*box-shadow: 0px 2px 2px 0.2px black;*/
height: 377px;
width: 410px;
background-color: #a9a9a9;
}
#keys-container div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #313131;
border-bottom: 3px solid #313131;
border-radius: 10px;
box-shadow: inset 0px -1.5px 5px 1px #9f9f9f;
height: 60px;
width: 80px;
font-size: 25px;
font-weight: bold;
background-color: #e5e4e2;
color: black;
transition: 0.01s;
}
#keys-container .press-div {
border-bottom: 1px solid black;
box-shadow: inset 0px -1px 4px 2px #9f9f9f;
margin-top: 2px;
}<body>
<div id="main-container">
<div id="display-container">
<div id="display-border">
<div id="display"></div>
</div>
</div>
<div id="keyboard">
<div id="keys-container">
<div>ON/C</div>
<div>7</div>
<div>4</div>
<div>1</div>
<div>0</div>
<div>CE</div>
<div>8</div>
<div>5</div>
<div>2</div>
<div>⋅</div>
<div id="plusorminus">±</div>
<div>9</div>
<div>6</div>
<div>3</div>
<div>=</div>
<div id="ratio">÷</div>
<div id="product">×</div>
<div id="difference">−</div>
<div id="sum" style="height: 136px">+</div>
</div>
</div>
</div>
</body>