Scribd
Upload
9 views16 pages

HTML Unit Converter Tool

The document describes a unit converter app that allows converting between different temperature, area, weight, length and time units. The app contains inputs to enter values and select units to convert between.

Uploaded by

manishsamrat2905
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views16 pages

HTML Unit Converter Tool

The document describes a unit converter app that allows converting between different temperature, area, weight, length and time units. The app contains inputs to enter values and select units to convert between.

Uploaded by

manishsamrat2905
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>GFG Converter</title>
<link rel="stylesheet" href="./[Link]">
</head>

<body>
<div class="main">
<h1 class="title">GeeksforGeeks</h1>
<h2>Unit Converter using
HTML CSS and JavaScript
</h2>
<h5 class="subtitle">Select Category</h5>
<select id="conversionCategory"
class="select-category">
<option value="">
- Select -
</option>
<option value="temperature">
Temperature
</option>
<option value="area">
Area
</option>
<option value="weight">
Weight
</option>
<option value="length">
Length
</option>
<option value="time">
Time
</option>
</select>
<div class="container">
<div class="conversion"
id="temperature">
<h2 class="category-title">
Temperature
</h2>
<input type="number"
id="temperatureInput"
class="input"
placeholder="Enter value">
<select id="fromTemperatureUnit"
class="unit-select">
<option value="celsius">
Celsius
</option>
<option value="kelvin">
Kelvin
</option>
<option value="fahrenheit">
Fahrenheit
</option>
</select>
<span class="arrow"></span>
<select id="toTemperatureUnit"
class="unit-select">
<option value="celsius">
Celsius
</option>
<option value="kelvin">
Kelvin
</option>
<option value="fahrenheit">
Fahrenheit
</option>
</select>
<button id="temperatureConvertBtn"
class="convert-
button">
Convert
</button>
<div class="result">
<p id="temperatureResult">
Result will be
displayed here
</p>
</div>
</div>
<div class="conversion"
id="area">
<h2 class="category-title">
Area
</h2>
<input type="number"
id="areaInput"
class="input"
placeholder="Enter value">
<select id="fromAreaUnit"
class="unit-select">
<option value="sqMeter">
Square Meter
</option>
<option value="sqKilometer">
Square Kilometer
</option>
<!-- Add more area units here -->
</select>
<span class="arrow"></span>
<select id="toAreaUnit"
class="unit-select">
<option value="sqMeter">
Square Meter
</option>
<option value="sqKilometer">
Square Kilometer
</option>
</select>
<button id="areaConvertBtn"
class="convert-
button">
Convert
</button>
<div class="result">
<p id="areaResult">
Result will be
displayed here
</p>
</div>
</div>
<div class="conversion" id="weight">
<h2 class="category-title">
Weight
</h2>
<input type="number"
id="weightInput"
class="input"
placeholder="Enter value">
<select id="fromWeightUnit"
class="unit-select">
<option value="gram">
Gram
</option>
<option value="kilogram">
Kilogram
</option>
</select>
<span class="arrow"></span>
<select id="toWeightUnit"
class="unit-select">
<option value="gram">
Gram
</option>
<option value="kilogram">
Kilogram
</option>
</select>
<button id="weightConvertBtn"
class="convert-
button">
Convert
</button>
<div class="result">
<p id="weightResult">
Result will be
displayed here
</p>
</div>
</div>
<div class="conversion" id="length">
<h2 class="category-title">
Length
</h2>
<input type="number"
id="lengthInput"
class="input"
placeholder="Enter value">
<select id="fromLengthUnit"
class="unit-select">
<option value="meter">
Meter
</option>
<option value="kilometer">
Kilometer
</option>
</select>
<span class="arrow"></span>
<select id="toLengthUnit"
class="unit-select">
<option value="meter">
Meter
</option>
<option value="kilometer">
Kilometer
</option>
</select>
<button id="lengthConvertBtn"
class="convert-
button">
Convert
</button>
<div class="result">
<p id="lengthResult">
Result will be
displayed here
</p>
</div>
</div>
<div class="conversion" id="time">
<h2 class="category-title">
Time
</h2>
<input type="number"
id="timeInput"
class="input"
placeholder="Enter value">
<select id="fromTimeUnit"
class="unit-select">
<option value="second">
Second
</option>
<option value="minute">
Minute
</option>
</select>
<span class="arrow"></span>
<select id="toTimeUnit"
class="unit-select">
<option value="second">
Second
</option>
<option value="minute">
Minute
</option>
</select>
<button id="timeConvertBtn"
class="convert-
button">
Convert
</button>
<div class="result">
<p id="timeResult">
Result will be
displayed here
</p>
</div>
</div>
</div>
</div>
<script src="./[Link]"></script>
</body>

