React

by Niranjan Borawake

HTML

<div id="app"></div>

CSS

.house, .kid-room {
  background-color: #bee5e1;
  border-style: double;
  border-width: 15px;
  padding: 20px;
  position: relative;
}

.house label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: black;
  color: white;
}

.house button {
  margin-right: 10px;
}

.house .parents-action {
  color: blue;
  margin: 20px 0;
}

.kid-room {
  background-color: #de6464;
  color:  white;
  border-color: black;
  margin-top: 10px;
}

.kid-action {
  margin-top: 50px;
}

.counter {
  position: absolute;
  top: 0;
  left: 0%;
  color: yellow;
  background-color: black;
  padding: 10px;
}

React

let kidRoomDoorKnockCounter = 0;

const KidRoom = React.memo(function KidRoom ({ kidAction = 'doing nothing' }) {

	return (
  	
    <section className="kid-room">
      <label>Kid's Room</label>
      <div className="counter">Door Knock Counter: { ++kidRoomDoorKnockCounter }</div>
      <div className="kid-action">Kid is {kidAction}.</div>
    </section>
    
  );
});

function House () {
	
  const [parentAction, setParentAction] = React.useState('doing nothing');
  const [kidAction, setKidAction] = React.useState('doing nothing');
  
  const makeKid = (action) => {
  	setKidAction(action);
  };
  
  return (
  	
    <section className="house">
      <label>House</label>
      <h1>Parents</h1>
      <div>
        <button onClick={() => setParentAction('eating')}>Eat</button>
        <button onClick={() => setParentAction('working')}>Work</button>
        <button onClick={() => setParentAction('watching TV')}>Watch TV</button>
        <button onClick={() => setParentAction('sleeping')}>Sleep</button>
      </div>      
      <div className="parents-action">Parents are {parentAction}.</div>
      
      <h1>Make the Kid</h1>
      <div>
        <button onClick={() => makeKid('eating')}>Eat</button>
        <button onClick={() => makeKid('playing')}>Play</button>
        <button onClick={() => makeKid('sleeping')}>Sleep</button>
      </div>
      
      <KidRoom kidAction={kidAction} />
      
    </section>
    
  );
}

ReactDOM.render(<House />, document.querySelector("#app"));