フロントエンド メンター - BMI 計算ツール
いらっしゃいませ！ ?
このプレミアム フロントエンド メンター コーディング チャレンジをご購入いただきありがとうございます。
フロントエンド メンター チャレンジは、現実的なプロジェクトを構築することでコーディング スキルを向上させるのに役立ちます。これらのプレミアム チャレンジは完璧なポートフォリオの作品となるため、ポートフォリオで作成したものを他の人に見せるために自由に使用してください。
この課題に取り組むには、HTML、CSS、JavaScript についての深い理解が必要です。
挑戦
あなたの課題は、この BMI 計算ページを構築し、できるだけデザインに近づけることです。
チャレンジを完了するために、好きなツールを使用できます。ですので、実践してみたいことがあれば、ぜひ挑戦してみてください。
ユーザーは次のことができるようにする必要があります。
1. 身長と体重を入力します。
2. 入力した値に基づいて BMI を計算します。
3. 結果コンポーネントに表示される BMI 結果を確認します。
4. 結果コンポーネントに表示される体重分類を確認します。
5. 結果コンポーネントに表示される健康的な体重の範囲を確認します。
この挑戦に対するサポートが必要ですか?コミュニティに参加して、#help チャンネルで質問してください。
期待される動作
以下に BMI の範囲と体重分類を示します。ユーザーの 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-template.md ファイル内にテンプレートを提供しました。
テンプレートは、何を追加するかのガイドを提供します。カスタム README は、プロジェクトを説明し、学習を振り返るのに役立ちます。テンプレートを自由に編集してください。
テンプレートに情報を追加したら、このファイルを削除し、README-template.md ファイルの名前を README.md に変更します。これにより、リポジトリの README ファイルとして表示されます。
ソリューションを提出する
ソリューションをプラットフォームに送信して、コミュニティの他のメンバーが確認できるようにします。これを行う方法のヒントについては、「ソリューションを送信するための完全なガイド」に従ってください。
ソリューションに関するフィードバックを探している場合は、送信時に必ず質問することを忘れないでください。質問がより具体的かつ詳細であればあるほど、コミュニティから貴重なフィードバックを得る可能性が高くなります。
⚠️重要 ⚠️: これらのプレミアム チャレンジでは、プラットフォームに送信して共有するときに、デザイン ファイルを GitHub にアップロードしないようにしてください。新しいプロジェクトを作成した場合、最も簡単な方法は、このスターター プロジェクトで提供されている .gitignore をコピーすることです。
ソリューションを共有する
ソリューションを共有できる場所は複数あります。
フロントエンド メンター: コミュニティの他のメンバーが確認できるように、プラットフォーム上でソリューションを共有します。
GitHub: GitHub でソリューションを共有します。
Twitter: Twitter でソリューションを共有します。
ソリューションをプラットフォームに送信した後に共有するのに役立つテンプレートが提供されています。フィードバックをお探しの場合は、編集して具体的な質問を含めてください。
質問が具体的であればあるほど、コミュニティの他のメンバーがフィードバックをくれる可能性が高くなります。
フィードバックはありますか?
フィードバックをお待ちしております。私たちは常に課題とプラットフォームの改善に努めています。何か言及したいことがあれば、hi[at]frontendmentor[dot]io に電子メールを送ってください。
楽しく建築しましょう！ ✨
