Условие
В script.js соберите журнал тренировок: спросите, сколько раз человек был в зале за месяц, создайте объект gymProfile, добавьте два упражнения с числом повторений через квадратные скобки и выведите итог в #out одной шаблонной строкой (обратные кавычки и ${переменная}). Вопросы в prompt() тоже пишите через шаблонные строки - так удобно подставлять название упражнения в текст. HTML и CSS не меняйте. Сверяйтесь с вкладкой «Результат».
Что нужно сделать
- Спросите, сколько раз человек был в зале, сохраните число.
- Соберите объект профиля тренировок с нужными полями.
- Добавьте два упражнения в workouts через квадратные скобки.
- Выведите итог в #out одной шаблонной строкой.
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. Ориентируйтесь на раздел «Дополнительная информация» ниже.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
В #out: визиты и два упражнения
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- объявление документа HTML5.<html lang="ru">- корневой тег страницы; атрибут lang="ru" - язык интерфейса.<head>- служебная «шапка»: кодировка, title, подключение CSS.<meta charset="UTF-8" />- кодировка символов (кириллица отображается корректно).<title>- текст на вкладке браузера («Журнал тренировок»).<link rel="stylesheet" href="style.css" />- подключает файл style.css к странице. Без этой строки стили из CSS не применяются.<body>- видимая часть страницы: всё, что пользователь видит в превью.<h1 id="title">- заголовок #title.<pre id="out" aria-live="polite">- блок предварительно отформатированного текста #out.<script src="script.js">- подключает JavaScript-файл script.js.body → font-family: Arial, sans-serif- семейство шрифта: Arial, sans-serif. Задаёт, каким шрифтом рисовать текст.body → margin: 24px- внешний отступ 24px. Отодвигает блок от краёв родителя / страницы.body → background: #ecfdf5- цвет (или заливка) фона: #ecfdf5.#title → margin: 0 0 12px- внешний отступ 0 0 12px. Отодвигает блок от краёв родителя / страницы.#title → font-size: 20px- размер шрифта: 20px.#title → color: #065f46- цвет текста: #065f46.#out → font-family: ui-monospace, monospace- семейство шрифта: ui-monospace, monospace. Задаёт, каким шрифтом рисовать текст.#out → font-size: 14px- размер шрифта: 14px.#out → line-height: 1.6- межстрочный интервал: 1.6.#out → color: #064e3b- цвет текста: #064e3b.#out → white-space: pre-wrap- как обрабатывать пробелы и переносы: pre-wrap (pre-wrap сохраняет переносы из текста).#out → margin: 0- внешний отступ 0. Отодвигает блок от краёв родителя / страницы.#out → padding: 16px- внутренний отступ 16px - пространство между рамкой и содержимым.#out → background: #fff- цвет (или заливка) фона: #fff.#out → border: 1px solid #6ee7b7- рамка: 1px solid #6ee7b7 (толщина, стиль линии, цвет).#out → border-radius: 8px- скругление углов: 8px.document.getElementById("out")- найти элемент с id="out" в DOM.textContent- текстовое содержимое элемента (безопасно для обычного текста).const- объявление константы (ссылку нельзя переназначить).prompt()- диалог: спросить у пользователя строку и вернуть ответ.===- строгое сравнение (тип и значение).if / else- условный оператор: выполнить код при истине.`шаблон ${...}`- шаблонная строка ES6: вставка переменных через ${...}.||- логическое ИЛИ: достаточно одного истинного.// >>> Пишите код здесь <<<- маркер в стартере: место для вашего решения.null- специальное значение «пусто».true / false- логический тип boolean.[]- массив - упорядоченный список значений.{}- объект - набор пар ключ: значение.
Слева файлы редактора: script.js (здесь решаете задание), index.html и style.css (готовая разметка и стили - обычно менять не нужно). Ниже - важные понятия по теме задачи.
Объект gymProfile
const gymProfile = { visitsDone, workouts: {}, coaches: {}, bodyParts: [], showProfile: true };
- карточка спортсмена с пустыми разделами под будущие данные.
Запись через []
gymProfile.workouts[exerciseA] = repsA;
- ключом может быть любая строка, в том числе с пробелами.
Интерполяция ES6
`Тренировок: ${gymProfile.visitsDone}\n${exerciseA}: ${repsA}`
- вместо длинной склейки через
+.
Коротко:
prompt → gymProfile → workouts[] → шаблонная строка в
#out.