From e3aafff5fc80085765cdfabf00c2a51c67d85a70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 12:28:13 -0300 Subject: [PATCH 1/9] Added an alt property to the Commit Jr logo --- challenges/calculadora/src/components/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/calculadora/src/components/Header.jsx b/challenges/calculadora/src/components/Header.jsx index a9e2c88..6c32f39 100644 --- a/challenges/calculadora/src/components/Header.jsx +++ b/challenges/calculadora/src/components/Header.jsx @@ -5,7 +5,7 @@ export default function() { return

Commit Pull Hackquest 2020

- + Commit Jr logo

; } \ No newline at end of file From 70c9c1f2a4e454b0c0824dbc254704516dbe5fd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 12:28:43 -0300 Subject: [PATCH 2/9] Removed the unused variable Fragment --- challenges/calculadora/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/calculadora/src/index.js b/challenges/calculadora/src/index.js index d1fc7e7..975150a 100644 --- a/challenges/calculadora/src/index.js +++ b/challenges/calculadora/src/index.js @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import ReactDom from 'react-dom'; import './index.css'; From 1be1f8d410e7165c9e8a0f039af9d400d16f3334 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 12:29:32 -0300 Subject: [PATCH 3/9] Numbers are now shown on display when clicked --- challenges/calculadora/src/components/Calculator.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/challenges/calculadora/src/components/Calculator.jsx b/challenges/calculadora/src/components/Calculator.jsx index a32dd73..eab0c47 100644 --- a/challenges/calculadora/src/components/Calculator.jsx +++ b/challenges/calculadora/src/components/Calculator.jsx @@ -34,7 +34,10 @@ export default class Calculator extends Component { } addDigit(n) { - // ErrrroR: 7163271 ;-; + this.setState({ + ...this.state, + displayValue: this.state.displayValue === '0' ? n.toString() : this.state.displayValue + n.toString(), + }) } render() { From 17b5556b08bd83b34f3978275bc18bea4021d5af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 12:35:37 -0300 Subject: [PATCH 4/9] Now the memory is cleared when "AC" is clicked --- challenges/calculadora/src/components/Calculator.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/challenges/calculadora/src/components/Calculator.jsx b/challenges/calculadora/src/components/Calculator.jsx index eab0c47..9e02ece 100644 --- a/challenges/calculadora/src/components/Calculator.jsx +++ b/challenges/calculadora/src/components/Calculator.jsx @@ -26,7 +26,9 @@ export default class Calculator extends Component { //Seu objetivo é implementar estas funções clearMemory() { - // ERrrRRooOrRR: 8932183! + this.setState({ + ...initialState, + }) } setOperation(operation) { From 11332977dacd2ef977b4dbce637e3b9cb81caef7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 12:53:58 -0300 Subject: [PATCH 5/9] Created calculate method --- challenges/calculadora/src/components/Calculator.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/challenges/calculadora/src/components/Calculator.jsx b/challenges/calculadora/src/components/Calculator.jsx index 9e02ece..de56e5a 100644 --- a/challenges/calculadora/src/components/Calculator.jsx +++ b/challenges/calculadora/src/components/Calculator.jsx @@ -22,9 +22,15 @@ export default class Calculator extends Component { this.clearMemory = this.clearMemory.bind(this) this.setOperation = this.setOperation.bind(this) this.addDigit = this.addDigit.bind(this) + this.calcular = this.calcular.bind(this) } //Seu objetivo é implementar estas funções + + calculate(){ + + } + clearMemory() { this.setState({ ...initialState, @@ -32,7 +38,11 @@ export default class Calculator extends Component { } setOperation(operation) { - // ERrrRRooOrRR: 2162621 ;-;! + + this.setState({ + ...this.state, + operation: operation, + }) } addDigit(n) { From 15ee05d5af0e70359a792cfa74ce22e0f672726e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 13:54:29 -0300 Subject: [PATCH 6/9] Added some logic to addDigit and setOperation --- .../calculadora/src/components/Calculator.jsx | 62 +++++++++++++++---- 1 file changed, 50 insertions(+), 12 deletions(-) diff --git a/challenges/calculadora/src/components/Calculator.jsx b/challenges/calculadora/src/components/Calculator.jsx index de56e5a..c8744f4 100644 --- a/challenges/calculadora/src/components/Calculator.jsx +++ b/challenges/calculadora/src/components/Calculator.jsx @@ -22,34 +22,72 @@ export default class Calculator extends Component { this.clearMemory = this.clearMemory.bind(this) this.setOperation = this.setOperation.bind(this) this.addDigit = this.addDigit.bind(this) - this.calcular = this.calcular.bind(this) + this.calculate = this.calculate.bind(this) } //Seu objetivo é implementar estas funções calculate(){ - + } clearMemory() { + /* + this method will reset the state to the initial state, clearing the memory + */ this.setState({ ...initialState, }) } - setOperation(operation) { - - this.setState({ - ...this.state, - operation: operation, - }) + async setOperation(operation) { + if(operation === '='){ + /* + if the operation is '=', the method will await the setState and then call the calculate method + */ + await this.setState({ + ...this.state, + values: [this.state.values[0], parseFloat(this.state.displayValue)] + }) + this.calculate() + } + else{ + /* + if the operation is not '=', the method will set the operation in state to the operation called + */ + this.setState({ + ...this.state, + operation: operation, + clearDisplay: true, + }) + } } addDigit(n) { - this.setState({ - ...this.state, - displayValue: this.state.displayValue === '0' ? n.toString() : this.state.displayValue + n.toString(), - }) + // it will verify if it is the first number of the operation or not + if(!this.state.clearDisplay){ + /* + if it is the first number of the operation, the method will verify if there is only a 0 in the display; + if true, it will replace the zero with the digit clicked; + if false, it will put the number in front of the last added digit; + */ + this.setState({ + ...this.state, + displayValue: this.state.displayValue === '0' ? n.toString() : this.state.displayValue + n.toString(), + }) + } + else{ + /* + if there was a number already added to the operation, the method will replace the entire number in the display + for the digit clicked + */ + this.setState({ + ...this.state, + clearDisplay: false, + values: [parseFloat(this.state.displayValue), 0], + displayValue: n, + }) + } } render() { From 0281f2c195d4531c628f9526f07efb046fcaa5a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 13:59:59 -0300 Subject: [PATCH 7/9] Implemented the calculate method --- .../calculadora/src/components/Calculator.jsx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/challenges/calculadora/src/components/Calculator.jsx b/challenges/calculadora/src/components/Calculator.jsx index c8744f4..8e13bfb 100644 --- a/challenges/calculadora/src/components/Calculator.jsx +++ b/challenges/calculadora/src/components/Calculator.jsx @@ -28,8 +28,31 @@ export default class Calculator extends Component { //Seu objetivo é implementar estas funções calculate(){ - - } + /* + this method will calculate the result and show it on the display + */ + let result = 0 + switch(this.state.operation){ + case '+': + result = this.state.values[0] + this.state.values[1] + break; + case '-': + result = this.state.values[0] - this.state.values[1] + break; + case '*': + result = this.state.values[0] * this.state.values[1] + break; + case '/': + result = this.state.values[0] / this.state.values[1] + break; + default: break; + } + this.setState({ + ...this.state, + displayValue: result.toString(), + }) + } + clearMemory() { /* From 37415048c5b6a2411897ab649fda941bb50884f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 14:22:45 -0300 Subject: [PATCH 8/9] New functionality: max of 9 digits on display --- .../calculadora/src/components/Calculator.jsx | 39 ++++++++++++++++--- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/challenges/calculadora/src/components/Calculator.jsx b/challenges/calculadora/src/components/Calculator.jsx index 8e13bfb..ed6b7c6 100644 --- a/challenges/calculadora/src/components/Calculator.jsx +++ b/challenges/calculadora/src/components/Calculator.jsx @@ -47,10 +47,32 @@ export default class Calculator extends Component { break; default: break; } - this.setState({ - ...this.state, - displayValue: result.toString(), - }) + const resultString = result.toString() + + /* + it verifies if the number have more than 9 digits. If true, it verifies if the number has 10 digits and is + a negative number. If true, the method simply displays the number with the minus sign before it + */ + if(resultString.length > 9){ + if(resultString.length === 10 && result < 0){ + this.setState({ + ...this.state, + displayValue: resultString, + }) + } + else{ + this.setState({ + ...this.state, + displayValue: 'Erro', + }) + } + } + else{ + this.setState({ + ...this.state, + displayValue: resultString, + }) + } } @@ -87,8 +109,15 @@ export default class Calculator extends Component { } addDigit(n) { + /* + it will verify if the display value has less than 9 digits. If the number has more than 9 digits, + it does nothing for aesthetic purposes, cause more than 9 digits on the display causes the exceeding + digits to disappear from the display, making difficult to see the real number that is on the state + */ + if(this.state.displayValue.length === 9 && !this.state.clearDisplay); + // it will verify if it is the first number of the operation or not - if(!this.state.clearDisplay){ + else if(!this.state.clearDisplay){ /* if it is the first number of the operation, the method will verify if there is only a 0 in the display; if true, it will replace the zero with the digit clicked; From c346322a29df4ce71a7f4de68c801688bc15da28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20J=C3=BAnior?= Date: Sat, 10 Oct 2020 14:36:45 -0300 Subject: [PATCH 9/9] display is cleaned after operation if add a digit --- challenges/calculadora/src/components/Calculator.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/challenges/calculadora/src/components/Calculator.jsx b/challenges/calculadora/src/components/Calculator.jsx index ed6b7c6..ee567ce 100644 --- a/challenges/calculadora/src/components/Calculator.jsx +++ b/challenges/calculadora/src/components/Calculator.jsx @@ -58,6 +58,7 @@ export default class Calculator extends Component { this.setState({ ...this.state, displayValue: resultString, + clearDisplay: true, }) } else{ @@ -71,6 +72,7 @@ export default class Calculator extends Component { this.setState({ ...this.state, displayValue: resultString, + clearDisplay: true, }) } }