An open API service indexing awesome lists of open source software.

https://github.com/thekiranmahajan/bmi-calculator

BMI index calculator which is used to understand the status of weight to height ratio of an adult person as per the WHO guidelines for BMI. a cool looking container having glassmorphism effect and a bg image made using HTML, CSS. the logic of getting user inputs dynamically and computing the BMI value with conditional Tips implemented using DOM.
https://github.com/thekiranmahajan/bmi-calculator

bmi-calculator css dom-manipulation glassmorphism glassmorphism-css html javascript user-tips

Last synced: 7 months ago
JSON representation

BMI index calculator which is used to understand the status of weight to height ratio of an adult person as per the WHO guidelines for BMI. a cool looking container having glassmorphism effect and a bg image made using HTML, CSS. the logic of getting user inputs dynamically and computing the BMI value with conditional Tips implemented using DOM.

Awesome Lists containing this project

README

          

Hello Folks,๐Ÿ˜Š โš–๏ธ

Here with another ๐—๐—ฎ๐˜ƒ๐—ฎ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ ๐—ฃ๐—ฟ๐—ผ๐—ท๐—ฒ๐—ฐ๐˜ {๐Ÿด/๐Ÿญ๐Ÿฎ} : ๐—•๐— ๐—œ ๐—–๐—ฎ๐—น๐—ฐ๐˜‚๐—น๐—ฎ๐˜๐—ผ๐—ฟ โš–๏ธ

๐Ÿ’ป Live Deployed link: https://bmi-calculator-ray.vercel.app/

๐Ÿ†šGitHub Repo Link: https://github.com/thekiranmahajan/bmi-calculator

https://github.com/thekiranmahajan/bmi-calculator/assets/91893931/b22c2c62-df8c-468c-a030-4ed4db433eb7

โญ•FEATURESโญ•

๐Ÿญ Utilised the powers of CSS and HTML to create a modern-looking glass-morphic design, and animated button with overall responsive and interactive UI.

๐Ÿญ Targeting the input fields to retrieve the user input data of Weight and height.

๐Ÿญ Performing the conversion of the Weight and Height of the user to an accurate BMI index/value.

๐Ÿญ While avoiding the negative Numbers and String values ensuring the conversion of final output as Number using + also fixing the decimal using toFixed(2) fn of Js.

๐ŸญFinally showing some conditional Tips to the user based on the input provided and the WHO guidelines for the BMI index. Dynamically reflecting values to UI for better UX

#UI #UX #responsive #frontenddeveloper #frontend #frontendproject #Javascript #HTML #CSS #glassmorphism #dsa #jobs #jobseekers #learningprogress #learninpublic