Frontend Mentor - Калькулятор индекса массы тела
Добро пожаловать! ?
Благодарим за покупку этого премиум-задачи по программированию Frontend Mentor.
Задачи Frontend Mentor помогут вам улучшить свои навыки программирования, создавая реалистичные проекты. Эти премиальные задания являются идеальным элементом портфолио, поэтому не стесняйтесь использовать то, что вы создаете в своем портфолио, чтобы показать другим.
Чтобы справиться с этой задачей, вам необходимо глубокое понимание HTML, CSS и JavaScript.
Вызов
Ваша задача — создать эту страницу калькулятора индекса массы тела и сделать так, чтобы она выглядела как можно ближе к дизайну.
Вы можете использовать любые инструменты, которые вам нравятся, чтобы помочь вам выполнить задачу. Так что, если у вас есть что-то, что вы хотели бы попрактиковать, смело пробуйте.
Ваши пользователи должны иметь возможность:
1. Введите их рост и вес.
2. Рассчитайте их ИМТ на основе введенных ими значений.
3. Посмотрите результат ИМТ, отображаемый в компоненте результатов.
4. Посмотрите их весовую классификацию, отображаемую в компоненте результатов.
5. Посмотрите диапазон их здорового веса, отображаемый в компоненте результатов.
Хотите немного поддержки в этом вызове? Присоединяйтесь к нашему сообществу и задавайте вопросы на канале #help.
Ожидаемое поведение
Ниже вы найдете диапазоны ИМТ и их весовые классификации. Основываясь на результатах ИМТ человека, добавьте его весовую категорию к предложению «Ваш ИМТ предполагает, что вы» в компоненте результатов.
| Диапазон ИМТ | Классификация по весу |
| ------------------ | --------------------- |
| Менее 18,5 | Недостаток веса |
| с 18,5 до 24,9 | Здоровый вес |
| с 25 по 29,9 | Избыточный вес |
| 30 или больше | ожирение |
Добавьте диапазон здорового веса человека на основе нижнего и верхнего ИМТ и роста человека.
Где найти все
Ваша задача — воплотить проект в соответствии с предоставленным файлом дизайна. Мы предоставляем версии дизайна как в Sketch, так и в Figma, поэтому вы можете выбрать, какой инструмент вы предпочитаете использовать. Вы можете скачать файл дизайна на платформе. Пожалуйста, не делитесь ими с кем-либо еще. В комплект поставки проекта также входит файл README.md, который поможет вам в настройке.
Все необходимые ресурсы для этого проекта находятся в папке /assets. Изображения уже экспортированы для правильного размера экрана и оптимизированы. Некоторые из них можно использовать повторно на экранах разных размеров. Поэтому, если вы не видите изображение в определенной папке, оно обычно находится в другой папке этой страницы.
Мы также включаем файлы переменных и статических шрифтов для необходимых шрифтов для этого проекта. Вы можете либо использовать ссылку на Google Fonts, либо использовать локальные файлы шрифтов для самостоятельного размещения шрифтов. Обратите внимание, что мы удалили статические файлы шрифтов для шрифтов, которые не нужны для этого проекта.
Система дизайна в файле дизайна предоставит вам дополнительную информацию о различных цветах, шрифтах и стилях, используемых в этом проекте. Наши шрифты всегда взяты из Google Fonts.
Создание вашего проекта
Не стесняйтесь использовать любой рабочий процесс, который вам удобен. Ниже приведен предлагаемый процесс, но не думаю, что вам нужно следовать этим шагам:
1. Настройте свой проект: создайте новую папку для своего проекта и инициализируйте ее с помощью Git.
2. Добавьте файлы HTML, CSS и JavaScript. Создайте необходимые файлы для своего проекта.
3. Создайте структуру HTML. Используйте файл дизайна в качестве образца для создания базовой структуры вашего проекта.
4. Оформите HTML с помощью CSS. Используйте файл дизайна для стилизации элементов вашего проекта.
5. Добавьте функциональность с помощью JavaScript. Используйте JavaScript для обработки пользовательского ввода и вычислений.
6. Проверьте свой проект. Используйте инструменты разработчика вашего браузера, чтобы проверить функциональность вашего проекта.
7. Разверните свой проект. Разместите свой проект на бесплатной хостинговой платформе.
Развертывание вашего проекта
Как уже упоминалось выше, существует множество способов бесплатно разместить свой проект. Наши рекомендуемые хосты:
Страницы GitHub
Нетлифай
Версель
Вы можете разместить свой сайт, используя одно из этих решений или любого другого доверенного поставщика. Узнайте больше о наших рекомендуемых и надежных хостах.
Создайте собственный README.md.
Мы настоятельно рекомендуем перезаписать этот README.md на собственный. В этом начальном коде мы предоставили шаблон в файле README-template.md.
В шаблоне указано, что добавить. Специальный файл README поможет вам объяснить ваш проект и поразмышлять над полученными знаниями. Пожалуйста, не стесняйтесь редактировать наш шаблон столько, сколько захотите.
Добавив информацию в шаблон, удалите этот файл и переименуйте файл README-template.md в README.md. Это отобразит его как файл README вашего репозитория.
Отправка вашего решения
Разместите свое решение на платформе, чтобы его увидело все остальное сообщество. Следуйте нашему «Полному руководству по отправке решений», чтобы получить советы о том, как это сделать.
Помните: если вы хотите получить отзывы о своем решении, обязательно задавайте вопросы при его отправке. Чем конкретнее и подробнее вы зададите вопросы, тем выше вероятность получить ценную обратную связь от сообщества.
⚠️ВАЖНО⚠️: при выполнении этих премиальных задач не загружайте файлы дизайна на GitHub, когда отправляете их на платформу и делитесь ими. Если вы создали совершенно новый проект, самый простой способ сделать это — скопировать файл .gitignore, предоставленный в этом стартовом проекте.
Поделитесь своим решением
Есть несколько мест, где вы можете поделиться своим решением:
Frontend Mentor: поделитесь своим решением на платформе, чтобы его увидело все остальное сообщество.
GitHub: поделитесь своим решением на GitHub.
Твиттер: поделитесь своим решением в Твиттере.
Мы предоставляем шаблоны, которые помогут вам поделиться своим решением после его размещения на платформе. Пожалуйста, отредактируйте их и включите конкретные вопросы, когда хотите получить обратную связь.
Чем конкретнее вы зададите вопросы, тем больше вероятность того, что другой член сообщества даст вам обратную связь.
Есть отзывы для нас?
Нам нравится получать обратную связь! Мы всегда стремимся улучшить наши задачи и нашу платформу. Так что, если у вас есть что-то, о чем вы хотели бы упомянуть, отправьте электронное письмо hi[at]frontendmentor[dot]io.
Удачи в строительстве! ✨
