Simplest Calculator

In this assessment, your goal is to build a simple calculator app.

The app should be fully functional. For the CSS you don't need to do it by yourself, copy the code below and paste it on App.css in the src folder, before you paste it make sure you delete the default code on App.css file

* {
    font-family: sans-serif;
  }
  input,
  button {
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
  }
  input {
    display: block;
    margin-bottom: 20px;
  }
  button {
    border: 1px solid gray;
    background: whitesmoke;
    margin-right: 5px;
  }
  button:nth-last-child(2),
  button:nth-last-child(1) {
    background: tomato;
    color: white;
  }
  

You'll also need to import the App.css file into App.js. Delete the code inside App.js and paste the code below

Here is the app's starting code:

// ~ you need to import something from react here, but what? ~

// ~ import your style from app.css in this line ~

function App() { 
  const inputRef = useRef(null); 
  const resultRef = useRef(null); 
  // ~ declare result state here ~
 
  function plus(e) { 
    e.preventDefault(); 
    setResult((result) => result + Number(inputRef.current.value)); 
  }; 
 
  function minus(e) { 
  	//add the code for minus function here
  };
 
  function multiply(e) { 
    //add the code for multiply function here 
  }; 
 
  function divide(e) { 
    //add the code for divide function here 
  };
 
  function resetInput(e) {
   //add the code for resetInput function here 
  }; 
 
  function resetResult(e) { 
    //add the code for resetResult function here 
  }; 
 
  return ( 
    <div className="App"> 
      <div> 
        <h1>Simplest Working Calculator</h1> 
      </div> 
      <form> 
        <p ref={resultRef}> {/* add the value of the current total */}  </p> 
        <input
          pattern="[0-9]" 
          ref={inputRef} 
          type="number" 
          placeholder="Type a number" 
        /> 
        <button onClick={plus}>Add</button> 
        {/* Add the subtract button */}
        {/* Add the multiply button */}
        {/* Add the divide button */}
        {/* Add the resetInput button */}
        {/* Add the resetResult button */}
        
      </form> 
    </div> 
  ); 
} 
 
//~ You have to export the file here ~

Try to style it for extra score :D

Test Case:

1. Type the number 1 into the input field. Press the add button. Did the 0 above the input change to 1 after you pressed the add button?

2. Press the reset input button, then the reset result button, so that the number in the input field and above the input field are both reset to 0. If both numbers shown in the calculator are now reset to 0, proceed to the next step.

3. Type the number 10 into the input field. Press the add button. The 0 above the input should change to 10. Now press the multiply button. Did the number 10 above the input change to 100 after you pressed the multiply button?

4. Press the reset input button, then the reset result button, so that the number in the input field and above the input field are both reset to 0. If both numbers shown in the calculator are now reset to 0, proceed to the next step.

5. Type the number 20 into the input field, then press the add button. With the number 20 now showing above the input field, and the number 20 showing inside the input field, press the divide button. Did the number above the input field update to 1?

6. Press the reset input button, then the reset result button, so that the number in the input field and above the input field are both reset to 0. If both numbers shown in the calculator are now reset to 0, proceed to the next step.

7. Type the number 100 into the input field, then press the add button. With the number 100 now showing above the input field, change the number in the input field to 60. Press the subtract button. Did the number above the input field update to 40?