Responsive BMI index calculator - Html Css Js

Community feedback

• 

  P

  Mikhail Lorenzo Aniel•230

  @lorenzoanielPosted over 1 year ago

  Good job Pablo,

  • A little issue with the BMI Limitations section where it is not getting the desired pyramid/ brick effect in full desktop screen, noticed that there is a translate effect and depending on which resolution you developed at (currently looking at the site in 1920 x 1080) the static value of transform: translateX(-11.4rem); will not dynamically adjust which is why I am seeing it differently (also tried it on my main 2k resolution monitor and although it is better the layout is not as expected). Possible fix is to increase number of columns as it will be easier to create a tiled effect without having the need to translate anything.

  • regarding your issues with JS eventually you will come upon front end frameworks like react/vue/angular/svelte which are essential for modern front end development and will manipulate DOM (html elements) easier, but you can practice JS logic and syntax using leetcode or hackerrank as JS will still very much be an integral part of your front end journey. If you are interested in testing your hand at these frameworks easiest ones to jump into would be react or svelte; react is industry standard and has a bigger community but svelte has a very good tutorial built into their website (online terminal) and has alot of the features needed for near full stack web development built into it (sveltekit).

  Good luck on your journey

  Marked as helpful

  2

  ---

  

  P

  Pablo Dettori•740

  @p4bloxxPosted over 1 year ago

  @lorenzoaniel Hi Mikhail Lorenzo, and thank you very much for your feedback! regarding the BMI limitation section, yes, I had some problems with the Desktop view as the layout has a somewhat particular arrangement compared to the other versions; I was sure it wasn't the best solution to translate the two cards by 11.4 rem, but momentarily I thought it was an acceptable solution; That said, I'll try to improve it, I currently have it set up with a Flexbox row direction, what do you mean specifically by growing columns?

  As far as the JS side is concerned, I agree with you on using the frameworks, in fact as soon as I feel more confident in using it skillfully in various projects, my idea was to almost certainly switch to React in order to have more control even with larger projects challenging.

  Thanks a lot for now ;)

  0

  

  P

  Mikhail Lorenzo Aniel•230

  @lorenzoanielPosted over 1 year ago

  @p4bloxx Here i made an example to help you out: replit example

  let me know if the replit doesnt work i tested it out and it does, I will send you the code instead.

  of course you would need to have break points probably 3 since design files are usually mobile tablet and desktop and shrink the container or the individual items themselves accordingly. if you need help visualizing the grid go to developer tools in browser, click on container called wall and on the layout tabs find the grid 'div.wall' and tic the box and it will show you the grid, 7 columns translates to 8 lines, the odd number of columns basically creates the tiling effect for you, no margins or paddings needed and all you have to do is essentially take up 2 spaces per item the last column will act as its own indentation. Hope this helps!

  0

  

  P

  Pablo Dettori•740

  @p4bloxxPosted over 1 year ago

  @lorenzoaniel ok ok, I'll try to fix it like this, and see how it turns out, I'll do some tests; Thanks for the advice ;)

  0