rajeevkumar504 · HarshS16 · Jan 17, 2025 · Jan 17, 2025
diff --git a/34-BMI-Calculator/README.md b/34-BMI-Calculator/README.md
@@ -0,0 +1,66 @@
+
+# BMI Calculator
+
+## About the Project
+
+**BMI Calculator** is a simple web-based application that calculates the Body Mass Index (BMI) of a user based on their height (in cm) and weight (in kg). BMI is a measure used to determine whether a person is underweight, in the normal range, or overweight. The tool provides a quick and rough estimate of a user's physical fitness.
+
+---
+
+## Features
+- Clean and responsive interface.
+- Real-time BMI calculation.
+- Displays the BMI value along with the corresponding category:
+  - **Underweight**
+  - **Normal weight**
+  - **Overweight**
+- Reset option to clear the inputs and results.
+
+---
+
+## How to Use
+1. Open the application in a web browser.
+2. Enter your height in centimeters (cm).
+3. Enter your weight in kilograms (kg).
+4. Click the **Calculate BMI** button.
+5. View the calculated BMI value and the corresponding fitness category.
+6. Use the **Reset** button to start over.
+
+---
+
+## Technologies Used
+- **HTML**: To structure the user interface.
+- **CSS**: To style and enhance the look and feel of the application.
+- **JavaScript**: To implement the BMI calculation logic and interactivity.
+
+---
+
+## Project Structure
+```
+project-folder/
+├── index.html    # Main HTML file
+├── style.css     # CSS for styling the application
+└── script.js     # JavaScript for BMI calculation logic
+```
+
+---
+
+## How to Run the Project
+1. Clone this repository:
+   ```bash
+   git clone https://github.com/HarshS16/JS_Project_BMI_Calculator
+   ```
+2. Open the `index.html` file in any web browser.
+
+---
+
+
+## Future Enhancements
+- Add validation for user inputs (e.g., non-numeric or negative values).
+- Include a graphical representation of BMI categories.
+- Save user BMI history using local storage.
+
+---
+
+**Stay Healthy!**
+
diff --git a/34-BMI-Calculator/index.html b/34-BMI-Calculator/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://i.postimg.cc/CKdNmgtg/android-chrome-192x192.png">
+
+</head>
+<body>
+    <form id="form1">
+        <h1>BMI CALCULATOR</h1>
+        <br>
+        <br>
+        <label for="height"> Height :</label>
+        <input type="text" id="height">
+        <br>
+        <br>
+        <label for="weight"> Weight :</label>
+        <input type="text" id="weight">
+        <br>
+        <br>
+        <button type="submit" class="button" id="submit">Calculate</button>
+        <div id="results">   </div>
+        <br>
+        <br>
+        <div id="weight-guide" >
+            <h3>BMI Weight Guide</h3>
+            <p> Less than 18.6 : Under Weight </p>
+            <p> Between 18.6 and 24.9 : Normal </p>
+            <p> Greater than 24.9 : Overweight</p>
+          </div>
+
+          <!-- <div id="weight-category"></div> -->
+
+    </form>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/34-BMI-Calculator/script.js b/34-BMI-Calculator/script.js
@@ -0,0 +1,31 @@
+const form = document.querySelector('form');
+// this usecase will give you empty
+// const height = parseInt(document.querySelector('#height').value)
+
+form.addEventListener('submit', function (e) {
+  e.preventDefault();
+
+  const height = parseInt(document.querySelector('#height').value);
+  const weight = parseInt(document.querySelector('#weight').value);
+  const results = document.querySelector('#results');
+
+  if (height === '' || height < 0 || isNaN(height)) {
+    results.innerHTML = `Please give a valid height ${height}`;
+  } else if (weight === '' || weight < 0 || isNaN(weight)) {
+    results.innerHTML = `Please give a valid weight ${weight}`;
+  } else {
+    const bmi = (weight / ((height * height) / 10000)).toFixed(2);
+    //show the result
+    results.innerHTML = `<span>${bmi}</span>`;
+  }
+});
+
+
+//   if(bmi<18.6){
+//     weight-category.innerHTML = `You are underweight`;}
+//   else if(bmi>=18.6 && bmi<24.9){
+//     weight-category.innerHTML = `You have a normal weight`;}
+//     else if(bmi>24.9 ){
+//     weight-category.innerHTML = `You are overweight`;}
+// });
+
diff --git a/34-BMI-Calculator/styles.css b/34-BMI-Calculator/styles.css
@@ -0,0 +1,61 @@
+body{
+    background-color: antiquewhite;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, sans-serif;
+    color: #333;
+}
+
+
+
+
+
+.container {
+    width: 575px;
+    height: 825px;
+
+    background-color: #797978;
+    padding-left: 30px;
+  }
+  #height,
+  #weight {
+    width: 150px;
+    height: 25px;
+    margin-top: 30px;
+  }
+
+  #weight-guide {
+    margin-left: 50px;
+    margin-top: 25px;
+  }
+
+  #results {
+    font-size: 35px;
+    margin-left: 90px;
+    margin-top: 20px;
+    color: rgb(28, 19, 19);
+  }
+
+  button {
+    width: 150px;
+    height: 35px;
+    margin-left: 60px;
+    margin-top: 25px;
+    background-color: #57cc1d;
+    padding: 1px 30px;
+    border-radius: 8px;
+    color: white;
+    text-decoration: none;
+    border: 2px solid #212121;
+    text-align: center;
+    justify-content: center;
+    font-size: 25px;
+  }
+
+  h1 {
+    padding-left: 15px;
+    padding-top: 25px;
+
+  }
+
diff --git a/35-Drumkit-Game/.idea/.gitignore b/35-Drumkit-Game/.idea/.gitignore
diff --git a/35-Drumkit-Game/.idea/DrumKit.iml b/35-Drumkit-Game/.idea/DrumKit.iml
diff --git a/35-Drumkit-Game/.idea/modules.xml b/35-Drumkit-Game/.idea/modules.xml
diff --git a/35-Drumkit-Game/.idea/vcs.xml b/35-Drumkit-Game/.idea/vcs.xml
diff --git a/35-Drumkit-Game/README.md b/35-Drumkit-Game/README.md
@@ -0,0 +1 @@
+# Drumkit-
diff --git a/35-Drumkit-Game/images/17973908.jpg b/35-Drumkit-Game/images/17973908.jpg
diff --git a/35-Drumkit-Game/images/crash.png b/35-Drumkit-Game/images/crash.png
diff --git a/35-Drumkit-Game/images/kick.png b/35-Drumkit-Game/images/kick.png
diff --git a/35-Drumkit-Game/images/snare.png b/35-Drumkit-Game/images/snare.png
diff --git a/35-Drumkit-Game/images/tom1.png b/35-Drumkit-Game/images/tom1.png
diff --git a/35-Drumkit-Game/images/tom2.png b/35-Drumkit-Game/images/tom2.png
diff --git a/35-Drumkit-Game/images/tom3.png b/35-Drumkit-Game/images/tom3.png
diff --git a/35-Drumkit-Game/images/tom4.png b/35-Drumkit-Game/images/tom4.png
diff --git a/35-Drumkit-Game/index.html b/35-Drumkit-Game/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Drum Kit</title>
+  <link rel="stylesheet" href="styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
+  <link rel="icon" type="image/jpg" href="https://i.postimg.cc/Twq1LX4g/favicon-32x32.png">
+</head>
+
+<body>
+  <h1 id="title">Drum 🥁 Kit</h1>
+  <div class="set">
+    <button class="w drum">do</button>
+    <button class="a drum">re</button>
+    <button class="s drum">mi</button>
+    <button class="d drum">fa</button>
+    <button class="j drum">so</button>
+    <button class="k drum">la</button>
+    <button class="l drum">ti</button>
+  </div>
+
+
+<script src="index.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/35-Drumkit-Game/index.js b/35-Drumkit-Game/index.js
@@ -0,0 +1,81 @@
+var numberOfDrumButtons = document.querySelectorAll(".drum").length;
+
+for (var i = 0; i < numberOfDrumButtons; i++) {
+
+  document.querySelectorAll(".drum")[i].addEventListener("click", function() {
+
+    var buttonInnerHTML = this.innerHTML;
+
+    makeSound(buttonInnerHTML);
+
+    buttonAnimation(buttonInnerHTML);
+
+  });
+
+}
+
+document.addEventListener("keypress", function(event) {
+
+  makeSound(event.key);
+
+  buttonAnimation(event.key);
+
+});
+
+
+function makeSound(key) {
+
+  switch (key) {
+    case "do":
+      var tom1 = new Audio("sounds/tom-1.mp3");
+      tom1.play();
+      break;
+
+    case "re":
+      var tom2 = new Audio("sounds/tom-2.mp3");
+      tom2.play();
+      break;
+
+    case "mi":
+      var tom3 = new Audio('sounds/tom-3.mp3');
+      tom3.play();
+      break;
+
+    case "fa":
+      var tom4 = new Audio('sounds/tom-4.mp3');
+      tom4.play();
+      break;
+
+    case "so":
+      var snare = new Audio('sounds/snare.mp3');
+      snare.play();
+      break;
+
+    case "la":
+      var crash = new Audio('sounds/crash.mp3');
+      crash.play();
+      break;
+
+    case "ti":
+      var kick = new Audio('sounds/kick-bass.mp3');
+      kick.play();
+      break;
+
+
+    default: console.log(key);
+
+  }
+}
+
+
+function buttonAnimation(currentKey) {
+
+  var activeButton = document.querySelector("." + currentKey);
+
+  activeButton.classList.add("pressed");
+
+  setTimeout(function() {
+    activeButton.classList.remove("pressed");
+  }, 100);
+
+}
diff --git a/35-Drumkit-Game/sounds/crash.mp3 b/35-Drumkit-Game/sounds/crash.mp3
diff --git a/35-Drumkit-Game/sounds/kick-bass.mp3 b/35-Drumkit-Game/sounds/kick-bass.mp3
diff --git a/35-Drumkit-Game/sounds/snare.mp3 b/35-Drumkit-Game/sounds/snare.mp3
diff --git a/35-Drumkit-Game/sounds/tom-1.mp3 b/35-Drumkit-Game/sounds/tom-1.mp3
diff --git a/35-Drumkit-Game/sounds/tom-2.mp3 b/35-Drumkit-Game/sounds/tom-2.mp3
diff --git a/35-Drumkit-Game/sounds/tom-3.mp3 b/35-Drumkit-Game/sounds/tom-3.mp3
diff --git a/35-Drumkit-Game/sounds/tom-4.mp3 b/35-Drumkit-Game/sounds/tom-4.mp3