Skip to content

Commit adfcd7f

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #401 from devesh-2002/main
Added Height Converter
2 parents 1517863 + 1741d6d commit adfcd7f

File tree

5 files changed

+211
-0
lines changed

5 files changed

+211
-0
lines changed

‎Height Converter/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Height Converter
2+
This is a Height Converter webpage, which would convert one form of height to other. User has to enter Height and choose options to convert it from one form to another.
3+
4+
### Technologies Used :
5+
<li>HTML</li>
6+
<li>CSS</li>
7+
<li>JavaScript</li>
8+
9+
### Steps to use :
10+
<li>Download or clone the repository</li>
11+
12+
```terminal
13+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects
14+
```
15+
<li>Go to Height Converter</li>
16+
<li>Run the index.html in your browser</li>
17+
<li>Enter Height and choose Options</li>
18+
19+
### Screenshot :
20+
![image](https://user-images.githubusercontent.com/79015420/138023561-581eb190-430e-48d9-87e0-4ed4cb31a7f0.png)

‎Height Converter/index.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
9+
<link rel="stylesheet" href="style.css">
10+
<title>Height Convertor</title>
11+
</head>
12+
13+
<body>
14+
<div class="container-fluid">
15+
<div class="row">
16+
<div class="col-12 col-sm-6 offset-sm-6 col-md-8 offset-md-2 col-xl-6 offset-xl-3">
17+
<h1 class="display-4 text-center mb-3" style="color:brown;font-weight:bold;font-family:Cambria">Height Convertor</h1>
18+
<div class="row">
19+
<div class="col-sm-3">
20+
<form id='mainForm'>
21+
<div class="form-group">
22+
<input id="heightInput" type="number" class="form-control" class="form-control-lg" placeholder="Enter Height...">
23+
</div>
24+
</form>
25+
</div>
26+
<div class="col-sm-4">
27+
<select class="form-control" id="firOpt">
28+
<option selected>Select an Option</option>
29+
<option>Centimeters</option>
30+
<option>Inches</option>
31+
<option>Meters</option>
32+
<option>Kilometers</option>
33+
<option>Miles</option>
34+
</select>
35+
</div>
36+
<div class="col-sm-1">-</div>
37+
<div class="col-sm-3">
38+
<select class="form-control" id="secOpt">
39+
<option selected>Select</option>
40+
<option>Miles</option>
41+
<option>Centimeters</option>
42+
<option>Meters</option>
43+
<option>Kilometers</option>
44+
<option>Inches</option>
45+
</select>
46+
</div>
47+
</div>
48+
<div id="output" class="row">
49+
<div class="col-sm-5">
50+
<div class="card">
51+
<div class="card-block card-primary">
52+
<h3 id="heightName" class="card-title"></h3>
53+
<p id="heightOutput" class="card-text"></p>
54+
</div>
55+
</div>
56+
</div>
57+
<div class="col-sm-5">
58+
<div class="card">
59+
<div class="card-block card-danger">
60+
<h3 id="convertedHeightName" class="card-title"></h3>
61+
<p id="finalOutput" class="card-text"></p>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
<div class="row">
67+
<div class="col-sm-12">
68+
<button id="resetButton" type="button" class="btn btn-outline-warning">Reset</button>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
<script src="script.js"></script>
75+
</body>
76+
77+
</html>

‎Height Converter/script.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
let height, firOpt, secOpt;
2+
3+
//Gets the height input and places the value of it in the blue box
4+
document.getElementById('heightInput').addEventListener('input', getHeightInput);
5+
6+
function getHeightInput(e) {
7+
document.getElementById('output').style.visibility = 'visible';
8+
document.getElementById('resetButton').style.visibility = 'visible';
9+
height = e.target.value;
10+
document.getElementById('heightOutput').innerHTML = height; //placing the value to the DOM
11+
heightConverter();
12+
}
13+
14+
document.getElementById('firOpt').addEventListener('change', getfirOpt);
15+
16+
function getfirOpt(e) {
17+
firOpt = e.target.value; //Gets placeholder value
18+
document.getElementById('heightInput').placeholder = 'Enter ' + firOpt + '...';
19+
document.getElementById('heightName').innerHTML = firOpt + ":";
20+
heightConverter();
21+
}
22+
23+
document.getElementById('secOpt').addEventListener('change', getsecOpt);
24+
25+
function getsecOpt(e) {
26+
secOpt = e.target.value;
27+
document.getElementById('convertedHeightName').innerHTML = secOpt + ":";
28+
heightConverter();
29+
}
30+
31+
function heightConverter() {
32+
const finalOutput = document.querySelector('#finalOutput');
33+
//Validates for Miles
34+
if (firOpt == "Miles" && secOpt == "Centimeters") {
35+
finalOutput.innerHTML = height * 160934;
36+
} else if (firOpt == "Miles" && secOpt == "Kilometers") {
37+
finalOutput.innerHTML = height * 1.60934;
38+
} else if (firOpt == "Miles" && secOpt == "Meters") {
39+
finalOutput.innerHTML = height * 1609.34;
40+
} else if (firOpt == "Miles" && secOpt == "Inches") {
41+
finalOutput.innerHTML = height * 63360;
42+
}
43+
//Validates for Centimeters
44+
else if (firOpt == "Centimeters" && secOpt == "Miles") {
45+
finalOutput.innerHTML = height / 160934;
46+
} else if (firOpt == "Centimeters" && secOpt == "Kilometers") {
47+
finalOutput.innerHTML = height / 100000;
48+
} else if (firOpt == "Centimeters" && secOpt == "Meters") {
49+
finalOutput.innerHTML = height * 0.01;
50+
} else if (firOpt == "Centimeters" && secOpt == "Inches") {
51+
finalOutput.innerHTML = height * 0.3937;
52+
}
53+
//Validates for Kilometers
54+
else if (firOpt == "Kilometers" && secOpt == "Centimeters") {
55+
finalOutput.innerHTML = height * 100000;
56+
} else if (firOpt == "Kilometers" && secOpt == "Miles") {
57+
finalOutput.innerHTML = height / 1.609;
58+
} else if (firOpt == "Kilometers" && secOpt == "Meters") {
59+
finalOutput.innerHTML = height * 1000;
60+
} else if (firOpt == "Kilometers" && secOpt == "Inches") {
61+
finalOutput.innerHTML = height * 39370;
62+
}
63+
//Validates for Meters
64+
else if (firOpt == "Meters" && secOpt == "Miles") {
65+
finalOutput.innerHTML = height / 1609;
66+
} else if (firOpt == "Meters" && secOpt == "Kilometers") {
67+
finalOutput.innerHTML = height / 1000;
68+
} else if (firOpt == "Meters" && secOpt == "Centimeters") {
69+
finalOutput.innerHTML = height * 100;
70+
} else if (firOpt == "Meters" && secOpt == "Inches") {
71+
finalOutput.innerHTML = height * 39.37;
72+
}
73+
74+
//Validates for Inches
75+
else if (firOpt == "Inches" && secOpt == "Miles") {
76+
finalOutput.innerHTML = height / 63360;
77+
} else if (firOpt == "Inches" && secOpt == "Kilometers") {
78+
finalOutput.innerHTML = height / 39370;
79+
} else if (firOpt == "Inches" && secOpt == "Meters") {
80+
finalOutput.innerHTML = height / 39.37;
81+
} else if (firOpt == "Inches" && secOpt == "Centimeters") {
82+
finalOutput.innerHTML = height * 2.54;
83+
}
84+
//Validates if first option is the same as second option
85+
else {
86+
finalOutput.innerHTML = height;
87+
}
88+
}
89+
90+
document.getElementById('resetButton').addEventListener('click', reset);
91+
92+
function reset() {
93+
document.getElementById('mainForm').reset();
94+
document.getElementById('output').style.visibility = 'hidden';
95+
document.getElementById('resetButton').style.visibility = 'hidden';
96+
}

‎Height Converter/style.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
body {
2+
margin-top: 29px;
3+
background: lightgrey;
4+
color: #fff;
5+
align-items: center;
6+
text-align: center;
7+
}
8+
9+
.card {
10+
margin-top: 11px;
11+
background: red;
12+
}
13+
14+
#resetButton {
15+
margin: 21px;
16+
background: grey;
17+
}

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,3 +143,4 @@
143143
|[Guitar](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Guitar)| A webapp that plays basic sounds of guitar
144144
|[Interactive Pricing Component](https://github.com/Ahsan-Ehtesham/Web-dev-mini-projects/tree/ahsan/Interactive%20Pricing%20Component)| Interactive Pricing Component using HTML, CSS and JS
145145
|[Typing champ](https://github.com/FaizaAbdullah-code/Web-dev-mini-projects/tree/faiza/Typing-champ)| One page website for speed checking using HTML, CSS and JS.
146+
|[Height Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Height%20Converter)|Webpage used to converting one form of height to other.

0 commit comments

Comments
 (0)