前端导师 - 体重指数计算器
欢迎! ?
感谢您购买这个优质的前端导师编码挑战赛。
前端导师挑战可帮助您通过构建现实的项目来提高编码技能。这些高级挑战是完美的作品集,因此请随意使用您在作品集中创建的内容向其他人展示。
要完成这项挑战,您需要对 HTML、CSS 和 JavaScript 有深入的了解。
挑战
您的挑战是构建此体重指数计算器页面并使其看起来尽可能接近设计。
您可以使用任何您喜欢的工具来帮助您完成挑战。因此,如果您有想要练习的东西,请随意尝试。
您的用户应该能够:
1. 输入身高和体重。
2. 根据他们输入的值计算他们的 BMI。
3. 查看结果部分中显示的 BMI 结果。
4. 查看结果部分中显示的体重分类。
5. 查看结果部分中显示的健康体重范围。
想要在挑战中获得一些支持吗?加入我们的社区并在 #help 频道中提问。
预期行为
您将在下面找到 BMI 范围及其体重分类。根据人员的 BMI 结果,将其体重分类添加到结果组件中的“您的 BMI 表明您是”这句话中。
|体重指数范围 |重量分类|
| ------------------ | -------------------- |
|小于 18.5 |减持|
| 18.5 至 24.9 |健康体重 |
| 25 至 29.9 |超重 |
| 30 或以上 |肥胖|
根据 BMI 类别的下限和上限以及人的身高添加个人的健康体重范围。
哪里可以找到一切
您的任务是根据提供的设计文件构建项目。我们提供 Sketch 和 Figma 版本的设计,因此您可以选择您喜欢使用的工具。您可以在平台上下载设计文件。请务必不要与其他人分享。设计下载还附带 README.md 文件,可帮助您进行设置。
该项目所需的所有资源都位于 /assets 文件夹中。图像已导出为正确的屏幕尺寸并进行了优化。有些可以在多种屏幕尺寸下重复使用。因此,如果您在特定文件夹中没有看到图像,它通常位于该页面的另一个文件夹中。
我们还包括该项目所需字体的可变和静态字体文件。您可以选择链接到 Google Fonts 或使用本地字体文件自行托管字体。请注意,我们已删除了该项目不需要的字体粗细的静态字体文件。
设计文件中的设计系统将为您提供有关该项目中使用的各种颜色、字体和样式的更多信息。我们的字体始终来自 Google Fonts。
构建您的项目
请随意使用您觉得舒服的任何工作流程。以下是建议的流程,但您不需要遵循以下步骤:
1. 设置您的项目:为您的项目创建一个新文件夹并使用 Git 对其进行初始化。
2. 添加 HTML、CSS 和 JavaScript 文件:为您的项目创建必要的文件。
3. 构建 HTML 结构:使用设计文件作为参考来构建项目的基本结构。
4. 使用 CSS 设置 HTML 样式:使用设计文件设置项目元素的样式。
5. 使用 JavaScript 添加功能:使用 JavaScript 处理用户输入和计算。
6. 测试您的项目:使用浏览器的开发人员工具来测试项目的功能。
7. 部署您的项目:在免费托管平台上托管您的项目。
部署您的项目
如上所述,有很多方法可以免费托管您的项目。我们推荐的主机是:
GitHub 页面
网络化
韦尔塞尔
您可以使用这些解决方案之一或我们任何其他值得信赖的提供商来托管您的网站。详细了解我们推荐和值得信赖的主机。
创建自定义 README.md
我们强烈建议使用自定义的 README.md 覆盖此 README.md。我们在此起始代码的 README-template.md 文件中提供了一个模板。
该模板提供了添加内容的指南。自定义自述文件将帮助您解释您的项目并反思您的学习成果。请随意编辑我们的模板。
将信息添加到模板后,删除此文件并将 README-template.md 文件重命名为 README.md。这将使其显示为存储库的自述文件。
提交您的解决方案
在平台上提交您的解决方案,以供社区其他成员查看。请按照我们的“提交解决方案的完整指南”获取有关如何执行此操作的提示。
请记住,如果您正在寻找有关解决方案的反馈,请务必在提交时提出问题。您的问题越具体、越详细,您从社区获得宝贵反馈的机会就越大。
⚠️重要⚠️:面对这些高级挑战,当您提交到平台并分享时,请务必不要将设计文件上传到 GitHub。如果您创建了一个全新的项目,最简单的方法是复制此入门项目中提供的 .gitignore。
分享您的解决方案
您可以在多个地方分享您的解决方案:
前端导师:在平台上分享您的解决方案,供社区其他成员查看。
GitHub:在 GitHub 上分享您的解决方案。
Twitter:在 Twitter 上分享您的解决方案。
我们提供模板来帮助您在平台上提交解决方案后分享您的解决方案。当您寻求反馈时,请务必对其进行编辑并包含具体问题。
您的问题越具体,社区的其他成员就越有可能向您提供反馈。
有反馈给我们吗?
我们喜欢收到反馈!我们一直在寻求改善我们的挑战和我们的平台。因此,如果您有任何想要提及的内容,请发送电子邮件至 hi[at]frontendmentor[dot]io。
玩得开心! ✨