</html>
CSS
body {
background-image: linear-gradient(
#fff48c,
#b9a9fd
);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: "Arial", sans-serif;
overflow: hidden;
}
.main {
background: rgba(4, 0, 255, 0.1);
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 12px
rgba(0, 255, 128, 0.2);
backdrop-filter: blur(5px);
text-align: center;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.title {
font-size: 36px;
color: green;
}
.subtitle {
margin: 0;
font-size: 18px;
color: rgb(0, 0, 0);
}
.select-category,
.unit-select,
.input {
padding: 12px;
font-size: 16px;
border: none;
background: rgba(
255,
255,
255,
0.4
);
color: rgb(0, 0, 0);
border-radius: 10px;
}
.arrow {
font-size: 20px;
color: #3494e6;
}
.convert-button {
padding: 12px 24px;
font-size: 16px;
background: #f9a826;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s;
}
.convert-button:hover {
background: #ecd56e;
}
.result {
background: rgba(
255,
255,
255,
0.3
);
padding: 10px;
margin: 10px;
border-radius: 10px;
animation: fadeIn 0.5s ease-in-out;
}
.result p {
font-size: 18px;
color: rgb(0, 0, 0);
}
.conversion {
background: rgba(255, 0, 0, 0.3);
padding: 20px;
margin: 10px;
border-radius: 15px;
backdrop-filter: blur(5px);
transition: transform 0.3s,
box-shadow 0.3s;
animation: fadeIn 0.5s ease-in-out;
}
.conversion:hover {
transform: scale(1.03);
box-shadow: 0 10px 16px
rgba(0, 0, 0, 0.25);
}
Javascript
let inputforms =
[Link](
".conversion");
[Link](
(form) =>
([Link] = "none"));
let category = [Link](
"conversionCategory");
[Link](
"change",
function () {
let userInput = [Link];
[Link](
(form) =>
([Link] =
"none"));
[Link](
userInput)
.[Link] = "block";});
document
.getElementById(
"temperatureConvertBtn")
.addEventListener("click", tempFn);
document
.getElementById("areaConvertBtn")
.addEventListener("click", areaFn);
document
.getElementById("weightConvertBtn")
.addEventListener(
"click",
weightFn);
document
.getElementById("lengthConvertBtn")
.addEventListener(
"click",
lengthFn);
document
.getElementById("timeConvertBtn")
.addEventListener("click", timeFn);
function tempFn() {
let valInput = parseFloat(
[Link](
"temperatureInput"
).value);
let fromUnit =
[Link](
"fromTemperatureUnit").value;
let toUnit =
[Link](
"toTemperatureUnit").value;
let result;
if (fromUnit === "celsius" &&
toUnit === "fahrenheit") {
result =
(valInput * 9) / 5 + 32;}
else if (fromUnit === "celsius" &&
toUnit === "kelvin") {
result = valInput + 273.15;}
else if (fromUnit === "fahrenheit" &&
toUnit === "celsius") {
result =
((valInput - 32) * 5) / 9;}
else if (fromUnit === "fahrenheit" &&
toUnit === "kelvin") {
result =
((valInput - 32) * 5) / 9 +
273.15;}
else if (fromUnit === "kelvin" &&
toUnit === "celsius") {
result = valInput - 273.15;}
else if (fromUnit === "kelvin" &&
toUnit === "fahrenheit") {
result =
((valInput - 273.15) * 9) /
5 +
32;}
else {
result = valInput;}
[Link](
"temperatureResult"
).textContent = `Result: ${[Link](
2
)}`;}

function areaFn() {
let valInput = parseFloat(
[Link](
"areaInput"
).value);
let fromUnit =
[Link](
"fromAreaUnit").value;
let toUnit =
[Link](
"toAreaUnit").value;
let conversionFactors = {
sqMeter: 1,
sqKilometer: 0.000001,
sqCentimeter: 10000,
sqMillimeter: 1000000,
acre: 0.000247105,
hectare: 0.0001,
sqMile: 3.861e-7,
sqYard: 1.19599,
sqFoot: 10.7639,
sqInch: 1550.0031,};
let result =
valInput *
(conversionFactors[toUnit] /
conversionFactors[
fromUnit]);
[Link](
"areaResult")
.textContent = `Result: ${[Link](2
)} ${toUnit}`;}

function weightFn() {
let valInput = parseFloat(
[Link](
"weightInput").value);
let fromUnit =
[Link](
"fromWeightUnit").value;
let toUnit =
[Link](
"toWeightUnit").value;
let conversionFactors = {
gram: 1,
kilogram: 0.001,
milligram: 1000,
metricTon: 0.000001,
longTon: 0.000984207,
shortTon: 0.00110231,
pound: 0.00220462,
ounce: 0.03527396,
carat: 5,};
let result =
valInput *
(conversionFactors[toUnit] /
conversionFactors[
fromUnit]);
[Link](
"weightResult"
).textContent = `Result: ${[Link](2
)} ${toUnit}`;
}

function lengthFn() {
let valInput = parseFloat(
[Link](
"lengthInput"
).value);
let fromUnit =
[Link](
"fromLengthUnit").value;
let toUnit =
[Link](
"toLengthUnit").value;
let conversionFactors = {
meter: 1,
kilometer: 0.001,
centimeter: 100,
millimeter: 1000,
mile: 0.000621371,
yard: 1.09361,
foot: 3.28084,
inch: 39.3701,};
let result =
valInput *
(conversionFactors[toUnit] /
conversionFactors[
fromUnit]);
[Link](
"lengthResult")
.textContent = `Result:
${[Link](2)} ${toUnit}`;}

function timeFn() {
let valInput = parseFloat(
[Link](
"timeInput").value);
let fromUnit =
[Link](
"fromTimeUnit").value;
let toUnit =
[Link](
"toTimeUnit").value;
let conversionFactors = {
second: 1,
millisecond: 1000,
minute: 1 / 60,
hour: 1 / 3600,
day: 1 / 86400,
week: 1 / 604800,
month: 1 / 2628000,
year: 1 / 31536000,};
let result =
valInput *
(conversionFactors[toUnit] /
conversionFactors[
fromUnit]);
[Link](
"timeResult"
).textContent = `Result: ${[Link](
2
)} ${toUnit}`;
}

You might also like