Skip to content

Commit 3863908

Browse files
PBJIPBJI
authored
Merge pull request #953 from vinay-s36/master
Unit converter project
2 parents 3119687 + 9c36190 commit 3863908

File tree

5 files changed

+195
-0
lines changed

5 files changed

+195
-0
lines changed

‎UnitConverter/vinay-s36/READme.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
### Summary
2+
A unit converter is a handy utility that simplifies the process of converting values from one unit of measurement to another. It provides a user-friendly interface for individuals or professionals to make quick and accurate conversions, saving time and preventing errors.
3+
4+
### Live Project Link- https://vinay-s36.github.io/Unit-Converter/
5+
6+
### Screenshots
7+
![Screenshot 2023-10-15 172755](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/4870214f-9a9f-4349-989c-0ab82ef654f4)
8+
9+
![Screenshot 2023-10-15 172730](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/fed41360-f38f-4aff-a5cf-45c7eebee360)
10+
11+
![Screenshot 2023-10-15 172746](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/cc2bbf13-c6a9-41e7-860f-78f4f3744c44)
12+
13+
![Screenshot 2023-10-15 172721](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/35156f8c-ded3-4504-b40d-2865c4e740d2)
14+
15+
### Let me know if there are any issues 😁
16+
17+
### Happy Coding All

‎UnitConverter/vinay-s36/icon.png‎

36.8 KB
Loading

‎UnitConverter/vinay-s36/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Unit Converter</title>
5+
<link rel="stylesheet" type="text/css" href="style.css" />
6+
<link rel="icon" type="image/x-icon" href="icon.png" />
7+
</head>
8+
<body>
9+
<header>
10+
<h1>Unit Converter</h1>
11+
</header>
12+
<div class="container">
13+
<form id="conversionForm">
14+
<input type="number" id="valueInput" placeholder="Enter value" /><br />
15+
<span>From:</span>
16+
<select id="fromUnit">
17+
<option>Select</option>
18+
<option value="meters">Meters</option>
19+
<option value="kilometers">Kilometers</option>
20+
<option value="centimeters">Centimeters</option>
21+
<option value="millimeters">Millimeters</option>
22+
<option value="feet">Feet</option>
23+
<option value="celsius">Celsius</option>
24+
<option value="fahrenheit">Fahrenheit</option>
25+
<option value="kelvin">Kelvin</option></select
26+
><br />
27+
<span>To:</span>
28+
<select id="toUnit">
29+
<option>Select</option>
30+
<option value="meters">Meters</option>
31+
<option value="kilometers">Kilometers</option>
32+
<option value="centimeters">Centimeters</option>
33+
<option value="millimeters">Millimeters</option>
34+
<option value="feet">Feet</option>
35+
<option value="celsius">Celsius</option>
36+
<option value="fahrenheit">Fahrenheit</option>
37+
<option value="kelvin">Kelvin</option></select
38+
><br />
39+
<button type="button" id="convertButton">Convert</button>
40+
</form>
41+
<div id="result"></div>
42+
</div>
43+
<script src="script.js"></script>
44+
</body>
45+
</html>

‎UnitConverter/vinay-s36/script.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
function convertUnits() {
2+
const input = parseFloat(document.getElementById("valueInput").value);
3+
const fromUnit = document.getElementById("fromUnit").value;
4+
const toUnit = document.getElementById("toUnit").value;
5+
console.log(fromUnit)
6+
let result = 0;
7+
let key=0;
8+
// Conversion factors
9+
const conversionFactors = {
10+
meters: {
11+
feet: 3.28084,
12+
kilometers: 0.001,
13+
millimeters: 1000,
14+
centimeters: 100,
15+
},
16+
feet: {
17+
meters: 0.3048,
18+
kilometers: 0.0003048,
19+
millimeters: 304.8,
20+
centimeters: 30.48,
21+
},
22+
kilometers: {
23+
meters: 1000,
24+
feet: 3280.84,
25+
millimeters: 1000000,
26+
centimeters: 100000,
27+
},
28+
millimeters: {
29+
meters: 0.001,
30+
feet: 0.00328084,
31+
kilometers: 0.000001,
32+
centimeters: 0.1,
33+
},
34+
centimeters: {
35+
meters: 0.01,
36+
feet: 0.0328084,
37+
kilometers: 0.00001,
38+
millimeters: 10,
39+
},
40+
celsius: {
41+
fahrenheit: (input * 9) / 5 + 32,
42+
kelvin: input + 273.15,
43+
},
44+
fahrenheit: {
45+
celsius: ((input - 32) * 5) / 9,
46+
kelvin: (((input - 32) * 5) / 9) + 273.15,
47+
},
48+
kelvin: {
49+
celsius: input - 273.15,
50+
fahrenheit: ((input - 273.15) * 9) / 5 + 32,
51+
},
52+
};
53+
54+
if (fromUnit === toUnit) {
55+
result = input;
56+
} else if (conversionFactors[fromUnit] && conversionFactors[fromUnit][toUnit]) {
57+
result = input * conversionFactors[fromUnit][toUnit];
58+
} else if (conversionFactors[toUnit] && conversionFactors[toUnit][fromUnit]) {
59+
result = input / conversionFactors[toUnit][fromUnit];
60+
}else{
61+
key=-1
62+
}
63+
64+
if(key==-1){
65+
document.getElementById("result").innerHTML='Invalid inputs';
66+
}else{
67+
document.getElementById("result").innerHTML = `${input} ${fromUnit} = ${result.toFixed(2)} ${toUnit}`;
68+
}
69+
}
70+
document.getElementById("convertButton").addEventListener("click", convertUnits);

‎UnitConverter/vinay-s36/style.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f5f5f5;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
header {
9+
background-color: #333;
10+
color: #fff;
11+
text-align: center;
12+
padding: 20px;
13+
}
14+
15+
h1{
16+
margin: 0;
17+
}
18+
19+
.container{
20+
max-width: 400px;
21+
height:max-content;
22+
margin: 8% auto;
23+
padding: 20px;
24+
background-color: #fff;
25+
border: 1px solid #ccc;
26+
border-radius: 8px;
27+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
28+
}
29+
form {
30+
display: flex;
31+
flex-direction: column;
32+
}
33+
34+
input,
35+
select,
36+
button {
37+
margin: 5px 0;
38+
padding: 10px;
39+
border-radius: 10px;
40+
font-size: larger;
41+
}
42+
43+
button {
44+
background-color: #333;
45+
color: #fff;
46+
border: none;
47+
padding: 10px;
48+
cursor: pointer;
49+
}
50+
51+
button:hover {
52+
background-color: #555;
53+
}
54+
55+
#result {
56+
margin-top: 20px;
57+
font-size: larger;
58+
text-align: center;
59+
}
60+
61+
span{
62+
font-size: larger;
63+
}

0 commit comments

Comments
 (0)