Skip to content

Instantly share code, notes, and snippets.

@vvzubkov

vvzubkov/scifi.html

Forked from anonymous/scifi.html
Last active January 26, 2016 07:49
Show Gist options
  • Save vvzubkov/e8120eaf0fd2a4688368 to your computer and use it in GitHub Desktop.
Save vvzubkov/e8120eaf0fd2a4688368 to your computer and use it in GitHub Desktop.
Download ZIP
Задание для https://goo.gl/WGrXbu
Raw
scifi.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Sci-Fi</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style>
.label {
width: 100%;
color: #000;
font-size: 14px;
display: inline-block;
cursor: pointer;
}
input[type=radio] {
display: block;
margin: 0 auto 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Задание №4</h1>
<div class="row">
<div class="col-md-6">
<p>Это страница создания персонажа в онлайн-игрушке по мотивам научной фантастики начала XX века (игрушка воображаемая, мы её придумали специально для этого задания). Нужно сделать <strong>компонент на React.js для выбора параметров персонажа:</strong> планеты, расы и пола.</p>
<ul>
<li>планет всего три: «Земля», «Марс» и «Венера»;</li>
<li>рас три: люди, марсиане и венерианцы. Марсиане могут быть только с Марса, венерианцы только с Венеры, а люди могут с любой из трёх планет;</li>
<li>полов у людей два, у венерианцев — три (кроме мужского и женского есть средний), у марсиан пол вообще один (мужской).</li>
</ul>
<p>При создании компонента рекомендуется придерживаться здравого смысла и минимализма.</p>
</div>
<div class="col-md-6">
<form>
<div class="form-group">
<label for="name">Имя</label>
<input class="form-control" name="name" id="name">
</div>
<div id="container"></div>
<input type="submit" class="btn btn-primary" value="Создать персонажа">
</form>
</div>
</div>
</div>
<script type="text/babel">
var Selector = React.createClass({
getInitialState () {
return {
race: this.props.race,
planet: this.props.planet,
gender: this.props.gender
};
},
selectRace(event) {
this.setState({race: event.target.value});
},
selectPlanet(event) {
this.setState({planet: event.target.value});
},
selectGender(event) {
this.setState({gender: event.target.value});
},
render() {
let state = this.state;
return (
<div className="form-group">
<div className="row">
<label className="label col-xs-12">
Выберите рассу
</label>
<div className="col-xs-4">
<label htmlFor='Human' className='label'>
Люди
</label>
<input id='Human' type='radio'
value="human"
name="race"
checked={state.race == 'human'}
onChange={this.selectRace}/>
</div>
<div className="col-xs-4">
<label htmlFor='Martian' className='label'>
Марсиане
</label>
<input id='Martian' type='radio'
value="martian"
name="race"
checked={state.race == 'martian'}
onChange={this.selectRace}/>
</div>
<div className="col-xs-4">
<label htmlFor='Venusian' className='label'>
Венерианцы
</label>
<input id='Venusian' type='radio'
value="venusian"
name="race"
checked={state.race == 'venusian'}
onChange={this.selectRace}/>
</div>
</div>
<div className="row">
<label className="label col-xs-12">
Выберите планету
</label>
<div className="col-xs-4">
<label htmlFor='Earth' className='label'>
Земля
</label>
<input id='Earth' type='radio'
value="earth"
name='planet'
checked={state.planet == 'earth'}
disabled={state.race == 'martian' || state.race == 'venusian'}
onChange={this.selectPlanet}/>
</div>
<div className="col-xs-4">
<label htmlFor='Mars' className='label'>
Марс
</label>
<input id='Mars' type='radio'
value="mars"
name='planet'
checked={state.planet == 'mars' | state.race == 'martian'}
disabled={state.race == 'venusian'}
onChange={this.selectPlanet}/>
</div>
<div className="col-xs-4">
<label htmlFor='Venus' className='label'>
Венера
</label>
<input id='Venus' type='radio'
value="venus"
name='planet'
disabled={state.race == 'martian'}
checked={state.planet == 'venus' || state.race == 'venusian'}
onChange={this.selectPlanet}/>
</div>
</div>
<div className="row">
<label className="label col-xs-12">
Выберите пол
</label>
<div className="col-xs-4">
<label htmlFor='Man' className='label'>
Муж
</label>
<input id='Man' type='radio'
value="man"
name='gender'
checked={state.gender == 'man'}
onChange={this.selectGender}/>
</div>
<div className="col-xs-4">
<label htmlFor='Woman' className='label'>
Жен
</label>
<input id='Woman' type='radio'
value="woman"
name='gender'
checked={state.gender == 'woman'}
disabled={state.race == 'martian'}
onChange={this.selectGender}/>
</div>
<div className="col-xs-4">
<label htmlFor='Neuter' className='label'>
Средний
</label>
<input id='Neuter' type='radio'
value="neuter"
name='gender'
checked={state.gender == 'neuter'}
disabled={state.race == 'martian' || state.race == 'human'}
onChange={this.selectGender}/>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<Selector gender="man" planet="mars" race="human"/>,
document.getElementById('container')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment