Unit Converter Tool | सभी यूनिट बदलें एक क्लिक म

Unit Converter Tool | सभी यूनिट बदलें एक क्लिक में

Unit Converter Tool Kaise Banayein? (HTML, CSS, JS Full Tutorial)

Agar aap web development mein naye hain ya apne blog ke liye ek simple aur useful Unit Converter Tool banana chahte hain, to yeh post aapke लिए perfect hai. Aaj hum dekhenge ki kaise aap sirf ek HTML file mein ek fully functional unit converter add kar सकते हैं — bina kisi library ke.

✅ Yeh Tool Kya Karta Hai?

  • Kilometers ko Miles mein convert karta hai
  • Kilograms ko Pounds mein convert karta hai
  • Centimeters ko Inches mein convert karta hai
  • Ek hi file mein multiple conversions

🔧 Tool Banane Ke Steps:

  1. Ek nayi HTML file banaiye (e.g. unit-converter.html)
  2. Code ko copy-paste karke file mein save kariye
  3. Browser mein open karke tool ka use kariye

💻 Full HTML, CSS & JS Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Unit Converter Tool</title>
  <style>
    body { font-family: sans-serif; background: #fce4ec; padding: 20px; }
    .box {
      background: #fff;
      padding: 20px;
      max-width: 400px;
      margin: auto;
      border-radius: 10px;
      box-shadow: 0 0 10px #ccc;
    }
    input, select, button {
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      font-size: 16px;
    }
    h2 { color: #e91e63; }
  </style>
</head>
<body>

  <div class="box">
    <h2>Unit Converter</h2>
    <input type="number" id="inputValue" placeholder="Enter value">

    <select id="unitType" onchange="updateUnits()">
      <option value="length">Length (m <-> km)</option>
      <option value="weight">Weight (g <-> kg)</option>
      <option value="temperature">Temperature (°C <-> °F)</option>
    </select>

    <select id="fromUnit"></select>
    <select id="toUnit"></select>

    <button onclick="convert()">Convert</button>

    <p id="result"></p>
  </div>

  <script>
    const unitOptions = {
      length: ["Meter", "Kilometer"],
      weight: ["Gram", "Kilogram"],
      temperature: ["Celsius", "Fahrenheit"]
    };

    function updateUnits() {
      const type = document.getElementById("unitType").value;
      const from = document.getElementById("fromUnit");
      const to = document.getElementById("toUnit");

      from.innerHTML = "";
      to.innerHTML = "";

      unitOptions[type].forEach(unit => {
        from.innerHTML += `<option value="${unit}">${unit}</option>`;
        to.innerHTML += `<option value="${unit}">${unit}</option>`;
      });
    }

    function convert() {
      const val = parseFloat(document.getElementById("inputValue").value);
      const from = document.getElementById("fromUnit").value;
      const to = document.getElementById("toUnit").value;
      const type = document.getElementById("unitType").value;
      let result = "";

      if (type === "length") {
        if (from === to) result = val;
        else if (from === "Meter" && to === "Kilometer") result = val / 1000;
        else if (from === "Kilometer" && to === "Meter") result = val * 1000;
      }

      else if (type === "weight") {
        if (from === to) result = val;
        else if (from === "Gram" && to === "Kilogram") result = val / 1000;
        else if (from === "Kilogram" && to === "Gram") result = val * 1000;
      }

      else if (type === "temperature") {
        if (from === to) result = val;
        else if (from === "Celsius" && to === "Fahrenheit") result = (val * 9/5) + 32;
        else if (from === "Fahrenheit" && to === "Celsius") result = (val - 32) * 5/9;
      }

      document.getElementById("result").innerText = `Result: ${result.toFixed(2)} ${to}`;
    }

    updateUnits(); // initial call
  </script>

</body>
</html>

📌 Tips for Better Use:

  • Mobile responsive banane ke liye CSS media queries use karein
  • Dark mode toggle add karein advanced version ke liye
  • Blog me as embedded tool use karein (iframe ke through)

🎯 Kya Seekhne Ko Mila?

Aapne is tutorial mein sikha:

  • JavaScript se real-time unit conversion kaise hoti hai
  • Dropdown, input aur output logic ka use
  • User-friendly aur lightweight UI banana

🔚 Conclusion:

Unit Converter Tool ek bahut hi practical aur useful project hai jo beginners ko HTML, CSS aur JavaScript ka istemal sikhata hai. Aap ise as a learning project use kar sakte hain, ya apne blog ya utility site mein ek extra feature ke तौर पर add कर सकते हैं. Yeh SEO friendly bhi hai aur AdSense ke लिए बिलकुल safe है.

Agar aapko yeh post pasand aayi ho to niche comment jarur karein, aur naye tutorials ke लिए blog ko subscribe karna na bhoolein. 🚀