diff --git a/index.html b/index.html index 6356d5db..22a4f01c 100644 --- a/index.html +++ b/index.html @@ -489,6 +489,14 @@

Temperature Converter

Astromania

+ +
+
+

Calculator

+

BMI Calculator JS

+ +
+
diff --git a/projects/BMI_Calculator_JS/Image/bmi image.png b/projects/BMI_Calculator_JS/Image/bmi image.png new file mode 100644 index 00000000..f8a0082d Binary files /dev/null and b/projects/BMI_Calculator_JS/Image/bmi image.png differ diff --git a/projects/BMI_Calculator_JS/index.html b/projects/BMI_Calculator_JS/index.html new file mode 100644 index 00000000..327e5b86 --- /dev/null +++ b/projects/BMI_Calculator_JS/index.html @@ -0,0 +1,20 @@ + + + + BMI CALCULATOR + + + +
+

BMI CALCULATOR

+

Height

+ +

Weight

+ +

+ +

Please enter height[cm] and weight [kg]

+
+ + + diff --git a/projects/BMI_Calculator_JS/script.js b/projects/BMI_Calculator_JS/script.js new file mode 100644 index 00000000..b552b326 --- /dev/null +++ b/projects/BMI_Calculator_JS/script.js @@ -0,0 +1,7 @@ +function bmi(){ + let h=document.getElementById("h").value; + let w=document.getElementById("w").value; + let ans=w/(h/100*h/100); + let bmio=(ans.toFixed(2)); + document.getElementById("result").innerHTML="Your BMI is "+bmio; +} \ No newline at end of file diff --git a/projects/BMI_Calculator_JS/style.css b/projects/BMI_Calculator_JS/style.css new file mode 100644 index 00000000..aec91791 --- /dev/null +++ b/projects/BMI_Calculator_JS/style.css @@ -0,0 +1,66 @@ +body{ + margin: 0; + padding: 0; + text-align: center; + background-image: linear-gradient(120deg,#ff6b6b,#5f27cd); + min-height: 100vh; + +} +div{ + width: 500px; + position: absolute; + top: 50%; + left: 50%; + background-color: #fff; + transform: translate(-50%,-50%); + padding: 20px; + border-radius: 10px; + box-shadow: 1px 1px 20px #ee5253; + +} +h2{ + font-size: 30px; + font-weight: 600; +} +.text{ + text-align: left; + margin-left: 150px; +} +#w,#h{ + color:#222f3e; + text-align: left; + font-size: 20px; + font-weight: 200; + outline: none; + border:none; + background: none; + border-bottom: 1px solid #341f97; + width: 200px; +} +#w:focus,#h:focus{ + border-bottom: 2px solid #841f97; + width: 300px; + transition: .5s; +} +#result{ + color:#341f97; +} +#btn{ + margin-top: 10px; + border:none; + color: #fff; + background-image: linear-gradient(120deg,#ff6b6b,#5f27cd); + width: 150px; + padding: 10px; + border-radius: 30px; + outline: none; + cursor: pointer; +} +#btn:hover{ + box-shadow: 1px 1px 10px #341f97; + +} +#info{ + font-size: 12px; + +}