Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using Next.js 14, Tailwind, Typescript, Debouncer (lodash)

Pablo 550

@ackDeckard

Desktop design screenshot for the Body Mass Index calculator coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Finding the right time to tackle these challenges is always a bit of a hurdle.

For this particular project, I opted for the cutting-edge Next.js version 14, incorporating minimal Typescript type checking. My go-to for styling, as always, is Tailwind CSS.

To enhance the user experience and prevent unnecessary re-renders during text input, I integrated Lodash's default debouncer.

Additionally, as users input their height and weight, I've included a feature that returns the recommended weight based on their height.

Cheers! 🥂

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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