unit converter

This code provides two converters: Length Converter and Temperature Converter. You can add more converters by following a similar structure. The conversion logic is handled in JavaScript using the js-quantities library. The converted result is displayed below each converter. Feel free to customize the styling and add more conversion options as per your requirements. elements, and a random

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Units Converter</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f2f2f2;

      margin: 0;

      padding: 20px;

    }

    

    h1 {

      text-align: center;

      color: #333;

    }

    

    .converter {

      background-color: #fff;

      border-radius: 8px;

      padding: 20px;

      margin-bottom: 20px;

    }

    

    .input-group {

      display: flex;

      margin-bottom: 10px;

    }

    

    .input-group label {

      flex: 1;

    }

    

    .input-group input {

      flex: 2;

      padding: 5px;

      border-radius: 4px;

      border: 1px solid #ccc;

    }

    

    .btn-convert {

      background-color: #4caf50;

      color: #fff;

      border: none;

      padding: 10px 20px;

      border-radius: 4px;

      cursor: pointer;

    }

    

    .result {

      text-align: center;

      font-size: 24px;

      margin-top: 10px;

      color: #333;

    }

  </style>

</head>

<body>

  <h1>Units Converter</h1>

  

  <div class="converter">

    <h2>Length Converter</h2>

    <div class="input-group">

      <label>Value:</label>

      <input type="text" id="lengthValue">

    </div>

    <div class="input-group">

      <label>From:</label>

      <select id="lengthFrom">

        <option value="m">Meter (m)</option>

        <option value="ft">Foot (ft)</option>

        <option value="in">Inch (in)</option>

        <option value="cm">Centimeter (cm)</option>

      </select>

    </div>

    <div class="input-group">

      <label>To:</label>

      <select id="lengthTo">

        <option value="m">Meter (m)</option>

        <option value="ft">Foot (ft)</option>

        <option value="in">Inch (in)</option>

        <option value="cm">Centimeter (cm)</option>

      </select>

    </div>

    <button class="btn-convert" onclick="convertLength()">Convert</button>

    <div class="result" id="lengthResult"></div>

  </div>

  

  <div class="converter">

    <h2>Temperature Converter</h2>

    <div class="input-group">

      <label>Value:</label>

      <input type="text" id="tempValue">

    </div>

    <div class="input-group">

      <label>From:</label>

      <select id="tempFrom">

        <option value="C">Celsius (°C)</option>

        <option value="F">Fahrenheit (°F)</option>

        <option value="K">Kelvin (K)</option>

      </select>

    </div>

    <div class="input-group">

      <label>To:</label>

      <select id="tempTo">

        <option value="C">Celsius (°C)</option>

        <option value="F">Fahrenheit (°F)</option>

        <option value="K">Kelvin (K)</option>

      </select>

    </div>

    <button class="btn-convert" onclick="convertTemperature()">Convert</button>

    <div class="result" id="tempResult"></div>

  </div>

  

  <script src="https://unpkg.com/js-quantities@1.4.0"></script>

  <script>

    function convertLength() {

      const value = document.getElementById('lengthValue').value;

      const fromUnit = document.getElementById('lengthFrom').value;

      const toUnit = document.getElementById('lengthTo').value;

      

      const quantity = Qty(value + ' ' + fromUnit);

      const converted = quantity.to(toUnit);

      

      document.getElementById('lengthResult').innerHTML = converted.toString();

    }

    

    function convertTemperature() {

      const value = document.getElementById('tempValue').value;

      const fromUnit = document.getElementById('tempFrom').value;

      const toUnit = document.getElementById('tempTo').value;

      

      const quantity = Qty(value + ' ' + fromUnit);

      const converted = quantity.to(toUnit);

      

      document.getElementById('tempResult').innerHTML = converted.toString();

    }

  </script>

</body>

</html>