import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  
  handleFormSubmit = event => {
    event.preventDefault()
    console.log(event.target.username.value)  
  }
  
  render() {
    return (
      <>
        <h1>Create an Account</h1>
        <form onSubmit={this.handleFormSubmit}>
          <label>Username</label>
          <input type="text" name="username" />
          
          <label>Password</label>
          <input type="password" name="password" />
          
          <label>Avatar Image</label>
          <input type="text" name="avatar" />
          <img src="https://www.kindpng.com/picc/m/78-785827_user-profile-avatar-login-account-male-user-icon.png" alt="Avatar image" />
          
          <label>Account Type</label>
          <select name="type">
            <option value="free">Free</option>
            <option value="normal">Normal</option>
            <option value="pro">Pro</option>
          </select>
          
          <label>
            Get Our Newsletter! <input type="checkbox" name="newsletter" />
          </label>
          
          <input type="submit" value="Sign Up" />
        </form>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));