Mentor Frontend - Calculadora de índice de masa corporal
¡Bienvenido! ?
Gracias por adquirir este desafío de codificación premium de Frontend Mentor.
Los desafíos de Frontend Mentor lo ayudan a mejorar sus habilidades de codificación mediante la creación de proyectos realistas. Estos desafíos premium son piezas perfectas para tu portafolio, así que siéntete libre de usar lo que crees en tu portafolio para mostrárselo a otros.
Para afrontar este desafío, necesita un sólido conocimiento de HTML, CSS y JavaScript.
El desafío
Su desafío es crear esta página de calculadora del índice de masa corporal y hacer que se parezca lo más posible al diseño.
Puedes utilizar cualquier herramienta que desees para ayudarte a completar el desafío. Entonces, si tienes algo que te gustaría practicar, no dudes en intentarlo.
Sus usuarios deberían poder:
1. Ingrese su altura y peso.
2. Calcule su IMC en función de los valores que ingresan.
3. Vea el resultado de su IMC en el componente de resultados.
4. Vea su clasificación de peso mostrada en el componente de resultados.
5. Vea su rango de peso saludable que se muestra en el componente de resultados.
¿Quieres apoyo en el desafío? Únase a nuestra comunidad y haga preguntas en el canal #ayuda.
Comportamiento esperado
A continuación encontrará los rangos de IMC y sus clasificaciones de peso. Según los resultados del IMC de la persona, agregue su clasificación de peso a la oración "Su IMC sugiere que está" dentro del componente de resultados.
| Rango de IMC | Clasificación de peso |
| ------------------ | --------------------- |
| Menos de 18,5 | Peso insuficiente |
| 18,5 a 24,9 | Peso Saludable |
| 25 al 29,9 | Sobrepeso |
| 30 o más | Obeso |
Agregue el rango de peso saludable del individuo según las categorizaciones de IMC superior e inferior y la altura de la persona.
Dónde encontrar todo
Su tarea es construir el proyecto en el archivo de diseño proporcionado. Proporcionamos versiones del diseño tanto Sketch como Figma, para que pueda elegir qué herramienta prefiere utilizar. Puede descargar el archivo de diseño en la plataforma. Asegúrese de no compartirlos con nadie más. La descarga del diseño también incluye un archivo README.md para ayudarle a configurarlo.
Todos los activos necesarios para este proyecto se encuentran en la carpeta /assets. Las imágenes ya están exportadas para el tamaño de pantalla correcto y optimizadas. Algunos son reutilizables en múltiples tamaños de pantalla. Entonces, si no ve una imagen en una carpeta específica, normalmente estará en otra carpeta de esa página.
También incluimos archivos de fuentes variables y estáticas para las fuentes requeridas para este proyecto. Puede optar por vincular a Google Fonts o utilizar los archivos de fuentes locales para alojar las fuentes usted mismo. Tenga en cuenta que hemos eliminado los archivos de fuentes estáticas para los pesos de fuente que no son necesarios para este proyecto.
El sistema de diseño en el archivo de diseño le brindará más información sobre los distintos colores, fuentes y estilos utilizados en este proyecto. Nuestras fuentes siempre provienen de Google Fonts.
Construyendo su proyecto
Siéntase libre de utilizar cualquier flujo de trabajo con el que se sienta cómodo. A continuación se muestra un proceso sugerido, pero no crea que es necesario seguir estos pasos:
1. Configure su proyecto: cree una nueva carpeta para su proyecto e inicialícela con Git.
2. Agregue los archivos HTML, CSS y JavaScript: cree los archivos necesarios para su proyecto.
3. Cree la estructura HTML: utilice el archivo de diseño como referencia para crear la estructura básica de su proyecto.
4. Diseñe el HTML con CSS: use el archivo de diseño para diseñar los elementos de su proyecto.
5. Agregue funcionalidad con JavaScript: use JavaScript para manejar la entrada y los cálculos del usuario.
6. Pruebe su proyecto: utilice las herramientas de desarrollo de su navegador para probar la funcionalidad de su proyecto.
7. Implemente su proyecto: Aloje su proyecto en una plataforma de alojamiento gratuita.
Implementando su proyecto
Como se mencionó anteriormente, hay muchas formas de alojar su proyecto de forma gratuita. Nuestros anfitriones recomendados son:
Páginas de GitHub
Netlificar
Vercel
Puede alojar su sitio utilizando una de estas soluciones o cualquiera de nuestros otros proveedores de confianza. Lea más sobre nuestros anfitriones recomendados y confiables.
Crear un archivo README.md personalizado
Recomendamos encarecidamente sobrescribir este README.md con uno personalizado. Proporcionamos una plantilla dentro del archivo README-template.md en este código de inicio.
La plantilla proporciona una guía sobre qué agregar. Un archivo README personalizado le ayudará a explicar su proyecto y reflexionar sobre sus aprendizajes. No dudes en editar nuestra plantilla tanto como quieras.
Una vez que haya agregado su información a la plantilla, elimine este archivo y cambie el nombre del archivo README-template.md a README.md. Eso hará que aparezca como el archivo README de su repositorio.
Enviando su solución
Envíe su solución en la plataforma para que la vea el resto de la comunidad. Siga nuestra "Guía completa para enviar soluciones" para obtener consejos sobre cómo hacerlo.
Recuerde, si busca comentarios sobre su solución, asegúrese de hacer preguntas al enviarla. Cuanto más específicas y detalladas sean sus preguntas, mayores serán las posibilidades de obtener comentarios valiosos de la comunidad.
⚠️ IMPORTANTE ⚠️: Con estos desafíos premium, asegúrese de no cargar los archivos de diseño en GitHub cuando los envíe a la plataforma y los comparta. Si ha creado un proyecto nuevo, la forma más sencilla de hacerlo es copiar el .gitignore proporcionado en este proyecto inicial.
Compartiendo su solución
Hay varios lugares donde puede compartir su solución:
Mentor de Frontend: comparta su solución en la plataforma para que la vea el resto de la comunidad.
GitHub: comparta su solución en GitHub.
Twitter: comparta su solución en Twitter.
Proporcionamos plantillas para ayudarle a compartir su solución una vez que la haya enviado a la plataforma. Edítelos e incluya preguntas específicas cuando busque comentarios.
Cuanto más específico sea con sus preguntas, más probable será que otro miembro de la comunidad le dé su opinión.
¿Tiene comentarios para nosotros?
¡Nos encanta recibir comentarios! Siempre estamos buscando mejorar nuestros desafíos y nuestra plataforma. Entonces, si tiene algo que le gustaría mencionar, envíe un correo electrónico a hi[at]frontendmentor[dot]io.
¡Diviértete construyendo! ✨
