kianurivzzz/example-html.html Secret

## example-html.html
<!doctype html>
<html lang="ru">
    <head>
        <!-- Указываем кодировку документа -->
        <meta charset="UTF-8" />
        <!-- Настраиваем viewport для адаптивности -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Заголовок страницы -->
        <title>Счётчик шаурмы на HTML и JavaScript</title>
    </head>
    <body>
        <!-- Корневой элемент -->
        <div class="root">
            <!-- Элемент для отображения значения счётчика -->
            <h1 id="counter-value"></h1>
            <!-- Кнопка для увеличения значения -->
            <button id="increment-btn">+1</button>
        </div>

        <script>
            // Получаем элемент для отображения значения счетчика
            const counterValueElement =
                document.getElementById("counter-value");
            // Получаем кнопку увеличения значения
            const incrementBtn = document.getElementById("increment-btn");
            // Инициализируем начальное значение счетчика
            let counterValue = 0;

            // Функция увеличения значения счетчика
            function increment() {
                counterValue += 1;
                counterValueElement.innerText = `Шаурмы съедено: ${counterValue}`;
            }

            // Устанавливаем начальное значение в элемент
            counterValueElement.innerText = `Шаурмы съедено: ${counterValue}`;
            // Добавляем обработчик клика на кнопку
            incrementBtn.addEventListener("click", increment);
        </script>
    </body>
</html>

## example-react.html
<!doctype html>
<!-- Пример на React -->
<html lang="ru">
    <head>
        <!-- Мета-теги для настройки кодировки и viewport -->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Счётчик шаурмы на React</title>
    </head>
    <body>
        <!-- Корневой элемент для React-приложения. В нём отображается приложение -->
        <div id="root"></div>

        <!-- Подключение React библиотек -->
        <script
            src="https://unpkg.com/react@17/umd/react.development.js"
            crossorigin
        ></script>
        <script
            src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
            crossorigin
        ></script>
        <script
            src="https://unpkg.com/@babel/standalone@7.13.6/babel.min.js"
            crossorigin
        ></script>

        <!-- React компонент и рендеринг -->
        <script type="text/babel">
            // Основной компонент приложения
            function App() {
                // Состояние для хранения значения счетчика
                const [value, setValue] = React.useState(0);

                // Функция для увеличения значения на 1
                function increment() {
                    setValue(value + 1);
                }

                // Возвращаем JSX разметку. Она выглядит как HTML
                return (
                    <div className="app">
                        <h1>Съеденно шаурмы: {value}</h1>
                        <button onClick={increment}>+1</button>
                    </div>
                );
            }

            // Рендерим приложение в корневой элемент
            ReactDOM.render(
                <div>
                    <App />
                </div>,
                document.getElementById("root"),
            );
        </script>
    </body>
</html>
	<!doctype html>
	<html lang="ru">
	<head>
	<!-- Указываем кодировку документа -->
	<meta charset="UTF-8" />
	<!-- Настраиваем viewport для адаптивности -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Заголовок страницы -->
	<title>Счётчик шаурмы на HTML и JavaScript</title>
	</head>
	<body>
	<!-- Корневой элемент -->
	<div class="root">
	<!-- Элемент для отображения значения счётчика -->
	<h1 id="counter-value"></h1>
	<!-- Кнопка для увеличения значения -->
	<button id="increment-btn">+1</button>
	</div>

	<script>
	// Получаем элемент для отображения значения счетчика
	const counterValueElement =
	document.getElementById("counter-value");
	// Получаем кнопку увеличения значения
	const incrementBtn = document.getElementById("increment-btn");
	// Инициализируем начальное значение счетчика
	let counterValue = 0;

	// Функция увеличения значения счетчика
	function increment() {
	counterValue += 1;
	counterValueElement.innerText = `Шаурмы съедено: ${counterValue}`;
	}

	// Устанавливаем начальное значение в элемент
	counterValueElement.innerText = `Шаурмы съедено: ${counterValue}`;
	// Добавляем обработчик клика на кнопку
	incrementBtn.addEventListener("click", increment);
	</script>
	</body>
	</html>
	<!doctype html>
	<!-- Пример на React -->
	<html lang="ru">
	<head>
	<!-- Мета-теги для настройки кодировки и viewport -->
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Счётчик шаурмы на React</title>
	</head>
	<body>
	<!-- Корневой элемент для React-приложения. В нём отображается приложение -->
	<div id="root"></div>

	<!-- Подключение React библиотек -->
	<script
	src="https://unpkg.com/react@17/umd/react.development.js"
	crossorigin
	></script>
	<script
	src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
	crossorigin
	></script>
	<script
	src="https://unpkg.com/@babel/standalone@7.13.6/babel.min.js"
	crossorigin
	></script>

	<!-- React компонент и рендеринг -->
	<script type="text/babel">
	// Основной компонент приложения
	function App() {
	// Состояние для хранения значения счетчика
	const [value, setValue] = React.useState(0);

	// Функция для увеличения значения на 1
	function increment() {
	setValue(value + 1);
	}

	// Возвращаем JSX разметку. Она выглядит как HTML
	return (
	<div className="app">
	<h1>Съеденно шаурмы: {value}</h1>
	<button onClick={increment}>+1</button>
	</div>
	);
	}

	// Рендерим приложение в корневой элемент
	ReactDOM.render(
	<div>
	<App />
	</div>,
	document.getElementById("root"),
	);
	</script>
	</body>
	</html>