Цель работы

Реализовать калькулятор стоимости курса с выбором тарифа, количества занятий и отображением итоговой стоимости.

Теоретическая часть

Калькулятор стоимости — это интерактивный элемент интерфейса, который позволяет пользователю выбрать параметры и увидеть итоговую стоимость. Основные понятия:

Управление состоянием — использование хука useState для хранения и обновления выбранных параметров
Вычисляемые значения — расчет итоговой стоимости на основе выбранных параметров
Обработка изменений — реакция на изменения ввода пользователя с помощью обработчиков событий

В этой лабораторной работе мы создадим калькулятор стоимости языкового курса с тремя тарифами:

Выгодный: Дешевле, но без отмен и переносов
Комфортный: Дороже, но можно отменять уроки
Усиленный: Избранные преподаватели и сопровождение методиста

Для реализации калькулятора нам понадобятся:

Состояние для хранения выбранных параметров
Функции для обработки изменений
Логика расчета итоговой стоимости
Отображение результата

Задание

Создать калькулятор с выбором тарифа, количества занятий и расчетом итоговой стоимости курса.

Пошаговая инструкция

Создайте компонент калькулятора

В папке src/components создайте файл PriceCalculator.js.

# В терминале
touch src/components/PriceCalculator.js

Добавьте состояние для параметров калькулятора

Откройте файл PriceCalculator.js и добавьте следующий код:

import React, { useState } from 'react';

function PriceCalculator() {
  // Начальное состояние
  const [lessons, setLessons] = useState(8);
  const [tariff, setTariff] = useState('basic');
  
  // Цены для разных тарифов
  const prices = {
    basic: 1000,
    comfort: 1300,
    premium: 1800
  };
  
  // Расчет итоговой стоимости
  const total = lessons * prices[tariff];
  
  return (
    
      {/* Здесь будет JSX калькулятора */}
    

  );
}

export default PriceCalculator;

Добавьте элементы управления

Создайте форму с элементами управления для выбора параметров:

return (

Калькулятор стоимости курса

);

Добавьте компонент на страницу курсов

Откройте файл src/pages/Courses.js и импортируйте компонент калькулятора:

import PriceCalculator from '../components/PriceCalculator';

Затем добавьте калькулятор под заголовком:

Наши курсы

Выберите подходящий курс и начните обучение уже сегодня!

Добавьте пояснения к тарифам

Под калькулятором добавьте информацию о каждом тарифе:

Описание тарифов

Выгодный

Дешевле, но без отмен и переносов.

Комфортный

Дороже, но можно отменять уроки.

Усиленный

Избранные преподаватели и сопровождение методиста.

Проверьте результат

Запустите проект (если еще не запущен):

npm start

Перейдите на страницу "Курсы" и убедитесь, что калькулятор отображается и работает корректно.

Если при изменении параметров итоговая стоимость обновляется автоматически, значит, калькулятор реализован верно.

Критерий	Баллы
Реализован выбор и расчет	4
Использованы `useState`	3
Корректный вывод	3
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать программный код на стороне клиента в соответствии с техническим заданием

На демонстрационном экзамене вам потребуется реализовать калькулятор стоимости курса, что является частью клиентской логики веб-приложения.

Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:

Навык разработки клиентской части веб-приложения в соответствии с техническим заданием
Умение применять выбранные языки программирования для написания программного кода

Лабораторная работа №9: Калькулятор стоимости курса: управление состоянием

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

Калькулятор стоимости курса

Итого: {total} руб.

Наши курсы

Описание тарифов

Выгодный

Комфортный

Усиленный

Критерии оценки

Связь с демонстрационным экзаменом