Events #4
Merged
Events #4
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Owner
Kakalanp
commented
Mar 16, 2022
•
Kakalanp
commented
- Adding big.js.
- Adding functions provided by Microverse for the calculator to work.
- Adding event handlers to the calculator buttons.
- Adding a pair of comments for better readability.
- Adding a sorting algorithm that creates buttons from an array and adds class names accordingly.
- Now the calculator is ready to go
Gambit142
suggested changes
Mar 16, 2022
There was a problem hiding this comment.
Hi @Kakalanp 👋,
Good job so far!
Highlights
- Linters checks passed ✔️
- Correct use of logic files ✔️
However, there are some issues that you still need to work on to go to the next project but you are almost there!
Required Changes ♻️
KIndly check the comments under the review.
Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.
You can also consider the optional change I suggested.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
src/components/Calculator.js
Outdated
Comment on lines
5
to
16
| export default function Calculator() { | ||
| const [total, setTotal] = useState(0); | ||
| const [next, setNext] = useState(null); | ||
| const [operation, setOperation] = useState(null); | ||
|
|
||
| function clickHandler(e) { | ||
| const result = calculate({ total, next, operation }, e.target.textContent); | ||
| setTotal(result.total); | ||
| setNext(result.next); | ||
| setOperation(result.operation); | ||
| } | ||
|
|
There was a problem hiding this comment.
- Nice work done on this project. Your Calculator component should be a class-based component for now. There is nothing wrong with how you have it now, but the project requirements state that you should use React Lifecycle methods. The only way you can use a lifecycle method is by turning your component into a class-based component. You can read this article to have an idea of how to use lifecycle methods. 👍
There was a problem hiding this comment.
I completely missed that requirement, I just did the refactoring, thanks! 😁
src/components/Calculator.js
Outdated
Comment on lines
28
to
83
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>AC</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>+/-</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>+/-</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>%</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>%</p> | ||
| </div> | ||
| <div className={styles.calculator__button__orange}> | ||
| <p>÷</p> | ||
| <div className={styles.calculator__button__orange} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>÷</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>7</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>7</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>8</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>8</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>9</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>9</p> | ||
| </div> | ||
| <div className={styles.calculator__button__orange}> | ||
| <p>x</p> | ||
| <div className={styles.calculator__button__orange} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>x</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>4</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>4</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>5</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>5</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>6</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>6</p> | ||
| </div> | ||
| <div className={styles.calculator__button__orange}> | ||
| <p>-</p> | ||
| <div className={styles.calculator__button__orange} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>-</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>1</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>1</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>2</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>2</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>3</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>3</p> | ||
| </div> | ||
| <div className={styles.calculator__button__orange}> | ||
| <p>+</p> | ||
| <div className={styles.calculator__button__orange} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>+</p> | ||
| </div> | ||
| <div className={`${styles.calculator__button__grey} ${styles.calculator__button__zero}`}> | ||
| <p>0</p> | ||
| <div className={`${styles.calculator__button__grey} ${styles.calculator__button__zero}`} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>0</p> | ||
| </div> | ||
| <div className={styles.calculator__button__grey}> | ||
| <p>.</p> | ||
| <div className={styles.calculator__button__grey} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>.</p> | ||
| </div> | ||
| <div className={styles.calculator__button__orange}> | ||
| <p>=</p> | ||
| <div className={styles.calculator__button__orange} onClick={clickHandler} onKeyPress={(e) => { if (e.key === 'Enter') clickHandler(); }} role="button" tabIndex={0}> | ||
| <p style={{ userSelect: 'none' }}>=</p> |
There was a problem hiding this comment.
- (Optional) You can put all the symbols and numbers in an array as strings, then map through the array and display every symbol/number dynamically. This way, your code will be dry and there won't be repetition. You can read this article as a guide. 👍
There was a problem hiding this comment.
Thanks for the suggestion! I did an algorithm like that and added the required conditionals for class-naming. 🎉
- Adding an array of symbols to loop from, that way the code is DRY!
bimbolabuari
approved these changes
Mar 17, 2022
There was a problem hiding this comment.
Hi @Kakalanp,
Your project is complete! There is nothing else to say other than... it's time to merge it 
Congratulations! 🎉
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.