Frontend Mentor - Body Mass Index Calculation Solution

This is a solution for the Body Mass Index Calculator challenge in Frontend Mentor. Frontend Mentor's challenges help you improve your skills in developing realistic projects.

Index

• Overview
• The challenge
• Screenshot
• Links
• My process
• Built with
• What I've Learned
• Continuous Development
• Useful Resources
• Author

Note: Please delete this note and update the table of contents based on the sections you maintain.

Overview

The challenge

Users must be able to:

• select whether to use managerial or imperial units
• Enter your height and weight
• View your BMI result, with your weight rating and healthy weight range
• See the optimal layout for the interface depending on the device screen size
• View hover and focus states for all interactive elements on the page

Screenshot

Project preview

Links

• Live website URL: BMI Calculator

My process

Built with

• semantic HTML5
• SASS/SCSS
• Flexbox
• CSS Grid
• Mobile first workflow
• Pure JavaScript

What Ive learned

Use this section to recap some of your key learnings as we look at this project. Writing them down and providing sample code of the areas you want to highlight is a great way to strengthen your own knowledge.

To see how you can add code snippets, see below:

SASS/SCSS/CSS

1. Modularization of files and use of variables in SASS/SCSS.
2. Flexbox and GRID
3. Absolute and Relative Position.
4. Styling radio type inputs.
5. Visual accessibility and accessibility for screen readers.
6. Pseudo-class (::after) and (::before).
7. Property (:focus-within) to activate the focus of a child element on the parent element.
8. Responsibility for all device sizes.

JS

1. Manipulation of the DOM
2. Create reusable functions.

Continuous Development

I'm building my JavaSript base to learn and work with ReactJS and then NextJS in the future. For styling I intend to work with TailwindCSS and styled-components.

Useful Resources

• ChatGPT - This helped me understand the concepts and workings of all my doubts.
• Frontend Mentor - This is an amazing platform that helped me find professional and responsive Figma projects to turn into code.

Author

• Website - Bruno Feitoza
• GitHub - @feitozabruno
• Mentor Frontend - @feitozabruno