I general go with the mobile first approach. It's easier to build upon rather than takeaway if you start with desktop.
If anyone has time to offer suggestions with my JS that would be great. I think the calculator works fine. I think my logic is okay, but I wonder if I could have simplified things.
I want to organize the JS code a little better. I'm trying to avoid "spaghetti code" or not repeating myself.
I converted my user inputs to numbers before doing calculations. Should I convert back to string when updating innerContent?
updated my JavaScript. Added functions to calculate the healthy weight ranges.
Not really happy with my solution and think I need to work on how to better set up a project since I had been just having a lot of problems stemming from how I had done this one. Especially ones related to trying to use CSS variables for too many different html items where it came to bite me in the butt when working on the desktop viewport.
Aside from structural problems, I did find it hard to determine how gradients would work in general and what or where absolute background sections would be or if I would even use them. Same with dropshadow for some of the items in the solution.
Also was curious on how other people did the grid in the bottom. I will be checking out solutions for this project to see mine wasn't 1:1.
Gradients & Drop shadows
Are you using the Figma files? The gradients and box shadows needed are provided with the design. Figma provides the styles when in dev mode.
Bottom Grid
For the bottom portion I used a 12-column grid and positioned the items where I wanted them using grid-column.
Here's a snippet of the css I used to position the items:
.limitations-card,
.limitations-card:last-child { grid-column: span 4;}
.section-bmi-limitations > div:nth-child(3) { grid-column: 8 / span 4;}
.section-bmi-limitations > div:nth-child(4) { grid-column: 5 / span 4;}
.section-bmi-limitations > div:nth-child(6) { grid-column: 3 / span 4; }
I think my HTML and CSS are good. Don't look too much into the JS 😅 Take a look at my solution here: https://www.frontendmentor.io/solutions/body-mass-index-calculator-L_mIraAuz0
Custom Variables Take a look at how I set up my classes and use the custom variables. I think what's making it hard for you is that you are making a unique class for each custom variable. Try making one class and style that using the custom variables. For example:
.limitations-card-heading {
font-size: var(--fs-heading-S);
font-weight: var(--fw-semibold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading-S);
color: var(--clr-gunmetal);
}
I found adding colour to the background image in this task challenging, but I accomplished it using the blend mode property in CSS. This was a new property for me, and I'm glad to have learned it through this challenge.
If you have any feedback or suggestions, please feel free to share them. Thank you! 😊
For the color over the image, trying using box-shadow: inset ...... (see link below)
"The box-shadow has a property value called inset, which causes the shadow to appear inwards of the frame of the box." This combined with a color with a lowered opacity will give you the effect that you want.
https://www.hongkiat.com/blog/css-only-overlays-box-shadow/
Found it difficult giving a color over the image. Thank you for your contributions.
For the color over the image, trying using box-shadow: inset ...... (see link below)
"The box-shadow has a property value called inset, which causes the shadow to appear inwards of the frame of the box." This combined with a color with a lowered opacity will give you the effect that you want.
https://www.hongkiat.com/blog/css-only-overlays-box-shadow/
While working on this project, I couldn't help but feel like the order of how I went about things was a bit random, and would like to structure my approach a bit more. How should I go about organizinbg this? As in, should I first work on the position boxes, then the content, then the styles, top to bottom, left to right, how? That would be my biggest question in terms of best practices, how do I structure my approach.
Thank you.
I think everyone might be different. I start with the mobile format first then work my way up the different sizes. I usually work on the structure of the HTML as much as I can at first. Then move to the CSS. I think I start with global changes, like fonts and colors. Then I kind of work from top to bottom based on the HTML. So I style my body first, then header, divs and so on. Usually once I get to the CSS I may have to modify the HTML a little, so it becomes a bit back and forth sometimes. Overall, I think it may just be about finding a system for yourself and being consistent so that it doesn't feel random.
Tengo problemas para las fuentes y para colocar de forma correcta los precios. Espro y agradezco sus comentarios
The file can't find the image because your images are not uploaded to github. In your HTML file check that your image link is a relative link, then re-upload the folder to github and the image should display.
Very challenging for me getting it to be responsive. Hope I'm on the right track on how it should be done.
small things that I noticed.
This was a hard challenge for me. Any feedback would be extremely helpful.
How do you do curved divs? I don't think the solution I found is the best. It creates a horizontal scroll that I don't know how to fix.
I also know that I need to read into positioning and how to move elements. I found a solution that I was able to play with but any advice in that area is welcome.
Was positioning the best choice to use for the phone and the bottom section with the founder image and the text-box?
@grace-snow @Chanda-Abdul @burrijw
Thanks for feedback. It was truly helpful! I ended up restarting and I took into account as much as I could figure out.
I tried the svg route on one section and the clipping path on the other. I'll have to play around with them more to figure out when which is better than the other.
I also did the same for the coils. A couple are background images and the other added to the html. Positioning these was a challenge.
Overall, there's much more that I need to figure out. As a beginner (1 month of learning html & css) this was much harder than I thought it would be!
I Think I got the solution pretty right but i can't figure out what font is used in the original design. Can anyone tell?
It's at the bottom of the style-guide:
