acesdit · Tejas-Santosh-Nalawade · Oct 19, 2025 · Oct 19, 2025 · Oct 19, 2025
diff --git a/Domains/Frontend/MiniProjects/BMICalculator/README.md b/Domains/Frontend/MiniProjects/BMICalculator/README.md
@@ -0,0 +1,58 @@
+# 🏋️‍♂️ BMI Calculator
+
+**Contributor:** [Sanjeev Deori](https://github.com/SanjeevDeori)
+
+## 🧾 Description
+A **simple and responsive BMI Calculator** web app that allows users to calculate their Body Mass Index (BMI) based on weight and height. The app provides instant health feedback with animated results and supports dark/light mode.
+
+---
+
+## 🚀 Features
+- Input fields for **weight (kg)** and **height (cm)**
+- Calculate BMI on button click
+- Display **BMI value** and **health category**
+  - Underweight
+  - Normal
+  - Overweight
+  - Obese
+- Responsive design for mobile and desktop
+
+---
+
+## 💡 Bonus Features
+- Dark/Light mode toggle
+- Animated feedback when displaying BMI result
+
+---
+
+## 🧩 Tech Stack
+- **HTML5** – Structure and layout  
+- **CSS3** – Styling, responsiveness, dark/light theme  
+- **JavaScript (Vanilla)** – BMI calculation, animations, theme toggle  
+
+---
+
+## 🕹️ How to Use
+1. Open `index.html` in your browser.  
+2. Enter your **weight (kg)** and **height (cm)**.  
+3. Click **Calculate BMI**.  
+4. View your BMI value and category with animated feedback.  
+5. Toggle **Dark/Light mode** using the checkbox in the header.
+
+---
+
+## 📸 Screenshots
+*(Add screenshots or GIFs here to showcase the UI, BMI calculation, and dark/light mode.)*
+
+---
+
+## 🏗️ Setup & Run Locally
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/SanjeevDeori/bmi-calculator.git
+2. Navigate to the project folder:
+```bash
+cd bmi-calculator
+
+
+3. Open index.html in your browser.
diff --git a/Domains/Frontend/MiniProjects/BMICalculator/index.html b/Domains/Frontend/MiniProjects/BMICalculator/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BMI Calculator</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main class="container">
+    <header class="header">
+      <h1>BMI Calculator</h1>
+      <label class="theme-toggle">
+        <input type="checkbox" id="themeToggle">
+        <span>Dark Mode</span>
+      </label>
+    </header>
+
+    <section class="calculator card">
+      <div class="input-group">
+        <label for="weight">Weight (kg)</label>
+        <input type="number" id="weight" placeholder="e.g., 70">
+      </div>
+
+      <div class="input-group">
+        <label for="height">Height (cm)</label>
+        <input type="number" id="height" placeholder="e.g., 170">
+      </div>
+
+      <button id="calculateBtn" class="btn primary">Calculate BMI</button>
+
+      <div id="result" class="result">
+        <p>Your BMI: <span id="bmiValue">—</span></p>
+        <p>Category: <span id="bmiCategory">—</span></p>
+      </div>
+    </section>
+
+    <footer class="footer">
+      <small>Built with ❤️ • HTML • CSS • JavaScript</small>
+    </footer>
+  </main>
+
+  <script src="script.js" defer></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/BMICalculator/script.js b/Domains/Frontend/MiniProjects/BMICalculator/script.js
@@ -0,0 +1,58 @@
+// script.js
+
+const weightInput = document.getElementById("weight");
+const heightInput = document.getElementById("height");
+const calculateBtn = document.getElementById("calculateBtn");
+const bmiValue = document.getElementById("bmiValue");
+const bmiCategory = document.getElementById("bmiCategory");
+const resultDiv = document.getElementById("result");
+const themeToggle = document.getElementById("themeToggle");
+
+// Dark/Light mode
+function initTheme() {
+  const saved = localStorage.getItem("bmi_theme");
+  if(saved==="dark") document.body.classList.add("dark"), themeToggle.checked=true;
+}
+initTheme();
+
+themeToggle.addEventListener("change", () => {
+  if(themeToggle.checked){
+    document.body.classList.add("dark");
+    localStorage.setItem("bmi_theme","dark");
+  }else{
+    document.body.classList.remove("dark");
+    localStorage.setItem("bmi_theme","light");
+  }
+});
+
+// BMI Calculation
+function calculateBMI(){
+  const weight = parseFloat(weightInput.value);
+  const heightCm = parseFloat(heightInput.value);
+  if(!weight || !heightCm){
+    alert("Please enter valid weight and height");
+    return;
+  }
+
+  const heightM = heightCm / 100;
+  const bmi = weight / (heightM * heightM);
+  const roundedBMI = bmi.toFixed(1);
+  bmiValue.textContent = roundedBMI;
+
+  let category = "";
+  let color = "";
+
+  if(bmi<18.5){category="Underweight"; color="#ffd86b";}
+  else if(bmi<25){category="Normal"; color="#7cf59b";}
+  else if(bmi<30){category="Overweight"; color="#ffb86b";}
+  else{category="Obese"; color="#ff5f5f";}
+
+  bmiCategory.textContent = category;
+  resultDiv.style.color = color;
+
+  // Simple animation
+  resultDiv.style.transform="scale(1.1)";
+  setTimeout(()=>resultDiv.style.transform="scale(1)",300);
+}
+
+calculateBtn.addEventListener("click", calculateBMI);
diff --git a/Domains/Frontend/MiniProjects/BMICalculator/styles.css b/Domains/Frontend/MiniProjects/BMICalculator/styles.css
@@ -0,0 +1,109 @@
+:root {
+  --bg: #f4f7fb;
+  --card: #ffffff;
+  --text: #17202a;
+  --muted: #536170;
+  --accent: #0066ff;
+  --radius: 12px;
+  --danger: #e64c65;
+  --success: #3ae374;
+}
+
+*{box-sizing:border-box;}
+body{
+  margin:0;
+  font-family:Inter, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  display:flex;
+  justify-content:center;
+  align-items:flex-start;
+  min-height:100vh;
+  padding:20px;
+  transition: background 0.3s, color 0.3s;
+}
+
+.container{
+  max-width: 400px;
+  width:100%;
+}
+
+.header{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  margin-bottom:16px;
+}
+
+.header h1{margin:0;font-size:1.6rem;}
+.theme-toggle{display:flex;align-items:center;gap:8px;font-size:0.9rem;}
+.theme-toggle input{width:18px;height:18px;}
+
+.card{
+  background: var(--card);
+  padding:20px;
+  border-radius:var(--radius);
+  box-shadow:0 6px 18px rgba(23,32,42,0.06);
+}
+
+.input-group{
+  display:flex;
+  flex-direction:column;
+  margin-bottom:12px;
+}
+
+.input-group label{
+  font-size:0.9rem;
+  margin-bottom:4px;
+}
+
+.input-group input{
+  padding:10px;
+  font-size:1rem;
+  border-radius:8px;
+  border:1px solid #e6eef7;
+}
+
+.btn{
+  width:100%;
+  padding:10px;
+  border:0;
+  border-radius:8px;
+  cursor:pointer;
+  font-weight:600;
+  margin-top:8px;
+}
+
+.btn.primary{
+  background: linear-gradient(90deg, var(--accent), #3aa1ff);
+  color:white;
+}
+
+.result{
+  margin-top:16px;
+  text-align:center;
+  font-weight:600;
+  font-size:1rem;
+  transition: transform 0.3s, color 0.3s;
+}
+
+.footer{
+  text-align:center;
+  margin-top:12px;
+  color: var(--muted);
+  font-size:0.85rem;
+}
+
+/* Dark mode */
+body.dark{
+  --bg:#0f1720;
+  --card:#0b1220;
+  --text:#e6eef8;
+  --muted:#a8b3c3;
+}
+
+body.dark .input-group input{
+  background:#071427;
+  color:var(--text);
+  border:1px solid #0f2436;
+}
diff --git a/Domains/Frontend/MiniProjects/RandomPasswordGenrator/README.md b/Domains/Frontend/MiniProjects/RandomPasswordGenrator/README.md
@@ -0,0 +1,65 @@
+# 🔐 Secure Password Generator
+
+**Contributor:** [Sanjeev Deori](https://github.com/SanjeevDeori)
+
+## 🧾 Description
+A **secure and customizable password generator** web app that helps users create strong passwords for online accounts. Includes options for password length, character types, live strength estimation, and the ability to save passwords locally.
+
+---
+
+## 🚀 Features
+- Generate passwords of user-defined length
+- Include options for:
+  - Uppercase letters (A–Z)
+  - Lowercase letters (a–z)
+  - Numbers (0–9)
+  - Symbols (!@#$%^&*)
+- Copy password to clipboard
+- Display password strength visually
+- Save generated passwords locally
+- Responsive layout for desktop and mobile
+
+---
+
+## 💡 Bonus Features
+- Dark/Light mode toggle
+- Save passwords with custom labels
+- Manage saved passwords: Copy, Use, Delete
+- LocalStorage-backed saved password list
+
+---
+
+## 🧩 Tech Stack
+- **HTML5** – Structure and layout  
+- **CSS3** – Styling, responsiveness, and dark/light theme  
+- **JavaScript (Vanilla)** – Password generation logic, clipboard functionality, localStorage  
+
+---
+
+## 🕹️ How to Use
+1. Open `index.html` in your browser.  
+2. Select the desired password length and character options.  
+3. Click **Generate** to create a new password.  
+4. Use the **Copy** button to copy it to the clipboard.  
+5. Optionally, save the password with a label using the **Save** button.  
+6. View, use, or delete saved passwords in the saved passwords section.  
+
+---
+
+## 📸 Screenshots
+*(Add screenshots or GIFs here to showcase the UI, dark/light mode, and saved passwords feature.)*
+
+---
+
+## 🏗️ Setup & Run Locally
+1. Clone the repository:  
+   ```bash
+   git clone https://github.com/SanjeevDeori/password-generator.git
+
+2. Open the project folder:
+```bash
+
+cd password-generator
+
+
+3. Open index.html in your browser to use the app.