merss19 · December 26, 2015 13:17
diff --git a/scifi.html b/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>
 </head>
 <body>

 <style>
    .form-group{
        padding-left: 15px;
    }
    select option:disabled {
        color: rgba(19, 18, 18, 0.40);
    }

    .form-control{
        margin-bottom: 15px;
        font-size: 16px;
    }
    .error{
        float:left;
        font-size: 18px;
        color: #F75555;
    }

    .btn{
        margin-left: 15px;
    }

 </style>



 <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 class="clearfix">
                <div class="form-group">
                    <label for="name">Имя</label>
                    <input class="form-control" name="name" id="name">
                </div>
                <div id="container" class="clearfix">

                </div>
                <input type="submit" class="btn btn-primary" value="Создать персонажа"/>

            </form>
        </div>
    </div>
 </div>
 <script type="text/babel">
    var Selector = React.createClass({
            getInitialState: function() {
        return {
            valueRace: '',
            valuePlanet: '',
            valueGender: '',
            message:''
        };
    },


    change: function(event){
        this.setState({
            valueRace: event.target.value,
            valueGender:'',
            valuePlanet:'',
            message:''
        });

        if(event.target.value == 2){
            this.setState({
                valueGender:1,
                valuePlanet:2
            });
        }

        if(event.target.value == 3){
            this.setState({
                valueGender:"",
                valuePlanet:3
            });
        }

    },

    changePlanet: function(event){
        this.setState({
            valuePlanet:event.target.value,
            valueGender:''
        });

        if(this.state.valueRace == 0){
            this.setState({
                message:'Select your race!',
                valuePlanet:''
            });
        }

        if(event.target.value == 2){
            this.setState({valueGender:1});
        }
    },

    changeGender: function(event){
        this.setState({valueGender:event.target.value});

        if(this.state.valueRace == 0){
            this.setState({
                message:'Select your race!',
                valueGender:''
            });
        }

    },
    render:function() {
        return (
                <div>

                <div className ="options col-sm-6">
                <select onChange={this.change} value={this.state.valueRace} className="form-control">
                    <option value="0">Select your race</option>
                    <option value="1">Human</option>
                    <option value="2">Martians</option>
                    <option value="3">Venusians</option>
                </select>


                <select  onChange={this.changePlanet} value={this.state.valuePlanet} className="form-control">
                    <option value="0">Select planet</option>
                    <option value="1" disabled = {this.state.valueRace > 1}>Earth</option>
                    <option value="2" disabled = {this.state.valueRace == 3}>Mars</option>
                    <option value="3" disabled = {this.state.valueRace == 2}>Venus</option>
                </select>


                <select  onChange={this.changeGender}   value={this.state.valueGender} className="form-control">
                    <option value="0">Select gender</option>
                    <option value="1" >Male</option>
                    <option value="2" disabled = {this.state.valueRace == 2}>Female</option>
                    <option value="3" disabled = {this.state.valueRace != 3}>Middle</option>
                </select>

                </div>

                <div className = "error">
                        <p>{this.state.message}</p>
                </div>


                </div>);
                }
                });


    ReactDOM.render(
    <Selector gender="man" planet="mars" race="human"/> ,
            document.getElementById('container')
    );
 </script>
 </body>
 </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>
	</head>
	<body>

	<style>
	.form-group{
	padding-left: 15px;
	}
	select option:disabled {
	color: rgba(19, 18, 18, 0.40);
	}

	.form-control{
	margin-bottom: 15px;
	font-size: 16px;
	}
	.error{
	float:left;
	font-size: 18px;
	color: #F75555;
	}

	.btn{
	margin-left: 15px;
	}

	</style>



	<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 class="clearfix">
	<div class="form-group">
	<label for="name">Имя</label>
	<input class="form-control" name="name" id="name">
	</div>
	<div id="container" class="clearfix">

	</div>
	<input type="submit" class="btn btn-primary" value="Создать персонажа"/>

	</form>
	</div>
	</div>
	</div>
	<script type="text/babel">
	var Selector = React.createClass({
	getInitialState: function() {
	return {
	valueRace: '',
	valuePlanet: '',
	valueGender: '',
	message:''
	};
	},


	change: function(event){
	this.setState({
	valueRace: event.target.value,
	valueGender:'',
	valuePlanet:'',
	message:''
	});

	if(event.target.value == 2){
	this.setState({
	valueGender:1,
	valuePlanet:2
	});
	}

	if(event.target.value == 3){
	this.setState({
	valueGender:"",
	valuePlanet:3
	});
	}

	},

	changePlanet: function(event){
	this.setState({
	valuePlanet:event.target.value,
	valueGender:''
	});

	if(this.state.valueRace == 0){
	this.setState({
	message:'Select your race!',
	valuePlanet:''
	});
	}

	if(event.target.value == 2){
	this.setState({valueGender:1});
	}
	},

	changeGender: function(event){
	this.setState({valueGender:event.target.value});

	if(this.state.valueRace == 0){
	this.setState({
	message:'Select your race!',
	valueGender:''
	});
	}

	},
	render:function() {
	return (
	<div>

	<div className ="options col-sm-6">
	<select onChange={this.change} value={this.state.valueRace} className="form-control">
	<option value="0">Select your race</option>
	<option value="1">Human</option>
	<option value="2">Martians</option>
	<option value="3">Venusians</option>
	</select>


	<select onChange={this.changePlanet} value={this.state.valuePlanet} className="form-control">
	<option value="0">Select planet</option>
	<option value="1" disabled = {this.state.valueRace > 1}>Earth</option>
	<option value="2" disabled = {this.state.valueRace == 3}>Mars</option>
	<option value="3" disabled = {this.state.valueRace == 2}>Venus</option>
	</select>


	<select onChange={this.changeGender} value={this.state.valueGender} className="form-control">
	<option value="0">Select gender</option>
	<option value="1" >Male</option>
	<option value="2" disabled = {this.state.valueRace == 2}>Female</option>
	<option value="3" disabled = {this.state.valueRace != 3}>Middle</option>
	</select>

	</div>

	<div className = "error">
	<p>{this.state.message}</p>
	</div>


	</div>);
	}
	});


	ReactDOM.render(
	<Selector gender="man" planet="mars" race="human"/> ,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>