msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

Merge pull request #5 from ardaninsaturnu/main

Browse Source 
day 12 almost finished.
pull/162/head
Mehmet Arda Çelik 3 years ago committed by GitHub
parent e347cda7a2 3275575433
commit 31e0293404
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 76 additions and 78 deletions
Show Stats Download Patch File Download Diff File

154
12_Day_Forms/12_forms_boilerplate/src/index.js
Unescape View File

@ -148,34 +148,33 @@ class App extends Component {
<div className='form-group'> <div className='form-group'>
<label htmlFor='firstName'>First Name </label> <label htmlFor='firstName'>First Name </label>
<input <input
type='text' type='text'
name='firstName' name='firstName'
value={this.state.firstName} value={this.state.firstName}
onChange={this.handleChange} onChange={this.handleChange}
onBlur={this.handleBlur} onBlur={this.handleBlur}
placeholder='First Name' placeholder='First Name'
/>{' '} /> <br />
<br />
<small>{firstName}</small> <small>{firstName}</small>
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='lastName'>Last Name </label> <label htmlFor='lastName'>Last Name </label>
<input <input
type='text' type='text'
name='lastName' name='lastName'
value={this.state.lastName} value={this.state.lastName}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Last Name' placeholder='Last Name'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='email'>Email </label> <label htmlFor='email'>Email </label>
<input <input
type='email' type='email'
name='email' name='email'
value={this.state.email} value={this.state.email}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Email' placeholder='Email'
/> />
</div> </div>
</div> </div>
@ -183,44 +182,44 @@ class App extends Component {
<div className='form-group'> <div className='form-group'>
<label htmlFor='tel'>Telephone </label> <label htmlFor='tel'>Telephone </label>
<input <input
type='tel' type='tel'
name='tel' name='tel'
value={this.state.tel} value={this.state.tel}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Tel' placeholder='Tel'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='dateOfBirth'>Date of birth </label> <label htmlFor='dateOfBirth'>Date of birth </label>
<input <input
type='date' type='date'
name='dateOfBirth' name='dateOfBirth'
value={this.state.dateOfBirth} value={ this.state.dateOfBirth }
onChange={this.handleChange} onChange={ this.handleChange }
placeholder='Date of Birth' placeholder='Date of Birth'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='favoriteColor'>Favorite Color</label> <label htmlFor='favoriteColor'>Favorite Color</label>
<input <input
type='color' type='color'
id='favoriteColor' id='favoriteColor'
name='favoriteColor' name='favoriteColor'
value={this.state.favoriteColor} value={this.state.favoriteColor}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Favorite Color' placeholder='Favorite Color'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='weight'>Weight </label> <label htmlFor='weight'>Weight </label>
<input <input
type='number' type='number'
id='weight' id='weight'
name='weight' name='weight'
value={this.state.weight} value={this.state.weight}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Weight in Kg' placeholder='Weight in Kg'
/> />
</div> </div>
<div> <div>
@ -234,34 +233,34 @@ class App extends Component {
<p>Gender</p> <p>Gender</p>
<div> <div>
<input <input
type='radio' type='radio'
id='female' id='female'
name='gender' name='gender'
value='Female' value='Female'
onChange={this.handleChange} onChange={this.handleChange}
checked={this.state.gender === 'Female'} checked={this.state.gender === 'Female'}
/> />
<label htmlFor='female'>Female</label> <label htmlFor='female'>Female</label>
</div> </div>
<div> <div>
<input <input
id='male' id='male'
type='radio' type='radio'
name='gender' name='gender'
value='Male' value='Male'
onChange={this.handleChange} onChange={this.handleChange}
checked={this.state.gender === 'Male'} checked={this.state.gender === 'Male'}
/> />
<label htmlFor='male'>Male</label> <label htmlFor='male'>Male</label>
</div> </div>
<div> <div>
<input <input
id='other' id='other'
type='radio' type='radio'
name='gender' name='gender'
value='Other' value='Other'
onChange={this.handleChange} onChange={this.handleChange}
checked={this.state.gender === 'Other'} checked={this.state.gender === 'Other'}
/> />
<label htmlFor='other'>Other</label> <label htmlFor='other'>Other</label>
</div> </div>
@ -271,28 +270,28 @@ class App extends Component {
<p>Select your skills</p> <p>Select your skills</p>
<div> <div>
<input <input
type='checkbox' type='checkbox'
id='html' id='html'
name='html' name='html'
onChange={this.handleChange} onChange={this.handleChange}
/> />
<label htmlFor='html'>HTML</label> <label htmlFor='html'>HTML</label>
</div> </div>
<div> <div>
<input <input
type='checkbox' type='checkbox'
id='css' id='css'
name='css' name='css'
onChange={this.handleChange} onChange={this.handleChange}
/> />
<label htmlFor='css'>CSS</label> <label htmlFor='css'>CSS</label>
</div> </div>
<div> <div>
<input <input
type='checkbox' type='checkbox'
id='javascript' id='javascript'
name='javascript' name='javascript'
onChange={this.handleChange} onChange={this.handleChange}
/> />
<label htmlFor='javascript'>JavaScript</label> <label htmlFor='javascript'>JavaScript</label>
</div> </div>
@ -300,16 +299,15 @@ class App extends Component {
<div> <div>
<label htmlFor='bio'>Bio</label> <br /> <label htmlFor='bio'>Bio</label> <br />
<textarea <textarea
id='bio' id='bio'
name='bio' name='bio'
value={this.state.bio} value={this.state.bio}
onChange={this.handleChange} onChange={this.handleChange}
cols='120' cols='120'
rows='10' rows='10'
placeholder='Write about yourself ...' placeholder='Write about yourself ...'
/> />
</div> </div>
<div> <div>
<input type='file' name='file' onChange={this.handleChange} /> <input type='file' name='file' onChange={this.handleChange} />
</div> </div>

Write Preview
Loading…
Cancel
Save