React

by Abdul Ahmad

HTML

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

CSS

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

React

class TodoApp extends React.Component {
  render() {
  	const hideConfirmPasswordClass = '';
    const submitType = '';
  
    return (
      <div className='login-signup-container'>
        <form className='login-signup-field' onSubmit={this.handleSubmit}>
          <div className='welcome noselect'>
            Welcome
          </div>
          <div className='login-signup-field-input-container '>
            <p className='login-signup-field-input-title '> username: </p>
            <input className='italic login-signup-field-input ' id='username' placeholder='username' />
          </div>
          <div className='login-signup-field-input-container '>
            <p className='login-signup-field-input-title '> password: </p>
            <input className='italic login-signup-field-input ' id='password' type='password' placeholder='password' />
          </div>
          <div className='login-signup-field-input-container '>
            <div className='login-signup-field-input-container '>
              <p className='login-signup-field-input-title '> signup </p>
              <input className='' id='newUser' type='checkbox' onClick={this.handleNewUsers} />
            </div>
            <input className={hideConfirmPasswordClass + ' italic login-signup-field-input '} id='confirmPassword' type='password' placeholder='confirm password' />
          </div>
          <input className='login-signup-field-input-submit ' type='submit' value={submitType} />
        </form>
      </div>
    );
  }
}

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

class FormInputText extends React.Component {
	render() {
  	return (
    	  	<div className='form-input-container'>
  	  <label></label>
      <input className='input' type='' />
      <p className='input-message' />
  	</div>
    );
  }
}