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

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.