@arogersrenee
@ygabdn29
Submitted
@arogersrenee
Posted
I general go with the mobile first approach. It's easier to build upon rather than takeaway if you start with desktop.
@arogersrenee
Submitted
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?
@arogersrenee
Posted
updated my JavaScript. Added functions to calculate the healthy weight ranges.
@cwwittor
Submitted
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.
@arogersrenee
Posted
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);
}
@TusharPandey98
Submitted
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! 😊
@arogersrenee
Posted
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/
@Bimme2audrey
Submitted
Found it difficult giving a color over the image. Thank you for your contributions.
@arogersrenee
Posted
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/
Marked as helpful
@Alexandre-Simoes361
Submitted
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.
@arogersrenee
Posted
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.
Marked as helpful
@lainaq217
Submitted
Tengo problemas para las fuentes y para colocar de forma correcta los precios. Espro y agradezco sus comentarios
@arogersrenee
Posted
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.
@coffeeslammer
Submitted
Very challenging for me getting it to be responsive. Hope I'm on the right track on how it should be done.
@arogersrenee
Posted
small things that I noticed.
@arogersrenee
Submitted
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?
@arogersrenee
Posted
@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!
@RanvirChoudhary
Submitted
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?
@arogersrenee
Posted
It's at the bottom of the style-guide:
