前端導師 - 體重指數計算器
歡迎! ?
感謝您購買這個優質的前端導師程式設計挑戰賽。
前端導師挑戰可幫助您透過建立現實的專案來提高程式設計技能。這些高級挑戰是完美的作品集,因此請隨意使用您在作品集中創建的內容向其他人展示。
要完成這項挑戰,您需要對 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。
玩得開心! ✨