📏 Metric/Imperial Unit Converter

A simple and responsive web app to convert between metric and imperial units.
Built using HTML, CSS, and JavaScript.

---

✨ Features

• Convert between:
  • Length → meters ↔ feet
  • Volume → liters ↔ gallons
  • Mass → kilograms ↔ pounds
• Responsive layout that adapts to desktop, tablet, and mobile.
• Real-time conversion on button click.
• Clean, minimal UI with distinct sections for each type of conversion.

---

🚀 Demo

1. Enter a number into the input field.
2. Click the Convert button.
3. See the results instantly in all three categories: Length, Volume, and Mass.

---

🛠️ Tech Stack

• HTML → Structure
• CSS → Styling + Responsive Design
• JavaScript → Conversion logic

---

📂 Project Structure

├── index.html # Main app structure ├── index.css # Styling and responsiveness ├── index.js # Conversion logic

---

⚙️ Conversions Used

• 1 meter = 3.281 feet
• 1 liter = 0.264 gallon
• 1 kilogram = 2.204 pounds

---

📸 Preview

Hero section for input + conversion button, followed by three result cards for:

• Length (Meter/Feet)
• Volume (Liters/Gallons)
• Mass (Kilograms/Pounds)

---

📱 Responsiveness

• Desktop → Centered layout with wide cards.
• Tablet → Scales down input/button size.
• Mobile → Full-width cards and smaller text for readability.

---

▶️ How to Run

1. Clone this repo or download the files.
2. Open index.html in your browser.
3. Start converting units 🎉

---

📌 Future Improvements

• Add temperature conversions (°C ↔ °F ↔ K).
• Support live conversion as the user types.
• Add a dark/light mode toggle.

---

👨‍💻 Author

Built with ❤️ by Rayyan Khattak using HTML, CSS, and JavaScript.