React

by Abdul Ahmad

HTML

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

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.app {
  display: flex;
}

.column {
  margin: 0 5px;
}

.dice {
  height: 250px;
}

.die {
  border: 1px solid #444;
  border-radius: 5px;
  padding: 20px 25px;
  font-weight: bold;
  
  +.die {
    margin-top: 10px;
  }
}

React

function Die(props) {
	const { number } = props;
  
  return (
    <div className='die'>
      { number }
    </div>
  );
}

class TodoApp extends React.Component {
	state = {
  	
  };
  
  render() {
    return (
      <div className='app'>
        <div className='column'>
          <div className='dice'>
            <Die number='1' />
            <Die number='1' />
            <Die number='1' />
            <div className='button'>
              roll 1
            </div>
            <div className='button'>
              roll 2
            </div>
            <div className='button'>
              roll 3
            </div>
          </div>
        </div>
        <div className='column'>
          <div className='dice'>
            <Die number='1' />
            <Die number='1' />
          </div>
          <div className='buttons'>
            <div className='button'>
              roll 1
            </div>
            <div className='button'>
              roll 2
            </div>
          </div>
        </div>
      </div>
    )
  }
}

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