เครื่องคิดเลขค่าดัชนีมวลกาย

Frontend Mentor - เครื่องคำนวณดัชนีมวลกาย

ยินดีต้อนรับ!

ขอขอบคุณที่ซื้อความท้าทายด้านการเขียนโค้ด Frontend Mentor แบบพรีเมียมนี้

ความท้าทายของ Frontend Mentor ช่วยให้คุณพัฒนาทักษะการเขียนโค้ดโดยการสร้างโปรเจ็กต์ที่สมจริง ความท้าทายระดับพรีเมี่ยมเหล่านี้เป็นผลงานที่สมบูรณ์แบบ ดังนั้นโปรดใช้สิ่งที่คุณสร้างในพอร์ตโฟลิโอของคุณเพื่อแสดงให้ผู้อื่นเห็นได้ตามสบาย

หากต้องการทำสิ่งที่ท้าทายนี้ คุณต้องมีความเข้าใจอย่างมากเกี่ยวกับ HTML, CSS และ JavaScript

ความท้าทาย

ความท้าทายของคุณคือการสร้างหน้าเครื่องคำนวณดัชนีมวลกายนี้ขึ้นมาและทำให้มันดูใกล้เคียงกับการออกแบบมากที่สุด

คุณสามารถใช้เครื่องมือใดก็ได้ที่คุณต้องการเพื่อช่วยให้คุณบรรลุความท้าทาย ดังนั้นหากคุณมีสิ่งที่ต้องการฝึกฝน อย่าลังเลที่จะลองทำดู

ผู้ใช้ของคุณควรสามารถ:

1. ระบุส่วนสูงและน้ำหนัก

2. คำนวณค่าดัชนีมวลกายตามค่าที่พวกเขาป้อน

3. ดูผลลัพธ์ BMI ของพวกเขาที่แสดงในองค์ประกอบผลลัพธ์

4. ดูการจัดประเภทน้ำหนักที่แสดงในองค์ประกอบผลลัพธ์

5. ดูช่วงน้ำหนักที่เหมาะสมที่แสดงในองค์ประกอบผลลัพธ์

ต้องการความช่วยเหลือเกี่ยวกับความท้าทายนี้หรือไม่? เข้าร่วมชุมชนของเราและถามคำถามในช่อง #help

พฤติกรรมที่คาดหวัง

ช่วง 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. จัดสไตล์ 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

Twitter: แบ่งปันโซลูชันของคุณบน Twitter

เรามีเทมเพลตเพื่อช่วยคุณแชร์โซลูชันของคุณเมื่อคุณส่งบนแพลตฟอร์มแล้ว โปรดแก้ไขและรวมคำถามที่เฉพาะเจาะจงเมื่อคุณกำลังมองหาคำติชม

ยิ่งคุณตอบคำถามของคุณเจาะจงมากเท่าไร สมาชิกคนอื่นในชุมชนก็จะมีโอกาสให้ข้อเสนอแนะแก่คุณมากขึ้นเท่านั้น

มีข้อเสนอแนะสำหรับเราหรือไม่?

เราชอบรับข้อเสนอแนะ! เราพยายามปรับปรุงความท้าทายและแพลตฟอร์มของเราอยู่เสมอ ดังนั้นหากคุณมีอะไรอยากจะพูดถึง โปรดส่งอีเมลไปที่ hi[at]frontendmentor[dot]io

ขอให้สนุกกับการสร้าง!