Skip to content

Commit d943397

Browse files
SuvamPrasdSuvamPrasd
committed
Distance Converter
1 parent a9e4a94 commit d943397

File tree

3 files changed

+265
-0
lines changed

3 files changed

+265
-0
lines changed

‎Distance_converter/dist.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body{
2+
display: block;
3+
background-color: #eeeeee;
4+
padding: 30px;
5+
}
6+
.main{
7+
font-family: 'Courier New', Courier, monospace;
8+
font-style: normal;
9+
font-variant: normal;
10+
font-weight: bolder;
11+
text-align: center;
12+
margin-bottom: 40px;
13+
}
14+
.feetcss{
15+
display: inline-block;
16+
border-style: solid;
17+
background-color: #fc0303;
18+
padding-left: 10px;
19+
padding-right: 10px;
20+
}
21+
.metercss{
22+
display: inline-block;
23+
border-style: solid;
24+
background-color: #fca903;
25+
padding-left: 10px;
26+
padding-right: 10px;
27+
margin-left: 30px;
28+
29+
}
30+
.inchcss{
31+
display: inline-block;
32+
border-style: solid;
33+
background-color: #f8fc03;
34+
padding-left: 10px;
35+
padding-right: 10px;
36+
margin-left: 30px;
37+
38+
}
39+
.centicss{
40+
display: inline-block;
41+
border-style: solid;
42+
background-color: #41fc03;
43+
padding-left: 10px;
44+
padding-right: 10px;
45+
margin-left: 30px;
46+
}
47+
.yardcss{
48+
display: inline-block;
49+
border-style: solid;
50+
background-color: #03f4fc;
51+
padding-left: 10px;
52+
padding-right: 10px;
53+
margin-left: 0px;
54+
margin-top: 20px;
55+
}
56+
.kilocss{
57+
display: inline-block;
58+
border-style: solid;
59+
background-color: #85bcff;
60+
padding-left: 10px;
61+
padding-right: 10px;
62+
margin-left: 30px;
63+
}
64+
.milecss{
65+
display: inline-block;
66+
border-style: solid;
67+
background-color: #ff85ff;
68+
padding-left: 10px;
69+
padding-right: 10px;
70+
margin-left: 30px;
71+
}

