diff --git a/BMICalculator/jadhav-kunal/index.html b/BMICalculator/jadhav-kunal/index.html index 4fa0cf868..50294ec90 100644 --- a/BMICalculator/jadhav-kunal/index.html +++ b/BMICalculator/jadhav-kunal/index.html @@ -5,28 +5,99 @@ + + + BMI Calculator +
-

BMI Calculator

-
-

-

-

- -
-
-

BMI Weight Guide

-

Under Weight = Less than 18.6

-

Normal Range = 18.6 and 24.9

-

Overweight = Greater than 24.9

-
-
+
+
+

BMI Calculator

+

Calculate your Body Mass Index

+
+ +
+
+ +
+ + +
+
+ +
+ +
+ + cm +
+
+ +
+ +
+ + kg +
+
+ + +
+ + + +
+

BMI Categories

+
+
+
+
+ Underweight + < 18.5 +
+
+
+
+
+ Normal + 18.5 - 24.9 +
+
+
+
+
+ Overweight + 25 - 29.9 +
+
+
+
+
+ Obese + ≥ 30 +
+
+
+
+
+ - diff --git a/BMICalculator/jadhav-kunal/script.js b/BMICalculator/jadhav-kunal/script.js index 3be336519..82814a6c6 100644 --- a/BMICalculator/jadhav-kunal/script.js +++ b/BMICalculator/jadhav-kunal/script.js @@ -1,59 +1,232 @@ -const form = document.querySelector('form'); -const units = document.querySelector('#units'); +const form = document.querySelector('#bmi-form'); +const unitButtons = document.querySelectorAll('.unit-btn'); const heightLabel = document.querySelector('#height-label'); const weightLabel = document.querySelector('#weight-label'); -const height = document.querySelector('#height'); -const weight = document.querySelector('#weight'); +const heightInput = document.querySelector('#height'); +const weightInput = document.querySelector('#weight'); +const heightUnit = document.querySelector('#height-unit'); +const weightUnit = document.querySelector('#weight-unit'); +const resultsDiv = document.querySelector('#results'); +const bmiNumber = document.querySelector('#bmi-number'); +const categoryText = document.querySelector('#category-text'); +const bmiRange = document.querySelector('#bmi-range'); +let currentUnit = 'metric'; -form.addEventListener('submit', function(e){ - e.preventDefault(); - const formData = new FormData(e.target); - const inputValues = Object.fromEntries(formData); - let height = +inputValues.height; - let weight = +inputValues.weight; - const results = document.querySelector('#results'); - if(units.value === "Imperial") { - height = height * 2.54; - weight = weight * 0.453592; - console.log(units.value) - } - if((height === '') || (height < 0) || (isNaN(height))){ - //NaN !== NaN - results.innerHTML = "Please provide a valid height"; +// Unit toggle functionality +unitButtons.forEach(btn => { + btn.addEventListener('click', function() { + // Remove active class from all buttons + unitButtons.forEach(b => b.classList.remove('active')); + // Add active class to clicked button + this.classList.add('active'); + + currentUnit = this.dataset.unit; + updateLabels(); - } else if (weight === '' || weight < 0 || isNaN(weight)){ - results.innerHTML = "Please provide a valid weight"; + // Convert values if they exist + if (heightInput.value || weightInput.value) { + convertValues(); + } + }); +}); + +function updateLabels() { + if (currentUnit === 'imperial') { + heightLabel.textContent = 'Height (in)'; + weightLabel.textContent = 'Weight (lb)'; + heightUnit.textContent = 'in'; + weightUnit.textContent = 'lb'; } else { - //calculate BMI - const bmi = (weight / ((height*height)/10000)).toFixed(2); - //display the results - results.innerHTML = `${bmi}` - } + heightLabel.textContent = 'Height (cm)'; + weightLabel.textContent = 'Weight (kg)'; + heightUnit.textContent = 'cm'; + weightUnit.textContent = 'kg'; + } +} + +function convertValues() { + if (currentUnit === 'imperial') { + // Convert from metric to imperial + if (heightInput.value) { + heightInput.value = (parseFloat(heightInput.value) / 2.54).toFixed(2); + } + if (weightInput.value) { + weightInput.value = (parseFloat(weightInput.value) / 0.453592).toFixed(2); + } + } else { + // Convert from imperial to metric + if (heightInput.value) { + heightInput.value = (parseFloat(heightInput.value) * 2.54).toFixed(2); + } + if (weightInput.value) { + weightInput.value = (parseFloat(weightInput.value) * 0.453592).toFixed(2); + } + } +} + +function getBMICategory(bmi) { + if (bmi < 18.5) { + return { + category: 'underweight', + text: 'Underweight', + range: 'Below 18.5' + }; + } else if (bmi >= 18.5 && bmi < 25) { + return { + category: 'normal', + text: 'Normal Weight', + range: '18.5 - 24.9' + }; + } else if (bmi >= 25 && bmi < 30) { + return { + category: 'overweight', + text: 'Overweight', + range: '25 - 29.9' + }; + } else { + return { + category: 'obese', + text: 'Obese', + range: '30 and above' + }; + } +} + +function displayResults(bmi) { + const categoryInfo = getBMICategory(bmi); + + // Remove all category classes + resultsDiv.classList.remove('underweight', 'normal', 'overweight', 'obese'); + // Add the appropriate category class + resultsDiv.classList.add(categoryInfo.category); + + // Animate BMI number + animateValue(bmiNumber, 0, bmi, 1000); + + // Update category text and range + categoryText.textContent = categoryInfo.text; + bmiRange.textContent = `BMI Range: ${categoryInfo.range}`; + + // Show results + resultsDiv.classList.remove('hidden'); + + // Scroll to results smoothly + resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); +} + +function animateValue(element, start, end, duration) { + let startTimestamp = null; + const step = (timestamp) => { + if (!startTimestamp) startTimestamp = timestamp; + const progress = Math.min((timestamp - startTimestamp) / duration, 1); + const current = progress * (end - start) + start; + element.textContent = current.toFixed(1); + if (progress < 1) { + window.requestAnimationFrame(step); + } else { + element.textContent = end.toFixed(1); + } + }; + window.requestAnimationFrame(step); +} + +form.addEventListener('submit', function(e) { + e.preventDefault(); + + let height = parseFloat(heightInput.value); + let weight = parseFloat(weightInput.value); + + // Validation + if (!height || height <= 0 || isNaN(height)) { + showError('Please enter a valid height'); + heightInput.focus(); + return; + } + + if (!weight || weight <= 0 || isNaN(weight)) { + showError('Please enter a valid weight'); + weightInput.focus(); + return; + } + + // Convert to metric if imperial + if (currentUnit === 'imperial') { + height = height * 2.54; // inches to cm + weight = weight * 0.453592; // pounds to kg + } + + // Validate converted values + if (height < 50 || height > 300) { + showError('Height should be between 50cm and 300cm (or equivalent)'); + return; + } + + if (weight < 10 || weight > 500) { + showError('Weight should be between 10kg and 500kg (or equivalent)'); + return; + } + + // Calculate BMI: weight (kg) / height (m)² + // Height is in cm, so we divide by 100 to get meters + const heightInMeters = height / 100; + const bmi = weight / (heightInMeters * heightInMeters); + + // Display results + displayResults(bmi); }); +function showError(message) { + // Remove any existing error styling + heightInput.style.borderColor = ''; + weightInput.style.borderColor = ''; + + // Show error message (you could add a toast notification here) + alert(message); + + // Add error styling to inputs + if (!heightInput.value || heightInput.value <= 0) { + heightInput.style.borderColor = '#ff6b6b'; + } + if (!weightInput.value || weightInput.value <= 0) { + weightInput.style.borderColor = '#ff6b6b'; + } + + // Remove error styling after 3 seconds + setTimeout(() => { + heightInput.style.borderColor = ''; + weightInput.style.borderColor = ''; + }, 3000); +} -// Allow user to change between metric and imperial. -units.addEventListener('change', (e) => { - if(e.target.value === 'Imperial') { - heightLabel.textContent = "Height in IN: " - weightLabel.textContent = "Weight in LB: " +// Add input validation on blur +heightInput.addEventListener('blur', function() { + const value = parseFloat(this.value); + if (this.value && (value <= 0 || isNaN(value))) { + this.style.borderColor = '#ff6b6b'; + } else { + this.style.borderColor = ''; + } +}); - if(height.value){ - // convert current input to imperial - height.value = (+height.value / 2.54).toFixed(2); - weight.value = (+weight.value / 0.453592).toFixed(2); +weightInput.addEventListener('blur', function() { + const value = parseFloat(this.value); + if (this.value && (value <= 0 || isNaN(value))) { + this.style.borderColor = '#ff6b6b'; + } else { + this.style.borderColor = ''; } - } else { - heightLabel.textContent = "Height in CM: " - weightLabel.textContent = "Weight in KG: " +}); - if(height.value){ - // convert current input to metric - height.value = (+height.value * 2.54).toFixed(2); - weight.value = (+weight.value * 0.453592).toFixed(2); +// Allow Enter key to submit +heightInput.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + weightInput.focus(); } - } - +}); -} ) \ No newline at end of file +weightInput.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + form.dispatchEvent(new Event('submit')); + } +}); diff --git a/BMICalculator/jadhav-kunal/style.css b/BMICalculator/jadhav-kunal/style.css index 70ebd890d..44ade10b7 100644 --- a/BMICalculator/jadhav-kunal/style.css +++ b/BMICalculator/jadhav-kunal/style.css @@ -1,57 +1,464 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%); + --danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); + --card-bg: rgba(255, 255, 255, 0.95); + --text-primary: #2d3748; + --text-secondary: #718096; + --border-color: #e2e8f0; + --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); + --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2); +} + +body { + font-family: 'Poppins', sans-serif; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + position: relative; + overflow-x: hidden; +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--primary-gradient); + z-index: -1; + animation: gradientShift 15s ease infinite; + background-size: 200% 200%; +} + +@keyframes gradientShift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + .container { - width: 375px; - /* height: 525px; */ - min-height: fit-content; - margin-left: 350px; - margin-top: 65px; - background-color: yellow; - padding-left: 30px; - padding-bottom: 30px; + width: 100%; + max-width: 500px; + z-index: 1; +} + +.calculator-card { + background: var(--card-bg); + border-radius: 24px; + padding: 40px; + box-shadow: var(--shadow-xl); + backdrop-filter: blur(10px); + animation: slideUp 0.6s ease-out; +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.header { + text-align: center; + margin-bottom: 35px; +} + +.header h1 { + font-size: 32px; + font-weight: 700; + background: var(--primary-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 8px; +} + +.subtitle { + color: var(--text-secondary); + font-size: 14px; + font-weight: 400; +} + +.form-group { + margin-bottom: 25px; } -.units { - width: 100%; - +.form-label { + display: block; + font-size: 14px; + font-weight: 500; + color: var(--text-primary); + margin-bottom: 12px; } -#units { - width: 150px; - height: 25px; +.unit-toggle { + display: flex; + gap: 10px; + background: #f7fafc; + padding: 4px; + border-radius: 12px; +} +.unit-btn { + flex: 1; + padding: 12px 20px; + border: none; + background: transparent; + border-radius: 8px; + font-family: 'Poppins', sans-serif; + font-size: 14px; + font-weight: 500; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.3s ease; } +.unit-btn.active { + background: white; + color: var(--text-primary); + box-shadow: var(--shadow-sm); +} + +.unit-btn:hover:not(.active) { + color: var(--text-primary); +} + +.input-group { + margin-bottom: 25px; +} + +.input-label { + display: block; + font-size: 14px; + font-weight: 500; + color: var(--text-primary); + margin-bottom: 10px; +} -#height, #weight { - width: 150px; - height: 25px; +.input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.input-wrapper input { + width: 100%; + padding: 16px 80px 16px 20px; + border: 2px solid var(--border-color); + border-radius: 12px; + font-family: 'Poppins', sans-serif; + font-size: 16px; + color: var(--text-primary); + background: white; + transition: all 0.3s ease; +} + +.input-wrapper input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + +.input-wrapper input::placeholder { + color: #cbd5e0; +} + +.input-unit { + position: absolute; + right: 20px; + font-size: 14px; + font-weight: 500; + color: var(--text-secondary); + pointer-events: none; +} + +.calculate-btn { + width: 100%; + padding: 16px 24px; + background: var(--primary-gradient); + border: none; + border-radius: 12px; + color: white; + font-family: 'Poppins', sans-serif; + font-size: 16px; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + transition: all 0.3s ease; + box-shadow: var(--shadow-md); + margin-top: 10px; +} + +.calculate-btn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.calculate-btn:active { + transform: translateY(0); +} + +.calculate-btn svg { + transition: transform 0.3s ease; +} + +.calculate-btn:hover svg { + transform: translateX(4px); +} + +.results { margin-top: 30px; + padding: 30px; + border-radius: 16px; + text-align: center; + animation: fadeIn 0.5s ease-out; + transition: all 0.3s ease; +} + +.results.hidden { + display: none; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.bmi-value { + display: flex; + align-items: baseline; + justify-content: center; + gap: 10px; + margin-bottom: 15px; +} + +.bmi-number { + font-size: 48px; + font-weight: 700; + line-height: 1; +} + +.bmi-label { + font-size: 20px; + font-weight: 500; + color: var(--text-secondary); +} + +.bmi-category { + margin-bottom: 10px; +} + +.bmi-category span { + display: inline-block; + padding: 8px 20px; + border-radius: 20px; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.bmi-range { + font-size: 14px; + color: var(--text-secondary); +} + +/* BMI Category Colors */ +.results.underweight { + background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%); +} + +.results.underweight .bmi-number { + color: #4facfe; +} + +.results.underweight .bmi-category span { + background: var(--success-gradient); + color: white; +} + +.results.normal { + background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); } -#weight-guide{ - margin-left: 75px; - margin-top: 25px; +.results.normal .bmi-number { + color: #667eea; } -#results{ - font-size: 35px; - margin-left: 90px; - margin-top: 20px; - color: blue; +.results.normal .bmi-category span { + background: var(--primary-gradient); + color: white; } -button{ - width: 150px; - height: 35px; - margin-left: 90px; - margin-top: 25px; - border-radius: 5px; - border-style: none; - background-color: blue; - color: #fff; - font-size: 25px; +.results.overweight { + background: linear-gradient(135deg, rgba(250, 112, 154, 0.1) 0%, rgba(254, 225, 64, 0.1) 100%); } -h1{ - padding-left: 15px; - padding-top: 25px; +.results.overweight .bmi-number { + color: #fa709a; +} + +.results.overweight .bmi-category span { + background: var(--warning-gradient); + color: white; +} + +.results.obese { + background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(238, 90, 111, 0.1) 100%); +} + +.results.obese .bmi-number { + color: #ff6b6b; +} + +.results.obese .bmi-category span { + background: var(--danger-gradient); + color: white; +} + +.weight-guide { + margin-top: 35px; + padding-top: 30px; + border-top: 2px solid var(--border-color); +} + +.weight-guide h3 { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 20px; + text-align: center; +} + +.guide-items { + display: flex; + flex-direction: column; + gap: 12px; +} + +.guide-item { + display: flex; + align-items: center; + gap: 15px; + padding: 12px; + border-radius: 10px; + background: #f7fafc; + transition: all 0.3s ease; +} + +.guide-item:hover { + background: #edf2f7; + transform: translateX(5px); +} + +.guide-color { + width: 40px; + height: 40px; + border-radius: 10px; + flex-shrink: 0; +} + +.guide-item.underweight .guide-color { + background: var(--success-gradient); +} + +.guide-item.normal .guide-color { + background: var(--primary-gradient); +} + +.guide-item.overweight .guide-color { + background: var(--warning-gradient); +} + +.guide-item.obese .guide-color { + background: var(--danger-gradient); +} + +.guide-text { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +} + +.guide-label { + font-size: 14px; + font-weight: 600; + color: var(--text-primary); +} + +.guide-range { + font-size: 12px; + color: var(--text-secondary); +} + +/* Responsive Design */ +@media (max-width: 600px) { + .calculator-card { + padding: 30px 20px; + } + + .header h1 { + font-size: 28px; + } + + .bmi-number { + font-size: 40px; + } + + .results { + padding: 25px 20px; + } +} + +@media (max-width: 400px) { + .calculator-card { + padding: 25px 15px; + } + + .header h1 { + font-size: 24px; + } + + .input-wrapper input { + padding: 14px 70px 14px 16px; + font-size: 14px; + } + + .input-unit { + right: 16px; + font-size: 12px; + } }