BMR Calculator
+ +## Description :- + +Calculates the Basal Metabolic Rate of a person with the help of its height,weight,age,gender. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + + + diff --git a/Calculators/BMR-Calculator/script.js b/Calculators/BMR-Calculator/script.js new file mode 100644 index 000000000..1fdaabdb2 --- /dev/null +++ b/Calculators/BMR-Calculator/script.js @@ -0,0 +1,19 @@ +function calculateBMR() { + var gender = document.getElementById("gender").value; + var age = parseInt(document.getElementById("age").value); + var weight = parseFloat(document.getElementById("weight").value); + var height = parseFloat(document.getElementById("height").value); + + var bmr; + if (gender === "male") { + + bmr = 10 * weight + 6.25 * height - 5 * age + 5; + + } else { + + bmr = 10 * weight + 6.25 * height - 5 * age - 161; + } + + document.getElementById("result").innerHTML = "Your Basal Metabolic Rate (BMR) is " + bmr.toFixed(2) + " calories per day."; + } + \ No newline at end of file diff --git a/Calculators/BMR-Calculator/style.css b/Calculators/BMR-Calculator/style.css new file mode 100644 index 000000000..2da53bc3c --- /dev/null +++ b/Calculators/BMR-Calculator/style.css @@ -0,0 +1,63 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color:#fff; + background-image: linear-gradient(90deg,#1CA7EC,#1F2F98); + } + + .calculator { + background-color:#fff; + width: 400px; + margin: 50px auto; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + h1 { + text-align: center; + color: #333; + } + + .form { + margin-bottom: 20px; + } + + label { + display: block; + margin-bottom: 8px; + color: #555; + } + + input[type="number"], + select { + width: 100%; + padding: 8px; + margin-bottom: 12px; + border: 1px solid #ccc; + border-radius: 4px; + } + + + button { + width: 100%; + padding: 10px; + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + button:hover { + background-color: #45a049; + } + + #result { + text-align: center; + font-size: 18px; + color: #333; + } + \ No newline at end of file diff --git a/Calculators/Tip-Calculator/index.html b/Calculators/Tip-Calculator/index.html new file mode 100644 index 000000000..ce3c1efd7 --- /dev/null +++ b/Calculators/Tip-Calculator/index.html @@ -0,0 +1,27 @@ + + + + + +Enter the Bill amount and Tip percentage to calculate the total😊
+Tip Calculator
+ +## Description :- + +Calculates the total bill with the value of Bill Amount and Tip Percentage. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + + diff --git a/Calculators/Tip-Calculator/script.js b/Calculators/Tip-Calculator/script.js new file mode 100644 index 000000000..2bf95f6a8 --- /dev/null +++ b/Calculators/Tip-Calculator/script.js @@ -0,0 +1,15 @@ +const btnE1 = document.getElementById("calculate"); +const billInput =document.getElementById("bill"); +const tipInput = document.getElementById("tip"); +const totalSpan = document.getElementById("total"); + +function calculateTotal(){ + const billValue = billInput.value; + const tipValue = tipInput.value; + const totalValue = billValue * (1 + tipValue / 100); + totalSpan.innerText = totalValue.toFixed(2); + +} + + +btnE1.addEventListener("click", calculateTotal); diff --git a/Calculators/Tip-Calculator/styles.css b/Calculators/Tip-Calculator/styles.css new file mode 100644 index 000000000..26ad2445a --- /dev/null +++ b/Calculators/Tip-Calculator/styles.css @@ -0,0 +1,59 @@ +*{ + box-sizing: border-box; +} + +body{ + + background: linear-gradient(90deg, #3498db, #2c3e50); + font-family: "Helvetica", + sans-serif; +} + +.container{ + + background-color:white; + max-width:600px; + margin:100px auto; + padding:20px; + box-shadow:0 0 10px rgba(0,0,0,.2); + border-radius: 10px; +} + +h1{ + color: #3498db; + margin-top: 0; + text-align: center; + +} + +input{ + padding:10px; + border:1px solid #ccc; + border-radius: 4px; + margin:10px 0; + width:100%; +} + +button{ + background-color: #4caf50; + color:white; + padding:10px; + border:none; + cursor:pointer; + margin:10px 0; + width:100%; + font-size: 18px; + text-transform: uppercase; + transition: background-color .2s ease; +} + +button:hover{ + background-color: #0d5d11; +} + +#total{ + font-size: 24px; + font-weight: bold; + margin-top: 10px; + +} \ No newline at end of file diff --git a/index.html b/index.html index aab0626e6..c4a7c69a8 100644 --- a/index.html +++ b/index.html @@ -286,6 +286,21 @@
+