uyriq/index.html

## index.html

<html>
	<head>
		<meta charset="UTF-8" />
    <script src="https://code.s3.yandex.net/react/libs/react.development.js"></script>
    <script src="https://code.s3.yandex.net/react/libs/react-dom.development.js"></script>
    <script src="https://code.s3.yandex.net/react/libs/babel.min.js"></script>
	</head>
	<body>
	<div id="root"></div>

  <script type='text/jsx' src="task.jsx"></script>
	</body>
</html>

## meal-choice-random.markdown

      
    Raw
  

              meal-choice-random.markdown
            
          
    meal choice random

A Pen by uyriq on CodePen.
License.

  
## script.babel
/* eslint-disable react/react-in-jsx-scope */
class FavoriteFood extends React.Component {
  render() {
    const { name, photo, country } = this.props.favorite;
    return (
      <div className="content" style={{ backgroundImage: `url(${photo})` }}>
        <p className="text-food">Ваше любимое блюдо</p>
        <h1 className="title">{name}</h1>
        <p className="text-country">{`Страна: ${country}`}</p>
      </div>
    );
  }
}

const meals = [
  { name: 'Паста', photo: './images/1.png', country: 'Италия' },
  { name: 'Гамбургер', photo: './images/2.png', country: 'США/Германия' },
  { name: 'Ренданг', photo: './images/3.png', country: 'Индонезия' },
  { name: 'Том Ям', photo: './images/4.png', country: 'Тайланд' },
  { name: 'Утка по-пекински', photo: './images/5.png', country: 'Китай' },
  { name: 'Суши', photo: './images/6.png', country: 'Япония' },
  { name: 'Хачапури', photo: './images/7.png', country: 'Грузия' }
];

class App extends React.Component {
  randomMeal(arr) {

    /* Ваш код здесь */
    function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
}
let min=0
let max=meals.length
let num=getRandomIntInclusive(min,max)
return arr[num]


  }

  render() {
    return <FavoriteFood favorite={this.randomMeal(meals)} />;
  }
}

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

## style.css
.content {
  width: 640px;
  height: 780px;
  margin: 0 auto;
  padding: 0 40px;
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  color: #000;
}

body {
  background-color: #efece7;
}

.text-food {
  font-size: 20px;
  line-height: 40px;
  margin: 0;
  padding-top: 56px;
}

.title {
  font-size: 48px;
  line-height: 56px;
  margin: 0 0 8px;
}

.text-country {
  font-size: 20px;
  line-height: 24px;
  opacity: .6;
  margin: 0;
}

	<html>
	<head>
	<meta charset="UTF-8" />
	<script src="https://code.s3.yandex.net/react/libs/react.development.js"></script>
	<script src="https://code.s3.yandex.net/react/libs/react-dom.development.js"></script>
	<script src="https://code.s3.yandex.net/react/libs/babel.min.js"></script>
	</head>
	<body>
	<div id="root"></div>

	<script type='text/jsx' src="task.jsx"></script>
	</body>
	</html>
	/* eslint-disable react/react-in-jsx-scope */
	class FavoriteFood extends React.Component {
	render() {
	const { name, photo, country } = this.props.favorite;
	return (
	<div className="content" style={{ backgroundImage: `url(${photo})` }}>
	<p className="text-food">Ваше любимое блюдо</p>
	<h1 className="title">{name}</h1>
	<p className="text-country">{`Страна: ${country}`}</p>
	</div>
	);
	}
	}

	const meals = [
	{ name: 'Паста', photo: './images/1.png', country: 'Италия' },
	{ name: 'Гамбургер', photo: './images/2.png', country: 'США/Германия' },
	{ name: 'Ренданг', photo: './images/3.png', country: 'Индонезия' },
	{ name: 'Том Ям', photo: './images/4.png', country: 'Тайланд' },
	{ name: 'Утка по-пекински', photo: './images/5.png', country: 'Китай' },
	{ name: 'Суши', photo: './images/6.png', country: 'Япония' },
	{ name: 'Хачапури', photo: './images/7.png', country: 'Грузия' }
	];

	class App extends React.Component {
	randomMeal(arr) {

	/* Ваш код здесь */
	function getRandomIntInclusive(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
	}
	let min=0
	let max=meals.length
	let num=getRandomIntInclusive(min,max)
	return arr[num]


	}

	render() {
	return <FavoriteFood favorite={this.randomMeal(meals)} />;
	}
	}

	ReactDOM.render(<App />, document.querySelector('#root'));
	.content {
	width: 640px;
	height: 780px;
	margin: 0 auto;
	padding: 0 40px;
	font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #000;
	}

	body {
	background-color: #efece7;
	}

	.text-food {
	font-size: 20px;
	line-height: 40px;
	margin: 0;
	padding-top: 56px;
	}

	.title {
	font-size: 48px;
	line-height: 56px;
	margin: 0 0 8px;
	}

	.text-country {
	font-size: 20px;
	line-height: 24px;
	opacity: .6;
	margin: 0;
	}