/* General Styles */
body {
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
line-height: 1.6;
}

h1, h2 {
text-align: center;
color: #007BFF;
}

h1 {
margin-top: 20px;
font-size: 2.5rem;
}

h2 {
font-size: 1.8rem;
margin-top: 30px;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.converter {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}

.converter label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.converter input,
.converter select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.converter button {
display: block;
width: 100%;
padding: 10px;
background: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.converter button:hover {
background: #0056b3;
}

.result {
margin-top: 10px;
font-weight: bold;
color: #007BFF;
}

/* Responsive Design */
@media (max-width: 600px) {
h1 {
font-size: 2rem;
}

h2 {
font-size: 1.5rem;
}

.container {
padding: 10px;
}
}

// Length Converter
function convertLength() {
const value = parseFloat(document.getElementById(‘lengthValue’).value);
const from = document.getElementById(‘lengthFrom’).value;
const to = document.getElementById(‘lengthTo’).value;
let result;

const conversions = {
meters: { feet: 3.28084, inches: 39.3701, centimeters: 100 },
feet: { meters: 0.3048, inches: 12, centimeters: 30.48 },
inches: { meters: 0.0254, feet: 0.0833333, centimeters: 2.54 },
centimeters: { meters: 0.01, feet: 0.0328084, inches: 0.393701 },
};

if (from === to) {
result = value;
} else {
result = value * conversions[from][to];
}

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

// Weight Converter
function convertWeight() {
const value = parseFloat(document.getElementById(‘weightValue’).value);
const from = document.getElementById(‘weightFrom’).value;
const to = document.getElementById(‘weightTo’).value;
let result;

const conversions = {
kilograms: { pounds: 2.20462, ounces: 35.274, grams: 1000 },
pounds: { kilograms: 0.453592, ounces: 16, grams: 453.592 },
ounces: { kilograms: 0.0283495, pounds: 0.0625, grams: 28.3495 },
grams: { kilograms: 0.001, pounds: 0.00220462, ounces: 0.035274 },
};

if (from === to) {
result = value;
} else {
result = value * conversions[from][to];
}

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

// Temperature Converter
function convertTemperature() {
const value = parseFloat(document.getElementById(‘tempValue’).value);
const from = document.getElementById(‘tempFrom’).value;
const to = document.getElementById(‘tempTo’).value;
let result;

if (from === to) {
result = value;
} else if (from === ‘celsius’ && to === ‘fahrenheit’) {
result = (value * 9/5) + 32;
} else if (from === ‘fahrenheit’ && to === ‘celsius’) {
result = (value – 32) * 5/9;
} else if (from === ‘celsius’ && to === ‘kelvin’) {
result = value + 273.15;
} else if (from === ‘kelvin’ && to === ‘celsius’) {
result = value – 273.15;
} else if (from === ‘fahrenheit’ && to === ‘kelvin’) {
result = (value – 32) * 5/9 + 273.15;
} else if (from === ‘kelvin’ && to === ‘fahrenheit’) {
result = (value – 273.15) * 9/5 + 32;
}

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

// Volume Converter
function convertVolume() {
const value = parseFloat(document.getElementById(‘volumeValue’).value);
const from = document.getElementById(‘volumeFrom’).value;
const to = document.getElementById(‘volumeTo’).value;
let result;

const conversions = {
liters: { gallons: 0.264172, milliliters: 1000, cubicMeters: 0.001 },
gallons: { liters: 3.78541, milliliters: 3785.41, cubicMeters: 0.00378541 },
milliliters: { liters: 0.001, gallons: 0.000264172, cubicMeters: 0.000001 },
cubicMeters: { liters: 1000, gallons: 264.172, milliliters: 1000000 },
};

if (from === to) {
result = value;
} else {
result = value * conversions[from][to];
}

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

// Area Converter
function convertArea() {
const value = parseFloat(document.getElementById(‘areaValue’).value);
const from = document.getElementById(‘areaFrom’).value;
const to = document.getElementById(‘areaTo’).value;
let result;

const conversions = {
squareMeters: { squareFeet: 10.7639, acres: 0.000247105, hectares: 0.0001 },
squareFeet: { squareMeters: 0.092903, acres: 0.0000229568, hectares: 0.0000092903 },
acres: { squareMeters: 4046.86, squareFeet: 43560, hectares: 0.404686 },
hectares: { squareMeters: 10000, squareFeet: 107639, acres: 2.47105 },
};

if (from === to) {
result = value;
} else {
result = value * conversions[from][to];
}

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

// Speed Converter
function convertSpeed() {
const value = parseFloat(document.getElementById(‘speedValue’).value);
const from = document.getElementById(‘speedFrom’).value;
const to = document.getElementById(‘speedTo’).value;
let result;

const conversions = {
kmh: { mph: 0.621371, ms: 0.277778, knots: 0.539957 },
mph: { kmh: 1.60934, ms: 0.44704, knots: 0.868976 },
ms: { kmh: 3.6, mph: 2.23694, knots: 1.94384 },
knots: { kmh: 1.852, mph: 1.15078, ms: 0.514444 },
};

if (from === to) {
result = value;
} else {
result = value * conversions[from][to];
}

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

// Time Converter
function convertTime() {
const value = parseFloat(document.getElementById(‘timeValue’).value);
const from = document.getElementById(‘timeFrom’).value;
const to = document.getElementById(‘timeTo’).value;
let result;

const conversions = {
seconds: { minutes: 0.0166667, hours: 0.000277778, days: 0.0000115741 },
minutes: { seconds: 60, hours: 0.0166667, days: 0.000694444 },
hours: { seconds: 3600, minutes: 60, days: 0.0416667 },
days: { seconds: 86400, minutes: 1440, hours: 24 },
};

if (from === to) {
result = value;
} else {
result = value * conversions[from][to];
}

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