Unit Converter

HTML

CSS

JS

body {
  height: 100vh;
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.converter {
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 280px;
  box-sizing: border-box;
}
.converter h3 {
  margin: 0 0 12px;
  font-size: 18px;
  text-align: center;
  color: #1e293b;
}
.row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.row label {
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}
.converter select,
.converter input {
  flex: 1;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.converter button {
  width: 100%;
  padding: 7px;
  font-size: 16px;
  font-weight: bold;
  background: greenyellow;
  color: green;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.converter button:hover {
  background: green;
  color: white;
}
.result {
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
  color: #1e293b;
  background: #f9fafb;
  padding: 8px;
  border-radius: 6px;
  display: none;
}

const units = {
  length: ["meters", "feet", "inches"],
  weight: ["kilograms", "pounds"],
  temperature: ["Celsius", "Fahrenheit", "Kelvin"]
};
const conversions = {
  length: {
    meters: v => v,
    feet: v => v * 3.28084,
    inches: v => v * 39.3701
  },
  weight: {
    kilograms: v => v,
    pounds: v => v * 2.20462
  },
  temperature: {
    Celsius: v => v,
    Fahrenheit: v => (v * 9/5) + 32,
    Kelvin: v => v + 273.15
  }
};
const inverse = {
  length: {
    meters: v => v,
    feet: v => v / 3.28084,
    inches: v => v / 39.3701
  },
  weight: {
    kilograms: v => v,
    pounds: v => v / 2.20462
  },
  temperature: {
    Celsius: v => v,
    Fahrenheit: v => (v - 32) * 5/9,
    Kelvin: v => v - 273.15
  }
};
function updateUnits() {
  const type = document.getElementById("type").value;
  const from = document.getElementById("fromUnit");
  const to = document.getElementById("toUnit");
  from.innerHTML = "";
  to.innerHTML = "";
  units[type].forEach(u => {
    from.innerHTML += `<option value="${u}">${u}</option>`;
    to.innerHTML += `<option value="${u}">${u}</option>`;
  });
}
function convert() {
  const type = document.getElementById("type").value;
  const value = parseFloat(document.getElementById("inputValue").value);
  const from = document.getElementById("fromUnit").value;
  const to = document.getElementById("toUnit").value;
  const resultBox = document.getElementById("result");
  if (isNaN(value)) {
    resultBox.textContent = "Enter a valid number.";
    resultBox.style.display = "block";
    return;
  } 
  const inBase = inverse[type][from](value);
  const finalValue = conversions[type][to](inBase);
  resultBox.textContent = `${value} ${from} = ${finalValue.toFixed(2)} ${to}`;
  resultBox.style.display = "block";
}
updateUnits();

Ad #1

Ad #2