Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add calculation functionality to calculator #4

Merged
merged 5 commits into from
Aug 18, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 26 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"big.js": "^6.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
Expand Down
2 changes: 0 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Math Magician</title>
</head>

Expand Down
53 changes: 32 additions & 21 deletions src/components/Calculator.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,47 @@
import React from 'react';
import calculate from '../logic/calculate';

class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
total: 0,
next: null,
operation: null,
};
}

onClickHandler = (e) => {
const result = calculate(this.state, e.target.value);
this.setState(result);
};

render() {
const { total, next } = this.state;
return (
<div id="calculator-placeholder" className="calculator-placeholder">
<h1>Tito&apos; Calculator</h1>
<div id="calculator" className="calculator">
<input type="text" name="input" className="btn input" id="input" />
<input type="button" className="btn" value="AC" />
<input type="button" className="btn" value="+/-" />
<input type="button" className="btn" value="%" />
<input type="button" className="btn operator" value="÷" />
<input type="button" className="btn" value="7" />
<input type="button" className="btn" value="8" />
<input type="button" className="btn" value="9" />
<input type="button" className="btn operator" value="x" />
<input type="button" className="btn" value="4" />
<input type="button" className="btn" value="5" />
<input type="button" className="btn" value="6" />
<input type="button" className="btn operator" value="-" />
<input type="button" className="btn" value="1" />
<input type="button" className="btn" value="2" />
<input type="button" className="btn" value="3" />
<input type="button" className="btn operator" value="+" />
<input type="button" className="btn" value="0" />
<input type="button" className="btn" value="." />
<input type="button" className="btn operator" value="=" />
<input type="text" name="input" className="btn input" id="input" value={next || total} />
<input onClick={this.onClickHandler} type="button" className="btn" value="AC" />
Copy link

@codecaiine codecaiine Aug 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Good job so far with your project implementation it is great 👍 But I can't perform "AC" operation I'm getting errors 😢 , Please fix it in order to make your calculator works as expected 😄

  • One more thing I'm getting the error in the console "You provided a value prop to a form field without an onChange handler" this error occurs generally when we set a value prop on a field that has no onChange handler. I suggest you use the defaultValue prop or set an onChange prop on the field. Please fix it to make your project completed. 👍

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codecaiine Thanks a lot for your time!

<input onClick={this.onClickHandler} type="button" className="btn" value="+/-" />
<input onClick={this.onClickHandler} type="button" className="btn" value="%" />
<input onClick={this.onClickHandler} type="button" className="btn" value="÷" />
<input onClick={this.onClickHandler} type="button" className="btn" value="7" />
<input onClick={this.onClickHandler} type="button" className="btn" value="8" />
<input onClick={this.onClickHandler} type="button" className="btn" value="9" />
<input onClick={this.onClickHandler} type="button" className="btn" value="x" />
<input onClick={this.onClickHandler} type="button" className="btn" value="4" />
<input onClick={this.onClickHandler} type="button" className="btn" value="5" />
<input onClick={this.onClickHandler} type="button" className="btn" value="6" />
<input onClick={this.onClickHandler} type="button" className="btn" value="-" />
<input onClick={this.onClickHandler} type="button" className="btn" value="1" />
<input onClick={this.onClickHandler} type="button" className="btn" value="2" />
<input onClick={this.onClickHandler} type="button" className="btn" value="3" />
<input onClick={this.onClickHandler} type="button" className="btn" value="+" />
<input onClick={this.onClickHandler} type="button" className="btn" value="0" />
<input onClick={this.onClickHandler} type="button" className="btn" value="." />
<input onClick={this.onClickHandler} type="button" className="btn" value="=" />
</div>
</div>
);
Expand Down
133 changes: 133 additions & 0 deletions src/logic/calculate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import operate from './operate';

function isNumber(item) {
return !!item.match(/[0-9]+/);
}

/**
* Given a button name and a calculator data object, return an updated
* calculator data object.
*
* Calculator data object contains:
* total:s the running total
* next:String the next number to be operated on with the total
* operation:String +, -, etc.
*/
export default function calculate(obj, buttonName) {
if (buttonName === 'AC') {
return {
total: null,
next: null,
operation: null,
};
}

if (isNumber(buttonName)) {
if (buttonName === '0' && obj.next === '0') {
return {};
}
// If there is an operation, update next
if (obj.operation) {
if (obj.next && obj.next !== '0') {
return { ...obj, next: obj.next + buttonName };
}
return { ...obj, next: buttonName };
}
// If there is no operation, update next and clear the value
if (obj.next && obj.next !== '0') {
return {
next: obj.next + buttonName,
total: null,
};
}
return {
next: buttonName,
total: null,
};
}

if (buttonName === '.') {
if (obj.next) {
if (obj.next.includes('.')) {
return { ...obj };
}
return { ...obj, next: `${obj.next}.` };
}
if (obj.operation) {
return { ...obj, next: '0.' };
}
if (obj.total) {
if (obj.total.includes('.')) {
return {};
}
return { ...obj, next: `${obj.total}.` };
}
return { ...obj, next: '0.' };
}

if (buttonName === '=') {
if (obj.next && obj.operation) {
return {
total: operate(obj.total, obj.next, obj.operation),
next: null,
operation: null,
};
}
// '=' with no operation, nothing to do
return {};
}

if (buttonName === '+/-') {
if (obj.next) {
return { ...obj, next: (-1 * parseFloat(obj.next)).toString() };
}
if (obj.total) {
return { ...obj, total: (-1 * parseFloat(obj.total)).toString() };
}
return {};
}

// Button must be an operation

// When the user presses an operation button without having entered
// a number first, do nothing.
// if (!obj.next && !obj.total) {
// return {};
// }

// User pressed an operation after pressing '='
if (!obj.next && obj.total && !obj.operation) {
return { ...obj, operation: buttonName };
}

// User pressed an operation button and there is an existing operation
if (obj.operation) {
if (obj.total && !obj.next) {
return { ...obj, operation: buttonName };
}

if (!obj.total) {
return { total: 0, operation: buttonName };
}

return {
total: operate(obj.total, obj.next, obj.operation),
next: null,
operation: buttonName,
};
}

// no operation yet, but the user typed one

// The user hasn't typed a number yet, just save the operation
if (!obj.next) {
return { operation: buttonName };
}

// save the operation and shift 'next' into 'total'
return {
total: obj.next,
next: null,
operation: buttonName,
};
}
30 changes: 30 additions & 0 deletions src/logic/operate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Big from 'big.js';

export default function operate(numberOne, numberTwo, operation) {
const one = Big(numberOne);
const two = Big(numberTwo);
if (operation === '+') {
return one.plus(two).toString();
}
if (operation === '-') {
return one.minus(two).toString();
}
if (operation === 'x') {
return one.times(two).toString();
}
if (operation === '÷') {
try {
return one.div(two).toString();
} catch (err) {
return "Can't divide by 0.";
}
}
if (operation === '%') {
try {
return one.mod(two).toString();
} catch (err) {
return "Can't find modulo as can't divide by 0.";
}
}
throw Error(`Unknown operation '${operation}'`);
}