Calculator | React

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 2 years ago

  Hi kxrn0

  That's very impressive work , well done . Most of the functions are working as expected. Here are some more feedback.

  • let the calculator have a maximum number of digits that it can take. Currently I can punch in on the display as long as I want. I see at the end the number is being rounded whilst entering.
  • the theme selector is working well with the the mouse, but try to check with the keyboard - i can make one selection at a time with the arrow key(Firefox browser). I think that this can be due to the fact that , while <Three_Way_Toggle toggle={toggle} theme={theme} /> component has a toggle , the event that changes the state should have also been passed down to the child <input key={key} type="radio" id={key} value={choice} name="choices" checked={currentChoice === choice} onChange={handle_change}/> . This maybe causing some inconsistent on the state.
  • the use of const body = document.documentElement.querySelector("body"); , maybe another issue that you need to look at. That's another variation from using JavaScript that you should be wary of. One way to do it is to move up the state , here is an extract from my solution

  function App() {
    const { selectTheme } = useContext(DataContext)
    return (
      <div
        className={`wrapper  ${selectTheme === 'light' ?
          'light-colors' :
          selectTheme === 'dark' ?
            'dark-colors' :
            'neutral-colors'} `}>
        <div className="app">
          <Header />
          <Main />
        </div>
      </div>
    );
  }
  

  1. selectTheme is my state which is triggered or changed in another component
  2. The div container holds all the components and has a class wrapper and the other class are determined by the state , for example when the state is equal to light then the div will have a class that is called light-colors etc. So here the use of the querySelector and adding classes the JavaScript way has been eliminated.

  • Here is a link to my solution and please feel free to give feedback Calculator

  Marked as helpful

  1

  ---

  

  P

  kxrp•640

  @kxrn0Posted about 2 years ago

  @ChamuMutezva Thanks for the feedback. I'll update the app to toggle the theme with the arrow keys. I'm relatively new to React, so once I get more experience I'll come back to this project and refactor it.

  1