Submitted 7 months ago

BMI Calculator Webpage - Mobile first, JS, SASS/SCSS, Grid, Flexbox

John•410

@MiyaoCat

Preview site View code

This is a solution for...Body Mass Index calculator

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Next time I'll do a bit more planning. I ran into some trouble between screen sizes and how the elements would move in relation to the screen width.

What challenges did you encounter, and how did you overcome them?

I especially had trouble with the inputs, specifically the blue text inside the input boxes.

It took me 3 iterations to nail.

First - I tried adding the text using the :after pseudo-class then using position: absolute. I try to stay way from using position absolute as much as possible, but this was the first thing that came to mind. I positioned the text so it fit inside the input box, but as soon as I changed the screen width the text would move. This clearly would not be suitable.

Second - I looked at some real world forms that have some sort of image or text inside the input. I came across Nike.com and saw that they had a wrap around the input and the text/image. This actually worked, for the most part. I had something like this:

    
            
                
    
              cm
            

```. I then added all of the CSS like hover and focus to the wrap. But one thing that I didn't really like was when I'd tab from one 'input-wrap' to the next input, it would require the user to press tab twice to get to the actually input field (once for the wrap then a second tab to get into the input). I figured I could get away with this, but it wasn't a great experience.

This led me to my final solution. Instead of wrapping the input and text in a separate div, I used the label to wrap the div. The only unfortunate part about this solution is that the label doesn't have any text inside it. However, this solved the tab issue. Now you can easily tab between inputs. 

I also struggled with the Limitation cards (Gender, Age, Race, etc). I knew I had to use grid, but I didn't set it up right initially. I had all of the cards wrapped in a div and the div wrapper had a grid. This worked for mobile and tablet, but not for desktop as the sub-header and text didn't play well with that design. All I had to do was remove the wrapper.

### What specific areas of your project would you like help with?
I'd like to have a JSON file with all the different "ideal" weights for each height. I started working on it,  but I didn't get it up and running. I created the JSON file with the data, but need to pull it into the webpage.

Community feedback

M•940

@Dev-MV6Posted 7 months ago

Hi there 👋, good job on completing the challenge.

I came across your solution and decided to write a function to give you an idea of how you can achieve what you want to do with the ideal weight ranges. First of all, I think you definitely have to find a better way to store the weight ranges in your data.json, here's one way you can do it:

{
  "100": { "min": 13.9, "max": 21.9 },
  "110": { "min": 14.3, "max": 23.3 },
  "120": { "min": 15.0, "max": 24.8 },
  "130": { "min": 15.7, "max": 26.2 },
  "140": { "min": 16.5, "max": 27.7 },
  "150": { "min": 17.4, "max": 29.2 },
  "160": { "min": 18.5, "max": 31.0 },
  "170": { "min": 19.6, "max": 32.8 },
  "180": { "min": 20.8, "max": 34.7 },
  "190": { "min": 22.1, "max": 36.6 },
  "200": { "min": 23.5, "max": 38.6 },
  "210": { "min": 24.9, "max": 40.7 },
  "220": { "min": 26.5, "max": 42.9 },
  "230": { "min": 28.1, "max": 45.3 },
  "240": { "min": 29.9, "max": 47.7 },
  "250": "out of range"
}

And here's the function to fetch and consume the data:

let idealWeights
function getIdealWeight(userHeight) {
  if (!idealWeights) {
    // Fetch data
    fetch("data.json")
      .then((response) => {
        if (!response.ok) throw new Error("Unable to get ideal weight: And error occured while fetching the data")
        return response.json()
      })
      .then((data) => {
        idealWeights = data
        getIdealWeight(userHeight)
      })
  } else {
    // Use fetched data
    const heightRangeKey = Object.keys(idealWeights) // Get all keys from object
      .sort((a, b) => parseInt(b) - parseInt(a)) // Sort heights
      .find((height) => parseInt(height) <= userHeight) // Find matching height

    const idealWeightRange = idealWeights[heightRangeKey]

    if (!idealWeightRange || idealWeightRange === "out of range") {
      throw new Error("Unable to get ideal weight: Given height is out of range")
    }

    return idealWeightRange
  }
}

console.log(getIdealWeight(180))

This is might not be the best solution for your problem but at least I hope it can give some hints for you to come up with something better. Good luck!

Hope you find this helpful 👍

Please log in to post a comment

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