Skip to content

Commit df72170

Browse files
committed
Added Temperature Converter
1 parent b3ac80a commit df72170

4 files changed

Lines changed: 152 additions & 0 deletions

File tree

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
9+
<link rel="stylesheet" href="style.css">
10+
11+
<title>Temperature Converter</title>
12+
13+
</head>
14+
<body>
15+
16+
<div class="container">
17+
<div class="row justify-content-md-center">
18+
<div class="col-md-6 text-center">
19+
<h1>Temperature Converter</h1>
20+
21+
<div id="celsius">
22+
<input type="number" class="form-control form-control-lg form-padding" id="input-celsius" placeholder="Celsius">
23+
24+
</div>
25+
26+
<div id="fahrenheit">
27+
<input type="number" class="form-control form-control-lg form-padding" id="input-fahrenheit" placeholder="Fahrenheit">
28+
29+
</div>
30+
31+
<div id="kelvin">
32+
<input type="number" class="form-control form-control-lg form-padding" id="input-kelvin" placeholder="Kelvin">
33+
34+
</div>
35+
36+
</div>
37+
38+
</div>
39+
<footer>
40+
<p>By Akrati Verma.</p>
41+
<p><a href="https://github.com/blindaks" target="_blank"><img class="icons" src="https://res.cloudinary.com/itsellej/image/upload/v1533400136/rock-paper-scissors/github-icon.png" alt="Github icon"></a>
42+
<a href="https://www.instagram.com/_akrati_23/?hl=en" target="_blank"><img src="./insta.png" height="25px" alt="Instagram"></a>
43+
</p>
44+
45+
</footer>
46+
47+
</div>
48+
49+
<script src="main.js" charset="utf-8"></script>
50+
</body>
51+
</html>
3.58 KB
Loading
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const celsiusInput = document.querySelector('#celsius > input');
2+
const fahrenheitInput = document.querySelector('#fahrenheit > input');
3+
const kelvinInput = document.querySelector('#kelvin > input');
4+
5+
const roundToTwoDP = (num) => {
6+
return num.toFixed(2);
7+
};
8+
9+
10+
const celsiusToFaAndKe = () => {
11+
const celsiusTemp = parseFloat(celsiusInput.value);
12+
const fahrenheitTemp = (celsiusTemp * 1.8) + 32;
13+
const kelvinTemp = celsiusTemp + 273.15;
14+
15+
fahrenheitInput.value = roundToTwoDP(fahrenheitTemp);
16+
kelvinInput.value = roundToTwoDP(kelvinTemp);
17+
};
18+
19+
20+
const fahrenheitToCeAndKe = () => {
21+
const fahrenheitTemp = parseFloat(fahrenheitInput.value);
22+
const celsiusTemp = (fahrenheitTemp - 32) * (5 / 9);
23+
const kelvinTemp = (fahrenheitTemp + 459.67) * (5 / 9);
24+
25+
celsiusInput.value = roundToTwoDP(celsiusTemp);
26+
kelvinInput.value = roundToTwoDP(kelvinTemp);
27+
};
28+
29+
const kelvinToCeAndFa = () => {
30+
const kelvinTemp = parseFloat(kelvinInput.value);
31+
const celsiusTemp = kelvinTemp - 273;
32+
const fahrenheitTemp = 1.8 * (kelvinTemp - 273) + 32;
33+
34+
celsiusInput.value = roundToTwoDP(celsiusTemp);
35+
fahrenheitInput.value = roundToTwoDP(fahrenheitTemp);
36+
};
37+
38+
39+
const main = () => {
40+
celsiusInput.addEventListener('input', celsiusToFaAndKe);
41+
fahrenheitInput.addEventListener('input', fahrenheitToCeAndKe);
42+
kelvinInput.addEventListener('input', kelvinToCeAndFa);
43+
};
44+
45+
main();
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body{
2+
margin-top: 60px;
3+
text-align:center;
4+
}
5+
6+
h1 {
7+
padding-bottom: 0.5rem;
8+
}
9+
10+
input[type=number] {
11+
cursor: pointer;
12+
}
13+
14+
#input-celsius{
15+
background-color: #52DDCF;
16+
font-size: 2.5rem;
17+
}
18+
19+
#input-fahrenheit{
20+
background-color: #16BAC5;
21+
font-size: 2.5rem;
22+
}
23+
24+
#input-kelvin{
25+
background-color: #42a0d9;
26+
font-size: 2.5rem;
27+
}
28+
29+
.form-padding {
30+
padding: 2rem 1rem;
31+
}
32+
33+
::-webkit-input-placeholder {
34+
color: #FFFFFF !important;
35+
}
36+
::-moz-placeholder {
37+
color: #FFFFFF !important;
38+
}
39+
:-ms-input-placeholder {
40+
color: #FFFFFF !important;
41+
}
42+
:-moz-placeholder {
43+
color: #FFFFFF !important;
44+
}
45+
46+
footer{
47+
padding-top: 1.5rem;
48+
font-size: 0.7rem;
49+
line-height: 0.2rem;
50+
text-align:center;
51+
}
52+
53+
.icons{
54+
max-width: 25px;
55+
height: auto;
56+
}

0 commit comments

Comments
 (0)