devmalik7 · devmalik7 · Oct 31, 2025 · Oct 31, 2025 · Oct 31, 2025 · Oct 31, 2025
diff --git a/Javascript/Bmi calculator/README.md b/Javascript/Bmi calculator/README.md
@@ -0,0 +1,65 @@
+# BMI Calculator
+
+A simple and interactive web-based Body Mass Index (BMI) calculator that allows users to calculate their BMI by entering their height and weight.
+
+## Features
+
+- Calculate BMI based on height (in cm) and weight (in kg)
+- Real-time validation of input values
+- BMI category classification:
+  - Underweight: Less than 18.5
+  - Normal weight: 18.6 - 24.9
+  - Overweight: 25 - 29.9
+  - Obese: Greater than 29.9
+- User-friendly interface with clear visual feedback
+- Weight guide reference displayed on the page
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- JavaScript (Vanilla JS)
+
+## Project Structure
+
+```
+Bmi calculator/
+├── index.html    # Main HTML structure
+├── script.js     # JavaScript logic for BMI calculation
+├── style.css     # Styling and layout
+└── README.md     # Project documentation
+```
+
+## How to Use
+
+1. Open `index.html` in your web browser
+2. Enter your height in centimeters (cm)
+3. Enter your weight in kilograms (kg)
+4. Click the "Calculate" button
+5. View your BMI result and corresponding category
+
+## BMI Formula
+
+BMI is calculated using the formula:
+```
+BMI = weight (kg) / (height (m))²
+```
+
+The calculator converts height from centimeters to meters by dividing by 10000 (since height² in cm² needs to be converted to m²).
+
+## Getting Started
+
+Simply clone or download this repository and open `index.html` in any modern web browser. No additional setup or dependencies are required.
+
+## Browser Compatibility
+
+This project works on all modern web browsers including:
+- Google Chrome
+- Mozilla Firefox
+- Microsoft Edge
+- Safari
+
+## License
+
+This project is open source and available for educational purposes.
+
diff --git a/Javascript/Bmi calculator/index.html b/Javascript/Bmi calculator/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <title>BMI Calculator</title>
+  </head>
+  <body>
+    <nav>
+      <a href="/" aria-current="page">Home</a>
+      <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
+        >Youtube channel</a
+      >
+    </nav>
+    <div class="container">
+      <h1>BMI Calculator</h1>
+      <form>
+        <p><label>Height in CM: </label><input type="text" id="height" /></p>
+        <p><label>Weight in KG: </label><input type="text" id="weight" /></p>
+        <button>Calculate</button>
+        <div id="results"></div>
+        <div id="weight-guide">
+          <h3>BMI Weight Guide</h3>
+          <p>Under Weight = Less than 18.6</p>
+          <p>Normal Range = 18.6 and 24.9</p>
+          <p>Overweight = Greater than 24.9</p>
+        </div>
+      </form>
+    </div>
+  </body>
+  <script src="script.js"></script>
+</html>
diff --git a/Javascript/Bmi calculator/script.js b/Javascript/Bmi calculator/script.js
@@ -0,0 +1,32 @@
+const form = document.querySelector('form');
+
+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 (isNaN(height) || height <= 0) {
+    results.innerHTML = "Please give a valid Height";
+  } else if (isNaN(weight) || weight <= 0) {
+    results.innerHTML = "Please give a valid Weight";
+  } else {
+    const bmi = (weight/((height*height)/10000)).toFixed(2);
+    let message ="";
+    if(bmi<18.5){
+        message="you'r are Underweight"
+    }
+    else if(bmi>=18.6 && bmi <=24.9){
+        message="you'r have Normal weight"
+    }
+    else if(bmi >= 25 && bmi <= 29.9){
+        message="you'r are overweight"
+    }
+    else{
+        message ="you'r are obese"
+    }
+    //showing the results
+    results.innerHTML = `<span>Your BMI is ${bmi}. ${message}</span>`;
+  }
+});
diff --git a/Javascript/Bmi calculator/style.css b/Javascript/Bmi calculator/style.css
@@ -0,0 +1,47 @@
+.container {
+    width: 575px;
+    height: 825px;
+
+    background-color: #797978;
+    padding-left: 30px;
+  }
+  #height,
+  #weight {
+    width: 150px;
+    height: 25px;
+    margin-top: 30px;
+  }
+
+  #weight-guide {
+    margin-left: 75px;
+    margin-top: 25px;
+  }
+
+  #results {
+    font-size: 35px;
+    margin-left: 90px;
+    margin-top: 20px;
+    color: rgb(241, 241, 241);
+  }
+
+  button {
+    width: 150px;
+    height: 35px;
+    margin-left: 90px;
+    margin-top: 25px;
+    background-color: #fff;
+    padding: 1px 30px;
+    border-radius: 8px;
+    color: #212121;
+    text-decoration: none;
+    border: 2px solid #212121;
+
+    font-size: 25px;
+  }
+
+  h1 {
+    padding-left: 15px;
+    padding-top: 25px;
+
+  }
+
diff --git a/Javascript/To-do-app/images/checked.png b/Javascript/To-do-app/images/checked.png
diff --git a/Javascript/To-do-app/images/icon.png b/Javascript/To-do-app/images/icon.png
diff --git a/Javascript/To-do-app/images/unchecked.png b/Javascript/To-do-app/images/unchecked.png
diff --git a/Javascript/To-do-app/index.html b/Javascript/To-do-app/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/Javascript/To-do-app/script.js b/Javascript/To-do-app/script.js
diff --git a/Javascript/To-do-app/styles.css b/Javascript/To-do-app/styles.css
diff --git a/Javascript/flip a coin/README.md b/Javascript/flip a coin/README.md
@@ -0,0 +1,43 @@
+# Flip a Coin Simulator
+
+A web-based coin flip simulator inspired by Google's coin flip feature. Flip a virtual coin with smooth 3D animations and get random heads or tails results.
+
+## Features
+
+- 🎲 **Random coin flips** - Fair 50/50 chance for heads or tails
+- 🎨 **Smooth 3D animations** - Beautiful spinning coin effect with CSS 3D transforms
+- ⌨️ **Keyboard support** - Press Space or Enter to flip
+- ♿ **Accessibility** - Supports reduced motion preferences and proper ARIA labels
+- 📱 **Responsive design** - Works on desktop and mobile devices
+- 🎯 **Simple interface** - Clean, modern UI with dark theme
+
+## How to Use
+
+1. Open `index.html` in any modern web browser
+2. Click the "Flip" button or press Space/Enter to flip the coin
+3. Watch the coin spin and see the result (Heads or Tails)
+
+## Files
+
+- `index.html` - Main HTML structure
+- `style.css` - Styling and animations
+- `script.js` - Flip logic and interactions
+
+## Browser Compatibility
+
+Works in all modern browsers that support:
+- CSS 3D Transforms
+- Web Animations API (with fallback to CSS transitions)
+- ES6 JavaScript
+
+## Technical Details
+
+- Uses CSS `transform-style: preserve-3d` for 3D coin effect
+- Implements both Web Animations API and CSS transition fallback
+- Respects `prefers-reduced-motion` media query for accessibility
+- Fair random selection using `Math.random()`
+
+## License
+
+Free to use and modify.
+
diff --git a/Javascript/flip a coin/index.html b/Javascript/flip a coin/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Flip a coin</title>
+    <meta name="description" content="Flip a coin simulator like Google">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <main class="app" role="main">
+        <h1 class="title">Flip a coin</h1>
+
+        <section class="stage" aria-label="Coin flip area">
+            <div id="coin" class="coin" aria-hidden="true">
+                <div class="face heads" data-label="Heads">Heads</div>
+                <div class="face tails" data-label="Tails">Tails</div>
+            </div>
+        </section>
+
+        <div class="controls">
+            <button id="flipBtn" class="btn" type="button" aria-label="Flip the coin">Flip</button>
+        </div>
+
+        <p id="result" class="result" aria-live="polite" aria-atomic="true">Tap Flip to start</p>
+    </main>
+
+    <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/Javascript/flip a coin/script.js b/Javascript/flip a coin/script.js
@@ -0,0 +1,115 @@
+(() => {
+  const coin = document.getElementById('coin');
+  const flipBtn = document.getElementById('flipBtn');
+  const resultEl = document.getElementById('result');
+
+  let isFlipping = false;
+  let currentAngle = 0; // 0 => heads shown; 180 => tails shown (mod 360)
+
+  function getTargetAngle(face) {
+    return face === 'heads' ? 0 : 180;
+  }
+
+  function chooseRandomFace() {
+    return Math.random() < 0.5 ? 'heads' : 'tails';
+  }
+
+  function setImmediateFace(face) {
+    currentAngle = getTargetAngle(face);
+    coin.style.transform = `rotateY(${currentAngle}deg)`;
+    coin.classList.toggle('show-heads', face === 'heads');
+    coin.classList.toggle('show-tails', face === 'tails');
+    coin.classList.remove('spinning');
+  }
+
+  function announce(face) {
+    resultEl.textContent = face === 'heads' ? 'Heads' : 'Tails';
+  }
+
+  function flip(targetFace) {
+    if (isFlipping) return;
+    isFlipping = true;
+    flipBtn.disabled = true;
+
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const target = targetFace || chooseRandomFace();
+
+    if (prefersReduced) {
+      setImmediateFace(target);
+      announce(target);
+      isFlipping = false;
+      flipBtn.disabled = false;
+      return;
+    }
+
+    const targetAngle = getTargetAngle(target);
+    // Add multiple full spins for flair
+    const fullSpins = 6; // even number so facing side logic is preserved cleanly
+    const start = currentAngle;
+    const end = start + fullSpins * 180 + (targetAngle - (start % 360));
+
+    const duration = 900; // ms
+    const supportsWAAPI = typeof coin.animate === 'function';
+
+    // During the spin, allow both faces to be visible to avoid popping
+    coin.classList.remove('show-heads', 'show-tails');
+    coin.classList.add('spinning');
+
+    if (supportsWAAPI) {
+      coin.animate(
+        [
+          { transform: `rotateY(${start}deg)` },
+          { transform: `rotateY(${end}deg)` }
+        ],
+        {
+          duration,
+          easing: 'cubic-bezier(.22,.61,.36,1)',
+          fill: 'forwards'
+        }
+      ).addEventListener('finish', () => {
+        currentAngle = ((end % 360) + 360) % 360;
+        // Snap to exact final state to avoid subpixel drift
+        coin.style.transform = `rotateY(${currentAngle}deg)`;
+        coin.classList.toggle('show-heads', target === 'heads');
+        coin.classList.toggle('show-tails', target === 'tails');
+        coin.classList.remove('spinning');
+        announce(target);
+        isFlipping = false;
+        flipBtn.disabled = false;
+      });
+    } else {
+      // Fallback: use CSS transition defined on .coin
+      // Set starting transform explicitly to ensure transition runs from the right place
+      coin.style.transform = `rotateY(${start}deg)`;
+      // Next frame, set to end to trigger transition
+      requestAnimationFrame(() => {
+        coin.style.transform = `rotateY(${end}deg)`;
+      });
+      window.setTimeout(() => {
+        currentAngle = ((end % 360) + 360) % 360;
+        coin.style.transform = `rotateY(${currentAngle}deg)`;
+        coin.classList.toggle('show-heads', target === 'heads');
+        coin.classList.toggle('show-tails', target === 'tails');
+        coin.classList.remove('spinning');
+        announce(target);
+        isFlipping = false;
+        flipBtn.disabled = false;
+      }, duration);
+    }
+  }
+
+  flipBtn.addEventListener('click', () => flip());
+
+  // Keyboard: Space/Enter to flip
+  document.addEventListener('keydown', (e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      flip();
+    }
+  });
+
+  // Initialize with a fair random face so UI doesn’t feel static
+  setImmediateFace(chooseRandomFace());
+})();
+
+