Урок 1: HTML основы калькулятора

🎯 Цель урока

В этом уроке мы создадим HTML структуру для нашего математического приложения. Изучим, как правильно организовать кнопки калькулятора, поля для ввода, и создадим семантическую разметку для удобства пользователей.

💡 Что вы узнаете:

• Семантическую разметку для калькулятора
• Работу с кнопками и полями ввода
• Структуру для математических задач
• Доступность и юзабилити
• Организацию блоков приложения

📚 HTML концепции

<button>

Интерактивные кнопки для цифр, операций и действий. Поддерживают события onclick

<input type="number">

Специальное поле для ввода числовых значений с валидацией

<div> с классами

Контейнеры для группировки элементов по функциональности

data-* атрибуты

Пользовательские атрибуты для хранения данных в HTML элементах

Семантические теги

Использование <main>, <section>, <article> для структурированности

🏗️ Базовая структура

Начнём с создания основного контейнера и заголовка:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Математическое приложение</title>
</head>
<body>
    <main class="game-container">
        <header>
            <h1>🧮 Математическое приложение! 🧮</h1>
            <p class="subtitle">Реши примеры и стань математическим героем!</p>
        </header>
    </main>
</body>
</html>

🔍 Важные моменты:

• lang="ru" указывает язык страницы
• viewport делает сайт адаптивным
• Семантичные теги <main> и <header> помогают поисковикам

📊 Блок статистики

Добавим панель с игровой статистикой:

<section class="player-stats">
    <div class="stat-card">
        <span class="stat-number" id="level">1</span>
        <span class="stat-label">Уровень</span>
    </div>
    <div class="stat-card">
        <span class="stat-number" id="score">0</span>
        <span class="stat-label">Очки</span>
    </div>
    <div class="stat-card">
        <span class="stat-number" id="streak">0</span>
        <span class="stat-label">Серия</span>
    </div>
    <div class="stat-card">
        <span class="stat-number" id="total">0</span>
        <span class="stat-label">Всего</span>
    </div>
</section>

id атрибуты

Уникальные идентификаторы элементов для обращения из JavaScript

🎮 Переключатель режимов

Создаём кнопки для переключения между квестами и калькулятором:

<div class="mode-buttons">
    <button class="mode-btn active" onclick="setMode('quest')" id="quest-mode">
        🗡️ Режим квестов
    </button>
    <button class="mode-btn" onclick="setMode('calc')" id="calc-mode">
        🧮 Калькулятор
    </button>
</div>

🔢 Интерфейс калькулятора

Самая важная часть - создаём кнопки калькулятора:

<div class="calculator-section" id="calculator-section">
    <div class="calc-display" id="calcDisplay">0</div>
    <div class="calc-buttons">
        <!-- Первый ряд: очистка и операции -->
        <button class="calc-btn" onclick="clearCalc()">C</button>
        <button class="calc-btn" onclick="deleteLast()">⌫</button>
        <button class="calc-btn operator" onclick="appendToCalc('/')">/</button>
        <button class="calc-btn operator" onclick="appendToCalc('*')">×</button>
        
        <!-- Второй ряд: цифры 7-9 и минус -->
        <button class="calc-btn" onclick="appendToCalc('7')">7</button>
        <button class="calc-btn" onclick="appendToCalc('8')">8</button>
        <button class="calc-btn" onclick="appendToCalc('9')">9</button>
        <button class="calc-btn operator" onclick="appendToCalc('-')">-</button>
        
        <!-- Третий ряд: цифры 4-6 и плюс -->
        <button class="calc-btn" onclick="appendToCalc('4')">4</button>
        <button class="calc-btn" onclick="appendToCalc('5')">5</button>
        <button class="calc-btn" onclick="appendToCalc('6')">6</button>
        <button class="calc-btn operator" onclick="appendToCalc('+')">+</button>
        
        <!-- Четвёртый ряд: цифры 1-3 и равно -->
        <button class="calc-btn" onclick="appendToCalc('1')">1</button>
        <button class="calc-btn" onclick="appendToCalc('2')">2</button>
        <button class="calc-btn" onclick="appendToCalc('3')">3</button>
        <button class="calc-btn equals" onclick="calculateResult()" style="grid-row: span 2;">=</button>
        
        <!-- Пятый ряд: ноль и точка -->
        <button class="calc-btn" onclick="appendToCalc('0')" style="grid-column: span 2;">0</button>
        <button class="calc-btn" onclick="appendToCalc('.')">.</button>
    </div>
