Browse Source

HW-react-03 done

Olga_Brekhuntsova 2 years ago
parent
commit
c0e8d66e77
2 changed files with 11 additions and 9 deletions
  1. 1 0
      hw-react-03-jsx/src/App.css
  2. 10 9
      hw-react-03-jsx/src/App.js

+ 1 - 0
hw-react-03-jsx/src/App.css

@@ -50,6 +50,7 @@
 }
 .timerBoard.ms {
   width: 240px;
+  height: 45px;
 }
 .controlsWrapper {
   width: 220px;

+ 10 - 9
hw-react-03-jsx/src/App.js

@@ -351,17 +351,14 @@ const TimerContainerReset = ({ seconds, refresh, render }) => {
   }, [btnState]);
   const Render = (props) => { return render(props) };  
   pauseState = counter;
-  return <><TimerControlInput counter={counter} handleUserInput={handleUserInput} time={ time}/>
-    <Render seconds={counter.toFixed(2)} />
-     <div className='controlsWrapper'>
-   <button className='timerBtn' onClick={handleClick}> {  btnState ? "Pause" : "Start"}</button>
-      <button className='timerBtn' onClick={() => clearFunc() }> Reset</button>
-      </div>
-    </>
+  return <>    <Render seconds={counter.toFixed(2)} />
+    <TimerControlInput counter={counter} handleUserInput={handleUserInput} time={time} handleClick={handleClick} clearFunc={clearFunc} btnState={btnState} />
+
+        </>
 };         
 
 
-const TimerControlInput = ({ counter, handleUserInput, time}) => {
+const TimerControlInput = ({ counter, handleUserInput, time, handleClick, clearFunc, btnState}) => {
   return  <> 
    <div className='timerBoard ms'>
       <input className="timeCell" name="inputHours" maxLength="2" disabled={!counter ? false : true} value={time.hours} placeholder="hh" onInput={e => { handleUserInput(e.target.value, 'hours') }} />
@@ -369,7 +366,11 @@ const TimerControlInput = ({ counter, handleUserInput, time}) => {
       <input className="timeCell"name="inputMins"  maxLength="2" disabled={!counter?false:true  } value={time.mins} placeholder="mm" onInput={e => {handleUserInput(e.target.value, 'mins') }}/>
       <span>:</span>
       <input className="timeCell" name="inputSecs" maxLength="2" disabled={!counter ? false : true} value={time.secs} placeholder="ss" onInput={e => {handleUserInput(e.target.value, 'secs') }}/>
-      </div> 
+    </div> 
+       <div className='controlsWrapper'>
+   <button className='timerBtn' onClick={handleClick}> {  btnState ? "Pause" : "Start"}</button>
+      <button className='timerBtn' onClick={() => clearFunc() }> Reset</button>
+      </div>
   </>
 }