Skip to content

Commit

Permalink
mathjs library implemented
Browse files Browse the repository at this point in the history 
javascript is not so good at math calculation. javascript calculates: 0.1 + 0.2 = 0.30000000000000004
and many more calculation issues. I've tried my best to solve calculation issues using vanilla javascript but I realized that it can't be solved by javascript.
Because it's not javascript's issue, it's a problem of modern computer. Computer converts decimals to binary and there all problem starts.
However I asked google for the solution and I found mathjs library and implemented it in this commit
  • Loading branch information
@tamim9
tamim9 committed Mar 7, 2022
1 parent 3080e73 commit 186801a
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 46 deletions.
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@
<footer>Calculator made by SR TAMIM</footer>
</div>

<!-- math js library -->
<script src="script/math.js"></script>
<!-- main javascript file of this calculator -->
<script src="script/script.js"></script>

Expand Down
41 changes: 41 additions & 0 deletions script/math.js
View file

Large diffs are not rendered by default.

84 changes: 41 additions & 43 deletions script/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@ function operation(event) {
squareBut.addEventListener('click', squareFunc);
function squareFunc() {
if (screen.value != '') {
screen.value = preventOverflow(Math.pow(Number(screen.value), 2));
/*screen.value = preventOverflow(Math.pow(Number(screen.value), 2));*/
screen.value = preventOverflow(math.number(math.square(math.fraction(screen.value))));

// save answer
saveAnsToLocaleStorage(screen.value)
Expand All @@ -166,7 +167,8 @@ function sqrtFunc() {
if (!screen.value) return

if (Number(screen.value) >= 0) {
screen.value = preventOverflow(Math.pow(Number(screen.value), 0.5));
// screen.value = preventOverflow(Math.pow(Number(screen.value), 0.5));
screen.value = preventOverflow(math.number(math.sqrt(screen.value)));

// save answer
saveAnsToLocaleStorage(screen.value);
Expand All @@ -184,7 +186,9 @@ function sqrtFunc() {
// function for 1 dividing by a number
oneDividedBut.addEventListener('click', () => {
if (screen.value != '') {
screen.value = preventOverflow(1 / Number(screen.value));
// screen.value = preventOverflow(1 / Number(screen.value));
screen.value = preventOverflow(math.number(math.divide(1, math.fraction(screen.value))));

saveAnsToLocaleStorage(screen.value)

// clear the screen if any number button clicked
Expand All @@ -198,7 +202,7 @@ oneDividedBut.addEventListener('click', () => {
posNegToggler.addEventListener('click', () => {
if (screen.value != '') {
if (Number(screen.value) < 0) {
screen.value = screen.value.slice(1, screen.value.length);
screen.value = Math.abs(Number(screen.value));
} else if (Number(screen.value) > 0) {
screen.value = '-' + screen.value;
}
Expand Down Expand Up @@ -241,49 +245,43 @@ equalBut.addEventListener('click', equalFunc);

function equalFunc() {
if (screen.value && firstValue) {
secondValue = Number(screen.value);
secondValue = screen.value;

let result = 0;

if (operator === '+' || operator === '-') {
const [value1, value2] = [firstValue.toString(), secondValue.toString()]
if (value1.includes('.') || value2.includes('.')) {
const splittedValues = [value1.split('.'), value2.split('.')]
const nonFractionalParts = splittedValues.map(value => Number(value[0]));
const nonFractionalResult = operator === '+' ?
nonFractionalParts.reduce((a, b) => a + b, 0)
: nonFractionalParts[0] - nonFractionalParts[1];

const fractionalParts = splittedValues.map(value => value[1] ? Number(value[1]) : 0);
const fractionalResult = operator === '+' ?
fractionalParts.reduce((a, b) => a + b, 0)
: fractionalParts[0] - fractionalParts[1];
const largestFractionLength = Math.max(...fractionalParts.map(x => x.toString().length));

result = nonFractionalResult + (fractionalResult / Math.pow(10, largestFractionLength));
} else {
result = operator === '+' ? firstValue + secondValue :
firstValue - secondValue
}
}
else if (operator === '*') {
const [value1, value2] = [firstValue.toString(), secondValue.toString()];

if (value1.includes('.') || value2.includes('.')) {
let fractionalPartLength = (value1.includes('.') && value2.includes('.')) ?
(value1.split('.')[1].length > value2.split('.')[1].length) ?
value1.split('.')[1].length : value2.split('.')[1].length
: value1.includes('.') ? value1.split('.')[1].length
: value2.split('.')[1].length;

result = ((firstValue * Math.pow(10, fractionalPartLength)) *
(secondValue * Math.pow(10, fractionalPartLength))) /
Math.pow(10, fractionalPartLength + fractionalPartLength);
} else {
/* --- This part has been commented just because javascript is not so good at math
javascript calculates 0.1 + 0.2 and returns 0.30000000000000004
to solve this javascript calculation problem I've used mathjs library --- */
/*
switch(operator){
case '+':
result = Number(firstValue) + Number(secondValue);
break;
case '-':
result = Number(firstValue) - Number(secondValue);
break;
case '*':
result = firstValue * secondValue;
}
} else if (operator === '/') {
result = firstValue / secondValue;
break;
case '/':
result = firstValue / secondValue;
break;
}
*/

switch (operator) {
case '+':
result = math.number(math.add(math.fraction(firstValue), math.fraction(secondValue)));
break;
case '-':
result = math.number(math.subtract(math.fraction(firstValue), math.fraction(secondValue)));
break;
case '*':
result = math.number(math.multiply(math.fraction(firstValue), math.fraction(secondValue)));
break;
case '/':
result = math.number(math.divide(math.fraction(firstValue), math.fraction(secondValue)));
break;
}

// prevent answer from overflowing the display
Expand Down
6 changes: 3 additions & 3 deletions style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,6 @@ body{
.operationBut, #equalBut{
background: rgb(255, 102, 0);
}
.operationBut:hover, #equalBut:hover{
background: rgb(255, 81, 0);
}
#squareBut, #sqrtBut, #oneDivided{
font-family: 'Charm', serif;
font-weight: bold;
Expand Down Expand Up @@ -196,6 +193,9 @@ footer{
.input-button:hover{
background: var(--input-button-hover-color);
}
.operationBut:hover, #equalBut:hover{
background: rgb(255, 81, 0);
}
@keyframes clickAnimation {
40%{transform: scale3d(1.1,1.2,1.1);}
}
Expand Down

0 comments on commit 186801a

Please sign in to comment.