</div>

🎨 CSS Grid свойства в HTML:

• grid-row: span 2 - кнопка занимает 2 строки
• grid-column: span 2 - кнопка занимает 2 колонки
• Это позволяет создавать кнопки разных размеров

🎯 Секция квестов

Создаём область для математических заданий:

<section id="quest-section">
    <!-- Выбор сложности -->
    <div class="difficulty-selector">
        <p><strong>Выбери уровень сложности:</strong></p>
        <button class="difficulty-btn active" onclick="setDifficulty('easy')" id="easy">
            😊 Лёгкий
        </button>
        <button class="difficulty-btn" onclick="setDifficulty('medium')" id="medium">
            😎 Средний
        </button>
        <button class="difficulty-btn" onclick="setDifficulty('hard')" id="hard">
            🤯 Сложный
        </button>
    </div>

    <!-- Область с задачей -->
    <div class="quest-area">
        <div class="quest-title">🎯 Твоя математическая задача:</div>
        <div class="math-problem" id="mathProblem">2 + 2 = ?</div>
        <div class="input-area">
            <input type="number" class="answer-input" id="answerInput" 
                   placeholder="?" onkeypress="handleKeyPress(event)">
            <button class="check-btn" onclick="checkAnswer()">✅ Проверить</button>
        </div>
        <div class="feedback" id="feedback">Введи ответ и нажми "Проверить"!</div>
    </div>

    <button class="check-btn" onclick="generateProblem()" style="background: linear-gradient(135deg, #74b9ff, #0984e3);">
        🎲 Новая задача
    </button>
</section>

🏆 Блок достижений

Добавляем секцию для отображения достижений игрока:

<section class="achievements">
    <h4 style="margin-top: 0; color: #e17055;">🏆 Достижения:</h4>
    <div id="achievementsList">
        Решай примеры, чтобы получить достижения!
    </div>
</section>

🎮 Демонстрация HTML

Вот как выглядит наша HTML структура в действии:

🧮 Структура готова!

Дисплей калькулятора

0

C

⌫

/

×

7

8

9

-

HTML структура создана! 🎉
Далее добавим CSS стили.

🔧 Важные HTML атрибуты

Разберём ключевые атрибуты, которые мы используем:

<!-- Атрибуты для доступности -->
<input type="number" placeholder="?" aria-label="Введите ответ">

<!-- Обработчики событий -->
<button onclick="checkAnswer()">Проверить</button>
<input onkeypress="handleKeyPress(event)">

<!-- CSS классы для стилизации -->
<button class="calc-btn operator">+</button>
<div class="stat-card">...</div>

<!-- Уникальные ID для JavaScript -->
<div id="mathProblem">2 + 2 = ?</div>
<span id="level">1</span>

📝 Принципы хорошей HTML разметки:

• Семантичность - используй правильные теги
• Доступность - добавляй aria-label и alt
• Структурированность - группируй связанные элементы
• Читаемость - комментируй сложные участки
• Валидность - проверяй корректность кода

🎓 Итоги урока

Структура: Создали основной контейнер и секции
Кнопки: Разместили кнопки калькулятора в сетке
Формы: Добавили поля ввода для ответов
Семантика: Использовали правильные HTML теги
Доступность: Добавили aria-атрибуты и подписи
События: Подключили обработчики onclick

🚀 Что дальше?

В следующем уроке мы добавим CSS стили для создания красивого дизайна с градиентами, анимациями и адаптивной сеткой кнопок!

🧮 HTML основы калькулятора