Frontend Mentor - Calculateur d'indice de masse corporelle
Accueillir! ?
Merci d'avoir acheté ce défi de codage Premium Frontend Mentor.
Les défis Frontend Mentor vous aident à améliorer vos compétences en codage en construisant des projets réalistes. Ces défis premium sont des éléments de portfolio parfaits, alors n'hésitez pas à utiliser ce que vous créez dans votre portfolio pour le montrer aux autres.
Pour relever ce défi, vous avez besoin d'une solide compréhension du HTML, du CSS et du JavaScript.
Le défi
Votre défi est de créer cette page de calcul de l’indice de masse corporelle et de la rendre aussi proche que possible du design.
Vous pouvez utiliser tous les outils de votre choix pour vous aider à relever le défi. Donc, si vous avez quelque chose que vous aimeriez mettre en pratique, n'hésitez pas à l'essayer.
Vos utilisateurs doivent pouvoir :
1. Saisissez leur taille et leur poids.
2. Calculez leur IMC en fonction des valeurs saisies.
3. Consultez leur résultat IMC affiché dans le composant Résultats.
4. Consultez leur classification de poids affichée dans le composant des résultats.
5. Consultez leur fourchette de poids santé affichée dans le composant Résultats.
Vous voulez du soutien pour relever le défi ? Rejoignez notre communauté et posez des questions sur le canal #help.
Comportement attendu
Vous trouverez ci-dessous les plages d'IMC et leurs classifications de poids. En fonction des résultats de l'IMC de la personne, ajoutez sa catégorie de poids à la phrase « Votre IMC suggère que vous êtes » dans le composant des résultats.
| Plage d'IMC | Classification du poids |
| ------------------ | ------------------------------------ |
| Moins de 18,5 | Insuffisance pondérale |
| 18,5 à 24,9 | Poids santé |
| 25 à 29,9 | Surpoids |
| 30 ou plus | Obèse |
Ajoutez la fourchette de poids santé de l'individu en fonction des catégorisations d'IMC inférieure et supérieure et de la taille de la personne.
Où trouver tout
Votre tâche consiste à créer le projet selon le fichier de conception fourni. Nous fournissons les versions Sketch et Figma de la conception, afin que vous puissiez choisir l'outil que vous préférez utiliser. Vous pouvez télécharger le fichier de conception sur la plateforme. Assurez-vous de ne pas les partager avec quelqu'un d'autre. Le téléchargement de la conception est également accompagné d'un fichier README.md pour vous aider à vous installer.
Tous les actifs requis pour ce projet se trouvent dans le dossier /assets. Les images sont déjà exportées pour la taille d'écran correcte et optimisées. Certains sont réutilisables sur plusieurs tailles d’écran. Ainsi, si vous ne voyez pas une image dans un dossier spécifique, elle se trouvera généralement dans un autre dossier pour cette page.
Nous incluons également des fichiers de polices variables et statiques pour les polices requises pour ce projet. Vous pouvez choisir de créer un lien vers Google Fonts ou d'utiliser les fichiers de polices locaux pour héberger vous-même les polices. Notez que nous avons supprimé les fichiers de polices statiques pour les épaisseurs de police qui ne sont pas nécessaires pour ce projet.
Le système de conception dans le fichier de conception vous donnera plus d'informations sur les différentes couleurs, polices et styles utilisés dans ce projet. Nos polices proviennent toujours de Google Fonts.
Construire votre projet
N'hésitez pas à utiliser n'importe quel flux de travail avec lequel vous vous sentez à l'aise. Vous trouverez ci-dessous un processus suggéré, mais ne vous sentez pas obligé de suivre ces étapes :
1. Configurez votre projet : créez un nouveau dossier pour votre projet et initialisez-le avec Git.
2. Ajoutez les fichiers HTML, CSS et JavaScript : Créez les fichiers nécessaires à votre projet.
3. Créez la structure HTML : utilisez le fichier de conception comme référence pour créer la structure de base de votre projet.
4. Stylisez le HTML avec CSS : utilisez le fichier de conception pour styliser les éléments de votre projet.
5. Ajoutez des fonctionnalités avec JavaScript : utilisez JavaScript pour gérer les entrées et les calculs des utilisateurs.
6. Testez votre projet : utilisez les outils de développement de votre navigateur pour tester les fonctionnalités de votre projet.
7. Déployez votre projet : Hébergez votre projet sur une plateforme d'hébergement gratuite.
Déployer votre projet
Comme mentionné ci-dessus, il existe de nombreuses façons d’héberger votre projet gratuitement. Nos hôtes recommandés sont :
Pages GitHub
Netlifier
Vercel
Vous pouvez héberger votre site en utilisant l'une de ces solutions ou l'un de nos autres fournisseurs de confiance. En savoir plus sur nos hôtes recommandés et de confiance.
Créer un fichier README.md personnalisé
Nous vous recommandons fortement d'écraser ce README.md par un fichier personnalisé. Nous avons fourni un modèle dans le fichier README-template.md dans ce code de démarrage.
Le modèle fournit un guide sur ce qu'il faut ajouter. Un README personnalisé vous aidera à expliquer votre projet et à réfléchir sur vos apprentissages. N'hésitez pas à modifier notre modèle autant que vous le souhaitez.
Une fois que vous avez ajouté vos informations au modèle, supprimez ce fichier et renommez le fichier README-template.md en README.md. Cela le fera apparaître comme fichier README de votre référentiel.
Soumettre votre solution
Soumettez votre solution sur la plateforme pour que le reste de la communauté puisse la voir. Suivez notre « Guide complet pour soumettre des solutions » pour obtenir des conseils sur la façon de procéder.
N'oubliez pas que si vous recherchez des commentaires sur votre solution, assurez-vous de poser des questions lorsque vous la soumettez. Plus vos questions sont précises et détaillées, plus vous avez de chances d'obtenir de précieux commentaires de la communauté.
⚠️ IMPORTANT ⚠️ : Avec ces défis premium, veillez à ne pas télécharger les fichiers de conception sur GitHub lorsque vous les soumettez à la plateforme et que vous les partagez. Si vous avez créé un tout nouveau projet, le moyen le plus simple de le faire est de copier le fichier .gitignore fourni dans ce projet de démarrage.
Partager votre solution
Il existe plusieurs endroits où vous pouvez partager votre solution :
Mentor Frontend : partagez votre solution sur la plateforme pour que le reste de la communauté puisse la voir.
GitHub : partagez votre solution sur GitHub.
Twitter : partagez votre solution sur Twitter.
Nous fournissons des modèles pour vous aider à partager votre solution une fois que vous l'avez soumise sur la plateforme. Veuillez les modifier et inclure des questions spécifiques lorsque vous recherchez des commentaires.
Plus vos questions sont précises, plus il est probable qu'un autre membre de la communauté vous fasse part de ses commentaires.
Vous avez des commentaires à nous faire ?
Nous aimons recevoir des commentaires ! Nous cherchons toujours à améliorer nos défis et notre plateforme. Donc, si vous avez quelque chose que vous aimeriez mentionner, veuillez envoyer un e-mail à hi[at]frontendmentor[dot]io.
Amusez-vous à construire ! ✨
