Calculator components #2
Merged
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
Emmyn5600
approved these changes
Mar 15, 2022
There was a problem hiding this comment.
Hi @iLynette
Your project is complete! There is nothing else to say other than... it's time to merge it 
Congratulations! 🎉 👏 👏 💯
Optional suggestions
- Check the comment under the review
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.
Cheers and Happy coding!:clap::clap::clap:
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
_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.
Comment on lines
+9
to
+33
| <div className="container"> | ||
| <form> | ||
| <input type="text" /> | ||
| </form> | ||
| <div className="keypad"> | ||
| <div className="clear num">AC</div> | ||
| <div className="ad num">+/-</div> | ||
| <div className="modulo num">%</div> | ||
| <div className="divide operator">÷</div> | ||
| <div className="num">7</div> | ||
| <div className="num">8</div> | ||
| <div className="num">9</div> | ||
| <div className="times operator">×</div> | ||
| <div className="num">4</div> | ||
| <div className="num">5</div> | ||
| <div className="num">6</div> | ||
| <div className="clear operator">–</div> | ||
| <div className="num">1</div> | ||
| <div className="num">2</div> | ||
| <div className="num">3</div> | ||
| <div className="add operator">+</div> | ||
| <div className="zero">0</div> | ||
| <div className="num">.</div> | ||
| <div className="equals operator">=</div> | ||
| </div> |
There was a problem hiding this comment.
- Instead of displaying the numbers as the text, I would recommend making them as the buttons. For example:
<button type="button" className="calc-btn">{text}</button?
You can implement this in another file and import it to the component/calculator.
There was a problem hiding this comment.
This does look better. thank you @Emmyn5600 I will change it to this
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.
In this project I implemented the following;
Create a directory called
components.Inside components, create a new
Calculator.jsfile.In Calculator.js, create a React component that matches the required design: