Skip to content

Commit f815860

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1447 from ranjanmangla1/unit-convertor-commit
added unit convertor Closes #1389
2 parents f00dcab + 3451fcd commit f815860

3 files changed

Lines changed: 200 additions & 0 deletions

File tree

‎Projects/Unit Convertor/index.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
margin: 0;
6+
background-color: #6943FF11;
7+
}
8+
9+
.main-container{
10+
width: 550px;
11+
height: 745px;
12+
background: #F4F4F4;
13+
}
14+
15+
h3{
16+
margin: 0;
17+
}
18+
19+
.h3{
20+
margin: 0;
21+
font-family: 'Inter', sans-serif;
22+
font-style: normal;
23+
font-weight: 800;
24+
font-size: 28px;
25+
line-height: 38px;
26+
padding-top: 32px;
27+
text-align: center;
28+
text-align: center;
29+
letter-spacing: -0.03em;
30+
color: #FFFFFF;
31+
}
32+
33+
.main-header{
34+
width: 550px;
35+
height: 285px;
36+
background: #6943FF;
37+
}
38+
39+
.group1{
40+
background: white;
41+
width: 500px;
42+
height: 108.57px;
43+
margin: 36px 25px 23px 25px;
44+
}
45+
46+
.group2{
47+
background: white;
48+
width: 500px;
49+
height: 108.57px;
50+
margin: 23px 25px 23px 25px;
51+
}
52+
53+
.group3{
54+
background: white;
55+
width: 500px;
56+
height: 108.57px;
57+
margin: 23px 25px 36px 25px;
58+
}
59+
60+
#input-text {
61+
62+
box-sizing: border-box;
63+
width: 200px;
64+
height: 83px;
65+
margin: 25px 177px 0 177px;
66+
border: 2px solid #B295FF;
67+
border-radius: 5px;
68+
background: #6943FF;
69+
font-family: 'Inter', sans-serif;
70+
font-style: normal;
71+
font-weight: 800;
72+
font-size: 67px;
73+
color: #FFFFFF;
74+
text-align: center;
75+
vertical-align: middle;
76+
77+
}
78+
79+
#convert-btn {
80+
width: 117px;
81+
height: 42px;
82+
margin-top:26px;
83+
margin-left: 218px;
84+
margin-right: 217px;
85+
background: #FFFFFF;
86+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
87+
border-radius: 5px;
88+
border: none;
89+
font-family: 'Inter',sans-serif;
90+
font-style: normal;
91+
font-weight: 500;
92+
font-size: 16px;
93+
line-height: 24px;
94+
color: #3D3D3D;
95+
}
96+
97+
h5{
98+
margin: 0;
99+
}
100+
101+
.heading-text{
102+
font-family: 'Inter';
103+
font-style: normal;
104+
font-weight: 600;
105+
font-size: 20px;
106+
line-height: 20px;
107+
text-align: center;
108+
color: #5A537B;
109+
padding-top: 31px;
110+
}
111+
112+
#supporting-text-1,#supporting-text-2,#supporting-text-3{
113+
font-family: 'Inter';
114+
font-style: normal;
115+
font-weight: 400;
116+
font-size: 14px;
117+
line-height: 20px;
118+
text-align: center;
119+
color: #353535;
120+
padding-top:9px;
121+
}

‎Projects/Unit Convertor/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html>
2+
<head>
3+
<link
4+
rel="stylesheet"
5+
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
6+
/>
7+
<link rel="stylesheet" href="index.css" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=Karla:wght@400;800&display=swap"
12+
rel="stylesheet"
13+
/>
14+
</head>
15+
<body>
16+
<div class="main-container">
17+
<div class="main-header">
18+
<h3 class="h3">Metric/Imperial Unit Conversion</h3>
19+
<!-- <div id="input"> -->
20+
<input type="text" id="input-text" value="20" maxlength="8" />
21+
<!-- 20</input> -->
22+
<!-- </div> -->
23+
<button id="convert-btn">Convert</button>
24+
</div>
25+
<div class="groups">
26+
<div class="group1">
27+
<h3 class="heading-text">Length (Meter/Feet)</h3>
28+
<h5 id="supporting-text-1">
29+
20 meters = 65.616 feet | 20 feet = 6.096 meters
30+
</h5>
31+
</div>
32+
<div class="group2">
33+
<h3 class="heading-text">Volume (Liters/Gallons)</h3>
34+
<h5 id="supporting-text-2">
35+
20 liters = 5.284 gallons | 20 gallons = 75.708 liters
36+
</h5>
37+
</div>
38+
<div class="group3">
39+
<h3 class="heading-text">Mass (Kilograms/Pounds)</h3>
40+
<h5 id="supporting-text-3">
41+
20 kilos = 44.092 pounds | 20 pounds = 9.072 kilos
42+
</h5>
43+
</div>
44+
</div>
45+
</div>
46+
<script src="index.js"></script>
47+
</body>
48+
</html>

‎Projects/Unit Convertor/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
1 meter = 3.281 feet
3+
1 liter = 0.264 gallon
4+
1 kilogram = 2.204 pound
5+
*/
6+
7+
const convertEl = document.querySelector("#convert-btn")
8+
const supText1 = document.querySelector("#supporting-text-1")
9+
const supText2 = document.querySelector("#supporting-text-2")
10+
const supText3 = document.querySelector("#supporting-text-3")
11+
let input = document.querySelector("#input-text")
12+
13+
convertEl.addEventListener("click", function () {
14+
supText1.innerHTML = `${Number(input.value)} meters = ${(Number(input.value) * 3.281).toFixed(3)} feet | ${Number(input.value)} feet = ${Number(Number(input.value) * 0.3048).toFixed(3)} meters`
15+
16+
supText2.innerHTML = `${Number(input.value)} liters = ${(Number(input.value) * 0.264).toFixed(3)} gallons | ${Number(input.value)} gallons = ${Number(Number(input.value) * 4.54609).toFixed(3)} liters`
17+
18+
supText3.innerHTML = `${Number(input.value)} kilos = ${(Number(input.value) * 2.204).toFixed(3)} pounds | ${Number(input.value)} pounds = ${Number(Number(input.value) * 0.453592).toFixed(3)} kilos`
19+
})
20+
21+
// input.addEventListener('keydown', function (event) {
22+
// const key = event.key; // const {key} = event; ES6+
23+
// if (key === "Backspace") {
24+
25+
// this.style.width = ((this.value.length - 1)) + 'ch';
26+
// this.style.margin - left = ((this.value.length - 1)) + 'ch';
27+
28+
// // alert(key);
29+
// // return false;
30+
// }
31+
// });

0 commit comments

Comments
 (0)