Skip to content
Submitted over 1 year ago

Body Mass Index Calculation Application Developed with HTML, SASS, JS

Bruno Feitoza•20
@feitozabruno
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Body Mass Index calculator
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

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

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

Community feedback

  • Eli Silk•660
    @elisilkPosted 11 days ago

    Hi 👋 @feitozabruno,

    Congrats on a very nice solution. 👏 From the solution/design slider, it looks like what you produced was super close to the design, which is amazing.

    But it looks like you took down your GitHub repository and your current live solution looks much different than the design (at least as of 11/11/2024), so it's hard to provide any useful comments. I do like that you made the solution your own. That is super cool. But it might have made sense to fork your first solution before creating this new one.

    If you are up for diving in 🤿 just a little further with your new solution, I ran the Lighthouse audit on your site and it overall performs very well. The one exception in terms of Accessibility is that some of the colors don't have sufficient contrast. That's most noticeable with your h3.text-info class on the "BMI Calculator" heading. But the same issue also shows up on a couple of of your BMI category boxes. If you want to read more about color contrast, check out this link:

    Elements must meet minimum color contrast ratio thresholds

    Here is the Color Contrast Checker for the color on your h3.text-info class:

    Color Contrast Checker for text color of #0DCAF0

    And then here is a potential alternative color that would enhance the contrast:

    Color Contrast Checker for text color of #054957

    Anyway, just an idea to consider if you are thinking about improving on your customized solution. 🤔

    Great job overall! Happy coding. 💻

    Eli

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord