This is technical project assignment (TPA2) - BMI calculator from the Skilvul Bootcamp Fullstack of the Innovation Women Program 2023.

• Overview
  • Specs
  • Expected result
  • Screenshot
  • Link
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

1. Create a website application to calculate Body Mass Index (BMI) based on established standards.
2. Users must input their Weight in KG.
3. Users must input their Height in CM.
4. The BMI formula for units in KG and CM is Weight / (Height/100)^2.
5. The application should display the BMI status according to the following standards:

• BMI Categories:
  • Underweight = <18.5
  • Normal weight = 18.5 – 24.9
  • Overweight = 25 – 29.9
  • Obesity = BMI of 30 or greater

• Weight: 60 KG
• Height: 167 CM BMI = 60 / (167/100)^2 BMI = 60 / (2.8) BMI = 21.5 BMI Categories: Normal

• Live Site URL: BMI-Check

• Flexbox
• CSS Grid
• Vanilla Javascript

The recap that is recorded here is basic css which I often rarely use.

• Clear text content when input fields are clicked:

const clearFailNotif = () => failNotif.textContent = '';
weightInput.addEventListener('focus', clearFailNotif);
heightInput.addEventListener('focus', clearFailNotif);

• Changing images based on conditions with the DOM :

if (bmi < 18.5) {
    BMIcat.textContent = 'under weight'.toUpperCase();
    ImgCat.src = ('assets/under_weight.svg')

} else if (bmi >= 18.5 && bmi <= 24.9) {
    BMIcat.textContent = 'normal weight'.toUpperCase();
    ImgCat.src = ('assets/normal_weight.svg')

} else if (bmi >= 25 && bmi <= 29.9) {
    BMIcat.textContent = 'over weight'.toUpperCase();
    ImgCat.src = ('assets/over_weight.svg')

} else {
    BMIcat.textContent = 'obesity'.toUpperCase();
    ImgCat.src = ('assets/obesity.svg')
}

• Refrash page when invoke function :

const refreshPage = () => location.reload()

• Nested event :

BtnCheck.addEventListener('click', (e) => {
    ...
    if (isValidInput) {
        ...
        if (BMIresult !== null) {
            ...

            BtnCheck.style.display = 'none';  
            BtnReCheck.style.display = 'inline-block'; /
            BtnReCheck.addEventListener('click', refreshPage)
        }
    }
})

When reloading to clear the form after inspection, all elements are reloaded, including images. This will disrupt website performance if done on a large scale. Using React is one solution, but what if use vanilla JavaScript? It will be more complicated, but there, I will learn a lot of things.

• CSS Grid - the easiest guide to use the grid, there is a picture of each code that will be generated, cool
• Box Sizing - example of the impact of using box-sizing
• Beautiful Button - provides botton styles complete with CSS

• Skilvul Profile - @fidaatag
• Twitter - @fidaatag
• Linkedin - Fidaa Mustaghfiroh