‎Distance_converter/dist.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Distance Converter</title>
8+
<!--Script link-->
9+
<script src="dist.js" type="text/javascript"></script>
10+
<!--CSS link-->
11+
<link rel="stylesheet" type="text/css" href="dist.css">
12+
13+
</head>
14+
<body>
15+
<h1 class="main">Distance Converter</h1>
16+
<!--Feet Converter-->
17+
<div class="feetcss">
18+
<p>
19+
<label for="Feet">Feet</label>
20+
<input type="number" id="inputFeet" placeholder="Feet" oninput="feetConverter(this.value)" onchange="feetConverter(this.value)">
21+
</p>
22+
<p>Meters: <span id="outputMeters"></span></p>
23+
<p>Inches: <span id="outputInches"></span></p>
24+
<p>Centimeters: <span id="outputCentimeters"></span></p>
25+
<p>Yards: <span id="outputYards"></span></p>
26+
<p>Kilometers: <span id="outputKilometers"></span></p>
27+
<p>Miles: <span id="outputMiles"></span></p>
28+
</div>
29+
30+
31+
<!--Meters Converter-->
32+
<div class="metercss">
33+
<p>
34+
<label for="Meter">Meter</label>
35+
<input type="number" id="inputMeter" placeholder="Meter" oninput="meterConverter(this.value)" onchange="meterConverter(this.value)">
36+
</p>
37+
<p>Feet: <span id="mtof"></span></p>
38+
<p>Inches: <span id="mtoi"></span></p>
39+
<p>Centimeters: <span id="mtoc"></span></p>
40+
<p>Yards: <span id="mtoy"></span></p>
41+
<p>Kilometers: <span id="mtok"></span></p>
42+
<p>Miles: <span id="mtom"></span></p>
43+
</div>
44+
45+
46+
<!--Inches Converter-->
47+
<div class="inchcss">
48+
<p>
49+
<label for="Inches">Inches</label>
50+
<input type="number" id="inputMeter" placeholder="Inches" oninput="incheConverter(this.value)" onchange="incheConverter(this.value)">
51+
</p>
52+
<p>Feet: <span id="itof"></span></p>
53+
<p>Meters: <span id="itom"></span></p>
54+
<p>Centimeters: <span id="itoc"></span></p>
55+
<p>Yards: <span id="itoy"></span></p>
56+
<p>Kilometers: <span id="itok"></span></p>
57+
<p>Miles: <span id="itomi"></span></p>
58+
</div>
59+
60+
61+
<!--Centimeters Converter-->
62+
<div class="centicss">
63+
<p>
64+
<label for="Centimeters">Centimeters</label>
65+
<input type="number" id="inputMeter" placeholder="Centimeters" oninput="centimeterConverter(this.value)" onchange="centimeterConverter(this.value)">
66+
</p>
67+
<p>Feet: <span id="ctof"></span></p>
68+
<p>Meters: <span id="ctom"></span></p>
69+
<p>Inches: <span id="ctoi"></span></p>
70+
<p>Yards: <span id="ctoy"></span></p>
71+
<p>Kilometers: <span id="ctok"></span></p>
72+
<p>Miles: <span id="ctomi"></span></p>
73+
</div>
74+
75+
76+
<!--Yards Converter-->
77+
<div class="yardcss">
78+
<p>
79+
<label for="Yards">Yards</label>
80+
<input type="number" id="inputMeter" placeholder="Yards" oninput="yardConverter(this.value)" onchange="yardConverter(this.value)">
81+
</p>
82+
<p>Feet: <span id="ytof"></span></p>
83+
<p>Meters: <span id="ytom"></span></p>
84+
<p>Inches: <span id="ytoi"></span></p>
85+
<p>Centimeters: <span id="ytoc"></span></p>
86+
<p>Kilometers: <span id="ytok"></span></p>
87+
<p>Miles: <span id="ytomi"></span></p>
88+
</div>
89+
90+
91+
<!--Kilometers Converter-->
92+
<div class="kilocss">
93+
<p>
94+
<label for="Kilometers">Kilometers</label>
95+
<input type="number" id="inputMeter" placeholder="Kilometers" oninput="kilometerConverter(this.value)" onchange="kilometerConverter(this.value)">
96+
</p>
97+
<p>Feet: <span id="ktof"></span></p>
98+
<p>Meters: <span id="ktom"></span></p>
99+
<p>Inches: <span id="ktoi"></span></p>
100+
<p>Centimeters: <span id="ktoc"></span></p>
101+
<p>Yards: <span id="ktoy"></span></p>
102+
<p>Miles: <span id="ktomi"></span></p>
103+
</div>
104+
105+
106+
<!--Miles Converter-->
107+
<div class="milecss">
108+
<p>
109+
<label for="Miles">Miles</label>
110+
<input type="number" id="inputMeter" placeholder="Miles" oninput="mileConverter(this.value)" onchange="mileConverter(this.value)">
111+
</p>
112+
<p>Feet: <span id="mitof"></span></p>
113+
<p>Meters: <span id="mitom"></span></p>
114+
<p>Inches: <span id="mitoi"></span></p>
115+
<p>Centimeters: <span id="mitoc"></span></p>
116+
<p>Yards: <span id="mitoy"></span></p>
117+
<p>Kilometers: <span id="mitok"></span></p>
118+
</div>
119+
120+
<hr>
121+
<h3>Made By Suvam Prasad</h3>
122+
123+
</body>
124+
</html>

