Frontend Mentor - حاسبة مؤشر كتلة الجسم
مرحباً! ?
نشكرك على شراء تحدي البرمجة المميز Frontend Mentor هذا.
تساعدك تحديات Frontend Mentor على تحسين مهاراتك في البرمجة من خلال بناء مشاريع واقعية. تُعد هذه التحديات المتميزة بمثابة قطع مثالية لمحفظة الأعمال، لذا لا تتردد في استخدام ما تقوم بإنشائه في محفظتك لإظهاره للآخرين.
للقيام بهذا التحدي، تحتاج إلى فهم قوي لـ HTML وCSS وJavaScript.
التحدي
التحدي الذي يواجهك هو إنشاء صفحة حاسبة مؤشر كتلة الجسم هذه وجعلها تبدو أقرب إلى التصميم قدر الإمكان.
يمكنك استخدام أي أدوات تريدها لمساعدتك في إكمال التحدي. لذا، إذا كان لديك شيء ترغب في التدرب عليه، فلا تتردد في تجربته.
يجب أن يكون المستخدمون لديك قادرين على:
1. أدخل الطول والوزن.
2. احسب مؤشر كتلة الجسم الخاص بهم بناءً على القيم التي يدخلونها.
3. شاهد نتيجة مؤشر كتلة الجسم الخاصة بهم المعروضة في مكون النتائج.
4. راجع تصنيف وزنهم المعروض في مكون النتائج.
5. شاهد نطاق الوزن الصحي المعروض في مكون النتائج.
هل تريد بعض الدعم في هذا التحدي؟ انضم إلى مجتمعنا واطرح الأسئلة في قناة #المساعدة.
السلوك المتوقع
ستجد أدناه نطاقات مؤشر كتلة الجسم وتصنيفات الوزن الخاصة بها. استنادًا إلى نتائج مؤشر كتلة الجسم للشخص، أضف تصنيف وزنه إلى الجملة "يشير مؤشر كتلة جسمك إلى أنك" ضمن مكون النتائج.
| نطاق مؤشر كتلة الجسم | تصنيف الوزن |
| ------------------ | --------------------- |
| أقل من 18.5 | نقص الوزن |
| 18.5 إلى 24.9 | الوزن الصحي |
| 25 إلى 29.9 | الوزن الزائد |
| 30 أو أكبر | السمنة |
أضف نطاق الوزن الصحي للفرد استنادًا إلى فئات مؤشر كتلة الجسم السفلي والعلوي وطول الشخص.
أين تجد كل شيء
مهمتك هي بناء المشروع على ملف التصميم المقدم. نحن نقدم كلا الإصدارين Sketch وFigma من التصميم، حتى تتمكن من اختيار الأداة التي تفضل استخدامها. يمكنك تحميل ملف التصميم على المنصة. يرجى التأكد من عدم مشاركتها مع أي شخص آخر. يأتي تنزيل التصميم مع ملف README.md أيضًا لمساعدتك في الإعداد.
جميع الأصول المطلوبة لهذا المشروع موجودة في المجلد /assets. تم تصدير الصور بالفعل لحجم الشاشة الصحيح وتحسينها. بعضها قابل لإعادة الاستخدام بأحجام شاشات متعددة. لذا، إذا كنت لا ترى صورة في مجلد معين، فستكون عادةً في مجلد آخر لتلك الصفحة.
نقوم أيضًا بتضمين ملفات الخطوط المتغيرة والثابتة للخطوط المطلوبة لهذا المشروع. يمكنك اختيار إما الارتباط بخطوط Google أو استخدام ملفات الخطوط المحلية لاستضافة الخطوط بنفسك. لاحظ أننا قمنا بإزالة ملفات الخطوط الثابتة لأوزان الخطوط غير المطلوبة لهذا المشروع.
سيوفر لك نظام التصميم الموجود في ملف التصميم مزيدًا من المعلومات حول الألوان والخطوط والأنماط المختلفة المستخدمة في هذا المشروع. تأتي خطوطنا دائمًا من خطوط Google.
بناء مشروعك
لا تتردد في استخدام أي سير عمل تشعر بالراحة معه. فيما يلي عملية مقترحة، ولكن لا تشعر أنك بحاجة إلى اتباع الخطوات التالية:
1. قم بإعداد مشروعك: أنشئ مجلدًا جديدًا لمشروعك وقم بتهيئته باستخدام Git.
2. أضف ملفات HTML وCSS وJavaScript: قم بإنشاء الملفات الضرورية لمشروعك.
3. إنشاء بنية HTML: استخدم ملف التصميم كمرجع لبناء البنية الأساسية لمشروعك.
4. تصميم HTML باستخدام CSS: استخدم ملف التصميم لتصميم عناصر مشروعك.
5. إضافة وظيفة باستخدام JavaScript: استخدم JavaScript للتعامل مع إدخالات المستخدم والحسابات.
6. اختبر مشروعك: استخدم أدوات المطور في متصفحك لاختبار وظائف مشروعك.
7. انشر مشروعك: قم باستضافة مشروعك على منصة استضافة مجانية.
نشر مشروعك
كما ذكرنا أعلاه، هناك العديد من الطرق لاستضافة مشروعك مجانًا. مضيفينا الموصى بهم هم:
صفحات جيثب
نيتليفي
فيرسل
يمكنك استضافة موقعك باستخدام أحد هذه الحلول أو أي من مقدمي الخدمة الموثوقين الآخرين لدينا. اقرأ المزيد عن مضيفينا الموصى بهم والموثوقين.
إنشاء ملف 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.
استمتع بالبناء! ✨
