React

by MuLtDirectX

HTML

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

CSS

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

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

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class App extends React.Component {

    constructor (props) {
    super(props)
    this.state = {
      firstName: '',
      secondName: '',
      email: '',
      phoneNumber: '',
      password: '',
      confirmPassword: ''
    }
  }

  handleChanging (input) {
    this.setState(input)
  }

  render () {

    let firstNameFlag = false;
    (this.state.firstName.length < 3) ? firstNameFlag = false : firstNameFlag = true
    let secondNameFlag = false;
    ((this.state.secondName.length < 3)) ? secondNameFlag = false : secondNameFlag = true
    let emailFlag = false;
    (!this.state.email.match(/^[-._a-z0-9]+@(?:[a-z0-9][-a-z0-9]+\.)+[a-z]{2,6}$/))
      ? emailFlag = false : emailFlag = true
    let phoneNumberFlag = false;
    (!this.state.phoneNumber.match(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/))
      ? phoneNumberFlag = false : phoneNumberFlag = true
    let passwordFlag = false;
    ((this.state.password.length > 3) && (this.state.confirmPassword.length > 3)
      && (this.state.password === this.state.confirmPassword)) ? passwordFlag = true : passwordFlag = false

    return (
      <form className='form'>
        <p>First name (more than 3 letters)</p>
        <input
          type='text'
          value={this.state.firstName}
          onChange={(e) => this.handleChanging({ firstName: e.currentTarget.value })}
          style={(!firstNameFlag) ? { border: '2px solid red' } : { border: '2px solid green' }}
        />
        <p>Second name (more than 3 letters)</p>
        <input
          type='text'
          value={this.state.secondName}
          onChange={(e) => this.handleChanging({ secondName: e.currentTarget.value })}
          style={(!secondNameFlag) ? { border: '2px solid red' } : { border: '2px solid green' }}
        />
        <p>Email</p>
        <input
          type='email'
          onChange={(e) => this.handleChanging({ email: e.currentTarget.value })}
          style={(!emailFlag) ? { border: '2px solid...