‎Distance_converter/dist.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
//Feet converter
2+
function feetConverter(value){
3+
document.getElementById("outputMeters").innerHTML = value/3.2808;
4+
document.getElementById("outputInches").innerHTML = value*12;
5+
document.getElementById("outputCentimeters").innerHTML = value/0.032808;
6+
document.getElementById("outputYards").innerHTML = value*0.33333;
7+
document.getElementById("outputKilometers").innerHTML = value/3280.8;
8+
document.getElementById("outputMiles").innerHTML = value*0.00018939;
9+
10+
}
11+
12+
//Meters Converter
13+
function meterConverter(mvalue){
14+
document.getElementById("mtof").innerHTML = mvalue*3.2808;
15+
document.getElementById("mtoi").innerHTML = mvalue*39.370;
16+
document.getElementById("mtoc").innerHTML = mvalue/0.01;
17+
document.getElementById("mtoy").innerHTML = mvalue*1.0936;
18+
document.getElementById("mtok").innerHTML = mvalue/1000;
19+
document.getElementById("mtom").innerHTML = mvalue*0.00062137;
20+
}
21+
22+
//Inches Converter
23+
function incheConverter(ivalue){
24+
document.getElementById("itof").innerHTML = ivalue*0.083333;
25+
document.getElementById("itom").innerHTML = ivalue/39.370
26+
document.getElementById("itoc").innerHTML = ivalue/0.39370;
27+
document.getElementById("itoy").innerHTML = ivalue*0.027778;
28+
document.getElementById("itok").innerHTML = ivalue/39370;
29+
document.getElementById("itomi").innerHTML = ivalue*0.000015783;
30+
}
31+
32+
//Centimeter Converter
33+
function centimeterConverter(cvalue){
34+
document.getElementById("ctof").innerHTML = cvalue*0.032808;
35+
document.getElementById("ctom").innerHTML = cvalue/100;
36+
document.getElementById("ctoi").innerHTML = cvalue*0.39370;
37+
document.getElementById("ctoy").innerHTML = cvalue*0.010936;
38+
document.getElementById("ctok").innerHTML = cvalue/100000;
39+
document.getElementById("ctomi").innerHTML = cvalue*0.0000062137;
40+
}
41+
42+
//Yard Conventer
43+
function yardConverter(yvalue){
44+
document.getElementById("ytof").innerHTML = yvalue*3;
45+
document.getElementById("ytom").innerHTML = yvalue/1.0936;
46+
document.getElementById("ytoi").innerHTML = yvalue*36;
47+
document.getElementById("ytoc").innerHTML = yvalue/0.010936;
48+
document.getElementById("ytok").innerHTML = yvalue/1093.6;
49+
document.getElementById("ytomi").innerHTML = yvalue*0.00056818;
50+
}
51+
52+
//Kilometer Converter
53+
function kilometerConverter(kvalue){
54+
document.getElementById("ktof").innerHTML = kvalue*3280.8;
55+
document.getElementById("ktom").innerHTML = kvalue*1000;
56+
document.getElementById("ktoi").innerHTML = kvalue*39370;
57+
document.getElementById("ktoc").innerHTML = kvalue*100000;
58+
document.getElementById("ktoy").innerHTML = kvalue*1093.6;
59+
document.getElementById("ktomi").innerHTML = kvalue*0.62137;
60+
}
61+
62+
//Mile Converter
63+
function mileConverter(mivalue){
64+
document.getElementById("mitof").innerHTML = mivalue*5280;
65+
document.getElementById("mitom").innerHTML = mivalue/0.00062137;
66+
document.getElementById("mitoi").innerHTML = mivalue*63360;
67+
document.getElementById("mitoc").innerHTML = mivalue/0.0000062137;
68+
document.getElementById("mitoy").innerHTML = mivalue*1760;
69+
document.getElementById("mitok").innerHTML = mivalue/0.62137;
70+
}

0 commit comments

Comments
 (0)