Skip to content

Commit 4917065

Browse files
Tejas-Santosh-NalawadeTejas-Santosh-Nalawade
authored
Merge pull request #26 from SanjeevDeori/BMICalculator
BMI calculator
2 parents ae02db2 + b139b7d commit 4917065

8 files changed

Lines changed: 811 additions & 0 deletions

File tree

‎Domains/Frontend/MiniProjects/BMICalculator/README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# 🏋️‍♂️ BMI Calculator
2+
3+
**Contributor:** [Sanjeev Deori](https://github.com/SanjeevDeori)
4+
5+
## 🧾 Description
6+
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.
7+
8+
---
9+
10+
## 🚀 Features
11+
- Input fields for **weight (kg)** and **height (cm)**
12+
- Calculate BMI on button click
13+
- Display **BMI value** and **health category**
14+
- Underweight
15+
- Normal
16+
- Overweight
17+
- Obese
18+
- Responsive design for mobile and desktop
19+
20+
---
21+
22+
## 💡 Bonus Features
23+
- Dark/Light mode toggle
24+
- Animated feedback when displaying BMI result
25+
26+
---
27+
28+
## 🧩 Tech Stack
29+
- **HTML5** – Structure and layout
30+
- **CSS3** – Styling, responsiveness, dark/light theme
31+
- **JavaScript (Vanilla)** – BMI calculation, animations, theme toggle
32+
33+
---
34+
35+
## 🕹️ How to Use
36+
1. Open `index.html` in your browser.
37+
2. Enter your **weight (kg)** and **height (cm)**.
38+
3. Click **Calculate BMI**.
39+
4. View your BMI value and category with animated feedback.
40+
5. Toggle **Dark/Light mode** using the checkbox in the header.
41+
42+
---
43+
44+
## 📸 Screenshots
45+
*(Add screenshots or GIFs here to showcase the UI, BMI calculation, and dark/light mode.)*
46+
47+
---
48+
49+
## 🏗️ Setup & Run Locally
50+
1. Clone the repository:
51+
```bash
52+
git clone https://github.com/SanjeevDeori/bmi-calculator.git
53+
2. Navigate to the project folder:
54+
```bash
55+
cd bmi-calculator
56+
57+
58+
3. Open index.html in your browser.

‎Domains/Frontend/MiniProjects/BMICalculator/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>BMI Calculator</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<main class="container">
11+
<header class="header">
12+
<h1>BMI Calculator</h1>
13+
<label class="theme-toggle">
14+
<input type="checkbox" id="themeToggle">
15+
<span>Dark Mode</span>
16+
</label>
17+
</header>
18+
19+
<section class="calculator card">
20+
<div class="input-group">
21+
<label for="weight">Weight (kg)</label>
22+
<input type="number" id="weight" placeholder="e.g., 70">
23+
</div>
24+
25+
<div class="input-group">
26+
<label for="height">Height (cm)</label>
27+
<input type="number" id="height" placeholder="e.g., 170">
28+
</div>
29+
30+
<button id="calculateBtn" class="btn primary">Calculate BMI</button>
31+
32+
<div id="result" class="result">
33+
<p>Your BMI: <span id="bmiValue">—</span></p>
34+
<p>Category: <span id="bmiCategory">—</span></p>
35+
</div>
36+
</section>
37+
38+
<footer class="footer">
39+
<small>Built with ❤️ • HTML • CSS • JavaScript</small>
40+
</footer>
41+
</main>
42+
43+
<script src="script.js" defer></script>
44+
</body>
45+
</html>

‎Domains/Frontend/MiniProjects/BMICalculator/script.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// script.js
2+
3+
const weightInput = document.getElementById("weight");
4+
const heightInput = document.getElementById("height");
5+
const calculateBtn = document.getElementById("calculateBtn");
6+
const bmiValue = document.getElementById("bmiValue");
7+
const bmiCategory = document.getElementById("bmiCategory");
8+
const resultDiv = document.getElementById("result");
9+
const themeToggle = document.getElementById("themeToggle");
10+
11+
// Dark/Light mode
12+
function initTheme() {
13+
const saved = localStorage.getItem("bmi_theme");
14+
if(saved==="dark") document.body.classList.add("dark"), themeToggle.checked=true;
15+
}
16+
initTheme();
17+
18+
themeToggle.addEventListener("change", () => {
19+
if(themeToggle.checked){
20+
document.body.classList.add("dark");
21+
localStorage.setItem("bmi_theme","dark");
22+
}else{
23+
document.body.classList.remove("dark");
24+
localStorage.setItem("bmi_theme","light");
25+
}
26+
});
27+
28+
// BMI Calculation
29+
function calculateBMI(){
30+
const weight = parseFloat(weightInput.value);
31+
const heightCm = parseFloat(heightInput.value);
32+
if(!weight || !heightCm){
33+
alert("Please enter valid weight and height");
34+
return;
35+
}
36+
37+
const heightM = heightCm / 100;
38+
const bmi = weight / (heightM * heightM);
39+
const roundedBMI = bmi.toFixed(1);
40+
bmiValue.textContent = roundedBMI;
41+
42+
let category = "";
43+
let color = "";
44+
45+
if(bmi<18.5){category="Underweight"; color="#ffd86b";}
46+
else if(bmi<25){category="Normal"; color="#7cf59b";}
47+
else if(bmi<30){category="Overweight"; color="#ffb86b";}
48+
else{category="Obese"; color="#ff5f5f";}
49+
50+
bmiCategory.textContent = category;
51+
resultDiv.style.color = color;
52+
53+
// Simple animation
54+
resultDiv.style.transform="scale(1.1)";
55+
setTimeout(()=>resultDiv.style.transform="scale(1)",300);
56+
}
57+
58+
calculateBtn.addEventListener("click", calculateBMI);

‎Domains/Frontend/MiniProjects/BMICalculator/styles.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
:root {
2+
--bg: #f4f7fb;
3+
--card: #ffffff;
4+
--text: #17202a;
5+
--muted: #536170;
6+
--accent: #0066ff;
7+
--radius: 12px;
8+
--danger: #e64c65;
9+
--success: #3ae374;
10+
}
11+
12+
*{box-sizing:border-box;}
13+
body{
14+
margin:0;
15+
font-family:Inter, sans-serif;
16+
background: var(--bg);
17+
color: var(--text);
18+
display:flex;
19+
justify-content:center;
20+
align-items:flex-start;
21+
min-height:100vh;
22+
padding:20px;
23+
transition: background 0.3s, color 0.3s;
24+
}
25+
26+
.container{
27+
max-width: 400px;
28+
width:100%;
29+
}
30+
31+
.header{
32+
display:flex;
33+
justify-content:space-between;
34+
align-items:center;
35+
margin-bottom:16px;
36+
}
37+
38+
.header h1{margin:0;font-size:1.6rem;}
39+
.theme-toggle{display:flex;align-items:center;gap:8px;font-size:0.9rem;}
40+
.theme-toggle input{width:18px;height:18px;}
41+
42+
.card{
43+
background: var(--card);
44+
padding:20px;
45+
border-radius:var(--radius);
46+
box-shadow:0 6px 18px rgba(23,32,42,0.06);
47+
}
48+
49+
.input-group{
50+
display:flex;
51+
flex-direction:column;
52+
margin-bottom:12px;
53+
}
54+
55+
.input-group label{
56+
font-size:0.9rem;
57+
margin-bottom:4px;
58+
}
59+
60+
.input-group input{
61+
padding:10px;
62+
font-size:1rem;
63+
border-radius:8px;
64+
border:1px solid #e6eef7;
65+
}
66+
67+
.btn{
68+
width:100%;
69+
padding:10px;
70+
border:0;
71+
border-radius:8px;
72+
cursor:pointer;
73+
font-weight:600;
74+
margin-top:8px;
75+
}
76+
77+
.btn.primary{
78+
background: linear-gradient(90deg, var(--accent), #3aa1ff);
79+
color:white;
80+
}
81+
82+
.result{
83+
margin-top:16px;
84+
text-align:center;
85+
font-weight:600;
86+
font-size:1rem;
87+
transition: transform 0.3s, color 0.3s;
88+
}
89+
90+
.footer{
91+
text-align:center;
92+
margin-top:12px;
93+
color: var(--muted);
94+
font-size:0.85rem;
95+
}
96+
97+
/* Dark mode */
98+
body.dark{
99+
--bg:#0f1720;
100+
--card:#0b1220;
101+
--text:#e6eef8;
102+
--muted:#a8b3c3;
103+
}
104+
105+
body.dark .input-group input{
106+
background:#071427;
107+
color:var(--text);
108+
border:1px solid #0f2436;
109+
}

‎Domains/Frontend/MiniProjects/RandomPasswordGenrator/README.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# 🔐 Secure Password Generator
2+
3+
**Contributor:** [Sanjeev Deori](https://github.com/SanjeevDeori)
4+
5+
## 🧾 Description
6+
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.
7+
8+
---
9+
10+
## 🚀 Features
11+
- Generate passwords of user-defined length
12+
- Include options for:
13+
- Uppercase letters (A–Z)
14+
- Lowercase letters (a–z)
15+
- Numbers (0–9)
16+
- Symbols (!@#$%^&*)
17+
- Copy password to clipboard
18+
- Display password strength visually
19+
- Save generated passwords locally
20+
- Responsive layout for desktop and mobile
21+
22+
---
23+
24+
## 💡 Bonus Features
25+
- Dark/Light mode toggle
26+
- Save passwords with custom labels
27+
- Manage saved passwords: Copy, Use, Delete
28+
- LocalStorage-backed saved password list
29+
30+
---
31+
32+
## 🧩 Tech Stack
33+
- **HTML5** – Structure and layout
34+
- **CSS3** – Styling, responsiveness, and dark/light theme
35+
- **JavaScript (Vanilla)** – Password generation logic, clipboard functionality, localStorage
36+
37+
---
38+
39+
## 🕹️ How to Use
40+
1. Open `index.html` in your browser.
41+
2. Select the desired password length and character options.
42+
3. Click **Generate** to create a new password.
43+
4. Use the **Copy** button to copy it to the clipboard.
44+
5. Optionally, save the password with a label using the **Save** button.
45+
6. View, use, or delete saved passwords in the saved passwords section.
46+
47+
---
48+
49+
## 📸 Screenshots
50+
*(Add screenshots or GIFs here to showcase the UI, dark/light mode, and saved passwords feature.)*
51+
52+
---
53+
54+
## 🏗️ Setup & Run Locally
55+
1. Clone the repository:
56+
```bash
57+
git clone https://github.com/SanjeevDeori/password-generator.git
58+
59+
2. Open the project folder:
60+
```bash
61+
62+
cd password-generator
63+
64+
65+
3. Open index.html in your browser to use the app.

0 commit comments

Comments
 (0)