Add an h2 title on handleClick function on Calculator.js file component

ClaudiaRojasSoto · Jul 11, 2023 · d96f574 · d96f574
1 parent 3057625
commit d96f574
Showing 1 changed file with 33 additions and 30 deletions.
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
@@ -46,36 +46,39 @@ function Calculator() {
  const displayValue = next || total || '0';
 
  return (
- <div className="calculator">
- <Display value={displayValue} />
- <div className="row">
- <Button value="AC" type="clear" onClick={() => handleClick('AC')} />
- <Button value="+/-" onClick={() => handleClick('+/-')} />
- <Button value="%" onClick={() => handleClick('%')} />
- <Button value="÷" type="operator" onClick={() => handleClick('÷')} />
- </div>
- <div className="row">
- <Button value="1" onClick={() => handleClick('1')} />
- <Button value="2" onClick={() => handleClick('2')} />
- <Button value="3" onClick={() => handleClick('3')} />
- <Button value="+" type="operator" onClick={() => handleClick('+')} />
- </div>
- <div className="row">
- <Button value="4" onClick={() => handleClick('4')} />
- <Button value="5" onClick={() => handleClick('5')} />
- <Button value="6" onClick={() => handleClick('6')} />
- <Button value="-" type="operator" onClick={() => handleClick('-')} />
- </div>
- <div className="row">
- <Button value="7" onClick={() => handleClick('7')} />
- <Button value="8" onClick={() => handleClick('8')} />
- <Button value="9" onClick={() => handleClick('9')} />
- <Button value="x" type="operator" onClick={() => handleClick('x')} />
- </div>
- <div className="row">
- <Button value="0" type="zero" onClick={() => handleClick('0')} />
- <Button value="." onClick={() => handleClick('.')} />
- <Button value="=" type="operator" onClick={() => handleClick('=')} />
+ <div className="calculator-wrapper">
+ <h2 className="title">Let is do some Math!</h2>
+ <div className="calculator">
+ <Display value={displayValue} />
+ <div className="row">
+ <Button value="AC" type="clear" onClick={() => handleClick('AC')} />
+ <Button value="+/-" onClick={() => handleClick('+/-')} />
+ <Button value="%" onClick={() => handleClick('%')} />
+ <Button value="÷" type="operator" onClick={() => handleClick('÷')} />
+ </div>
+ <div className="row">
+ <Button value="1" onClick={() => handleClick('1')} />
+ <Button value="2" onClick={() => handleClick('2')} />
+ <Button value="3" onClick={() => handleClick('3')} />
+ <Button value="+" type="operator" onClick={() => handleClick('+')} />
+ </div>
+ <div className="row">
+ <Button value="4" onClick={() => handleClick('4')} />
+ <Button value="5" onClick={() => handleClick('5')} />
+ <Button value="6" onClick={() => handleClick('6')} />
+ <Button value="-" type="operator" onClick={() => handleClick('-')} />
+ </div>
+ <div className="row">
+ <Button value="7" onClick={() => handleClick('7')} />
+ <Button value="8" onClick={() => handleClick('8')} />
+ <Button value="9" onClick={() => handleClick('9')} />
+ <Button value="x" type="operator" onClick={() => handleClick('x')} />
+ </div>
+ <div className="row">
+ <Button value="0" type="zero" onClick={() => handleClick('0')} />
+ <Button value="." onClick={() => handleClick('.')} />
+ <Button value="=" type="operator" onClick={() => handleClick('=')} />
+ </div>
  </div>
  </div>
  );