In this deliverable, you'll be building a calculator with React, and only minimal instructions have been provided for you to really think about what's happening.
At first, your calculator will just add 2 numbers together when they are typed in. For the bonus, you might decide to get more creative.
Fork
andclone
this repositorycd
into the new directorynpm i
to install our dependenciesnpm start
to spin up our app
- In the provided Calculator.jsx file, create your
Calculator
as a component. - Add the following JSX to the return of your Calculator component:
<div className="container">
<div className="add">
<input type="text" placeholder="Enter a number" />
<span>+</span>
<input type="text" placeholder="Enter a number" />
<button>=</button>
</div>
<h3 className="results">Results go here!</h3>
</div>
- Make sure to
import
yourCalculator
component intoApp.js
!
Set up the initial state of your Calculator
component with useState
. HINT: Don't forget - you'll need to import it from React!
- What state will you need to track?
- What values should those state items start with?
- Where is that state displayed in the browser?
Hint: Think about creating state variables for the first number, second number, and result to start. An empty string
""
might be a good place to start, since we're using 'text' inputs for our numbers.
You will want to trigger a function when the values in your text inputs change. You can capture these values by writing a function in your Calculator
component that fires within an anonymous function () =>
in the input's onChange
property. Let's say I have a text input tracking my first number.
<input
type="number"
name="num1"
placeholder="Enter your first number"
value={someStateVariable}
onChange={(e) => handleNum(e, 'num1')}
/>
I want to store this number as part of my state. Let's say I decided to call it num1
. Within the function that I've defined in my Calculator
component above the return I could set my state like so:
const handleNum = (e, num) => {
console.log(num)
console.log(e.target.value)
// CONDITION
// If num is num1:
// set num1 to e.target.value
// Otherwise
// set num2 to e.target.value
}
Hint: Remember to use proper state-setting functions for state variables (they're the only things that can directly affect that state!).
For example, if I had a useState() variable
const [result, setResult] = useState('')
, I would update its state with something like the following:setResult(someValue)
If you decided to use buttons for your calculator, you probably want to use onClick
instead of onChange
, but the concepts are the same! Here is some additional documentation on React's forms and event handling:
Once you've got your event handlers set up to capture the numbers from your text inputs, you'll need to create function that calculates the final result when the =
button is clicked. Example:
const handleSolution = () => {
// If num1 and num2 are not empty strings
// here would be a good place to:
// declare a variable equal to the arithmetic sum of num1 and num2
// since they are strings, a method like parseInt() may be useful here
// set the state of the result to the arithmetic sum of num1 and num2
// After setting the result state, you could clear the state of num1 and num2
// by setting them back to empty strings
// If you want to continue using the result that was just calculated above
// Maybe you could just clear num2
// And set the state of num1 to the result that was just calculated
...
<button onClick={() => handleSolution()}>=</button>
}
Once the state of the result
has been set, React will re-render the whole component. Make sure you have a place in your JSX that displays the result!
state
used withuseState
to create the initial state for theCalculator
component- Numbers must both come from text inputs and be added arithmetically, not as joined strings
- A result from both numbers being added together must display on the page after the
=
button is clicked - The result must be equal to the sum of both numbers from the text inputs
- Add in logic that prevents the solution from being calculated if users do not enter a number in the text inputs
- Make the calculator work with any of the 4 basic arithmetic operations (
+
,-
,*
,/
). - How will this change your
state
and your JSX? HINT: A state variable for anoperator
may be useful here. - Try implementing a solution without a
useState
variable for the result, using only the two number states.
- Pull Request must be submitted utilizing these guidelines: PR Guidelines