tailwindcss vuejs

Community feedback

• 

  P

  Julien Gilbert•500

  @juliengDev

  Posted 4 months ago

  First of all, congratulations on your solution! I won’t be able to go into too much detail because I’ve never used the Vue framework before, so I find it a bit difficult to navigate the project structure. If you’re looking for feedback, you might consider switching back to vanilla JavaScript so that others can better understand the code.

  Semantic Structure

  I don’t see any semantic tags in your code—everything is built using <div> elements. This is unfortunate as it doesn’t follow best practices in terms of HTML structure and accessibility. (You can replace this with more appropriate elements like <header>, <section>, <article>, etc., to improve readability and accessibility.)

  Layout

  I noticed some inconsistencies with the original design:

  • The calculation form is not positioned the same way and lacks proper padding.
  • When resizing to responsive mode, the inputs take up the entire screen, which is visually overwhelming.
  • The card layout in the "Limitation of BMI" section does not match the expected desktop design.

  Logic

  • When switching from metric to imperial and then back to metric, the input fields are not reset, and the result text remains unchanged.
  • However, the calculation itself seems correct and only triggers when both required values are properly provided by the user.

  That’s what I was able to identify on my end—I hope this helps you spot the differences between the expected design/features and your project.

  And don’t worry, you’re not too old or rusty! It’s not a race. Learning takes a lot of time for me as well, but as long as you’re making progress, that’s what matters most. Stay motivate and have fun, that's is all matter! 🚀

  00