Skip to content
Submitted over 1 year ago

bmi-calculator with SaSS, bootstrap, vanilla JS

Chris Cablish•310
@ChrisCablish
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

I realize that my desktop and tablet designs do not match the provided design for this challenge. In all honesty, I've just spent too much time on this challenge already. Seeing as how this is my first project using SaSS and my second project using bootstrap, I have to say I'm pretty proud. Also the actual js functionality of the calculator took me forever to figure out so I am proud of that too. I've run out of steam on this project and decided to turn it in the way it is so i can move on. I am finding it increasingly tedious to manipulate CSS for responsive design. I feel like i could sit and stare and experiment and fail for hours and hours and this sometimes doesn't seems like a good use of my time. Any suggestions? Does the CSS get easier with experience?

Community feedback

  • Mikhail•440
    @MikeBeloborodovPosted over 1 year ago

    Don't sweat over it, man. It looks really good! Tried out your calculator, it says my BMI is bad D: Well, gotta exsercise more I guess... Anyway about your code. I looked over your styles and my main tip for better responsiveness is: try to avoid pixels! When you use pixels it's very hard to resize everyting for mobile and desktop. Try using rem or em units, you can find a lot of videos about it on youtube. I usually do mobile design first, set everything in rem (paddings, margins, font-sizes... just almost everything except border width, setting them in px is ok). And then when I finish my mobile design I can just create a simple media query to set my html font-size to less or more than before and my whole page resizes like magic! For example:

    @media screen and (max-width: 22rem) {
html {
font-size: 0.3em;
}
}

    Try it out on a smaller project, like a card component or something and then integrate it into your toolkit for bigger projects. Good luck!

    Marked as helpful
    0
    Chris Cablish•310
    @ChrisCablishPosted over 1 year ago

    @MikeBeloborodov i didn't realize you could do this. Thanks for the reply, i will be incorporating this for sure!!!

    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