Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8fe883f

Browse files
programmerrajaprogrammerraja
authoredOct 9, 2020
Added Temperature Conversion (#58)
* Updated README file * Added temperture to conversiontools * Bug fixed in temperture nav
1 parent db7e63c commit 8fe883f

File tree

5 files changed

+315
-1
lines changed

5 files changed

+315
-1
lines changed
 

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Utility is meant to be a simple easy to use unit conversion website plus bunch o
2020

2121

2222
### [Conversion tools](conversionTools)
23-
- [Temperture]
23+
- [Temperture](conversionTools/temperture/temperture.html)
2424
- [Length]
2525
- [weight]
2626
- [speed]

‎conversionTools/temperture/previewimg.png

44.4 KB
Loading

‎conversionTools/temperture/temperture.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
3+
/*
4+
*----------------------------------------------------------------
5+
* SITE HEADER
6+
*----------------------------------------------------------------
7+
*/
8+
.site-header {
9+
background-color: rgba(0, 0, 0, 0.85);
10+
-webkit-backdrop-filter: saturate(180%) blur(20px);
11+
backdrop-filter: saturate(180%) blur(20px);
12+
}
13+
/*
14+
*----------------------------------------------------------------
15+
* heading
16+
*----------------------------------------------------------------
17+
*/
18+
.heading
19+
{
20+
text-align: center;
21+
}
22+
/*
23+
*----------------------------------------------------------------
24+
* container
25+
*----------------------------------------------------------------
26+
*/
27+
.container_wrapper
28+
{
29+
width: 90%;
30+
height: 50vh;
31+
display: flex;
32+
margin: .5rem auto auto;
33+
align-items: center;
34+
justify-content: center;
35+
flex-direction: column;
36+
color: white;
37+
}
38+
/*
39+
*----------------------------------------------------------------
40+
* temprature wrapper
41+
*----------------------------------------------------------------
42+
*/
43+
.temp__wrapper
44+
{
45+
width: 50%;
46+
margin: 0 auto;
47+
display: flex;
48+
border-radius: 10px;
49+
height: 300px;
50+
flex-direction: column;
51+
justify-content: center;
52+
background-color: var(--indigo);
53+
}
54+
/*
55+
*----------------------------------------------------------------
56+
* temprature container
57+
*----------------------------------------------------------------
58+
*/
59+
.temp__container
60+
{
61+
display: flex;
62+
flex-direction: column;
63+
margin: 0 auto;
64+
}
65+
/*
66+
*----------------------------------------------------------------
67+
* value ,result, button container
68+
*----------------------------------------------------------------
69+
*/
70+
.value__container,
71+
.result__container,
72+
.button__container
73+
{
74+
margin: 10px auto;
75+
}
76+
/*
77+
*----------------------------------------------------------------
78+
* value ,result dropdown box
79+
*----------------------------------------------------------------
80+
*/
81+
#conversion_value,
82+
#conversion_result
83+
{
84+
color: #fff;
85+
background-color: #007bff;
86+
border-color: #007bff;
87+
outline: none;
88+
89+
}
90+
/*
91+
*----------------------------------------------------------------
92+
* convert button
93+
*----------------------------------------------------------------
94+
*/
95+
#convert_button
96+
{
97+
color: #fff;
98+
background-color: #007bff;
99+
border-color: #007bff;
100+
outline: none;
101+
}

‎conversionTools/temperture/temperture.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#6610f2" />
10+
<link rel="icon" type="image/ico" href="../../favicon.ico" />
11+
<title>Utility Website</title>
12+
<!-- Styles -->
13+
<link
14+
rel="stylesheet"
15+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
16+
/>
17+
<link
18+
rel="stylesheet"
19+
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
20+
/>
21+
<link rel="stylesheet" href="temperture.css" />
22+
</head>
23+
<body>
24+
<!-- Navbar -->
25+
<nav class="site-header sticky-top py-1 text-light">
26+
<div
27+
class="container d-flex flex-column flex-md-row justify-content-between align-items-center"
28+
>
29+
<a class="py-2 text-light" href="index.html">
30+
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
31+
</a>
32+
33+
<div class="btn-group d-none d-md-block py-2">
34+
<button
35+
type="button"
36+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
37+
data-toggle="dropdown"
38+
>
39+
Conversion Tools
40+
</button>
41+
<div class="dropdown-menu">
42+
<a href="#" class="dropdown-item">Demo</a>
43+
<a href="#" class="dropdown-item">temperture</a>
44+
</div>
45+
</div>
46+
47+
<div class="btn-group d-none d-md-block py-2">
48+
<button
49+
type="button"
50+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
51+
data-toggle="dropdown"
52+
>
53+
Daily Use Tools
54+
</button>
55+
<div class="dropdown-menu">
56+
<a href="#" class="dropdown-item">Demo</a>
57+
</div>
58+
</div>
59+
60+
<div class="btn-group d-none d-md-block py-2">
61+
<button
62+
type="button"
63+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
64+
data-toggle="dropdown"
65+
>
66+
Finance Tools
67+
</button>
68+
<div class="dropdown-menu">
69+
<a href="#" class="dropdown-item">Demo</a>
70+
</div>
71+
</div>
72+
73+
<div class="btn-group d-none d-md-block py-2">
74+
<button
75+
type="button"
76+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
77+
data-toggle="dropdown"
78+
>
79+
Mathmetical Tools
80+
</button>
81+
<div class="dropdown-menu">
82+
<a href="#" class="dropdown-item">Demo</a>
83+
</div>
84+
</div>
85+
</div>
86+
</nav>
87+
<!-- Navbar End -->
88+
<div class="heading">
89+
<h3 >Temperature Conversion</h3>
90+
</div>
91+
<!-- temperture conversion tool -->
92+
<div class="container_wrapper">
93+
<div class="temp__wrapper">
94+
<div class="temp__container">
95+
<div class="value__container">
96+
<label for="temperture_value">Enter the temperture</label>
97+
<br>
98+
<input type="text" name="temperture_value" id="temperture_value">
99+
<select name="conversion_value" id="conversion_value">
100+
<option value="Fahrenheit">Fahrenheit</option>
101+
<option value="Celsius">Celsius</option>
102+
<option value="Kelvin">Kelvin</option>
103+
</select>
104+
</div>
105+
106+
<div class="result__container">
107+
<label for="temperture_result">Result</label>
108+
<br>
109+
<input type="text" name="temperture_result" id="temperture_result">
110+
<select name="conversion_result" id="conversion_result">
111+
<option value="Celsius">Celsius</option>
112+
<option value="Kelvin">Kelvin</option>
113+
<option value="Fahrenheit">Fahrenheit</option>
114+
</select>
115+
</div>
116+
117+
<div class="button__container">
118+
<input type="button" name="Convert" value="Convert" id="convert_button">
119+
</div>
120+
</div>
121+
122+
</div>
123+
</div>
124+
125+
126+
<!-- Footer -->
127+
<footer class="border-top py-3 px-4">
128+
<div class="row align-items-center">
129+
<div class="col-md-6">
130+
<p class="m-0">Copyright &copy; 2020 K.Boopathi</p>
131+
<p class="m-0">
132+
Page Created by
133+
<a href="https://github.com/programmerraja" target="_blank"
134+
>K.Boopathi</a
135+
>
136+
</p>
137+
</div>
138+
<div class="col-md-6 text-md-right">
139+
<a href="contributors.html" target="_blank" class="text-dark"
140+
>Contributors</a
141+
>
142+
<span class="text-muted mx-2">|</span>
143+
144+
<a href="#" class="text-dark">Terms of Use</a>
145+
<span class="text-muted mx-2">|</span>
146+
<a href="#" class="text-dark">Privacy Policy</a>
147+
</div>
148+
</div>
149+
</footer>
150+
<script src="temperture.js"></script>
151+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
152+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
153+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
154+
</body>
155+
</html>

‎conversionTools/temperture/temperture.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
2+
function converttemperture() {
3+
//getting the value of conversion
4+
let conversion_value=document.getElementById("conversion_value").value;
5+
let conversion_result=document.getElementById("conversion_result").value;
6+
//getting the value of temperture
7+
let temperture_value=document.getElementById("temperture_value").value;
8+
let temperture_result=document.getElementById("temperture_result");
9+
//converting the value to int
10+
temperture_value=parseInt(temperture_value);
11+
//store it on result var
12+
let result=temperture_value;
13+
//checking for condition
14+
if(conversion_value==="Celsius" && conversion_result==="Fahrenheit")
15+
{
16+
result=(temperture_value * 9/5) + 32;
17+
}
18+
else if(conversion_value==="Celsius" && conversion_result==="Kelvin")
19+
{
20+
result=(temperture_value+273.15);
21+
}
22+
else if(conversion_value==="Fahrenheit" && conversion_result==="Celsius")
23+
{
24+
result=(temperture_value - 32)* 5/9;
25+
}
26+
else if(conversion_value==="Fahrenheit" && conversion_result==="Kelvin")
27+
{
28+
result=(temperture_value- 32)* 5/9 + 273.15;
29+
}
30+
else if(conversion_value==="Kelvin" && conversion_result==="Fahrenheit")
31+
{
32+
result=(temperture_value - 273.15)* 9/5 + 32 ;
33+
}
34+
else if(conversion_value==="Kelvin" && conversion_result==="Celsius")
35+
{
36+
result=(temperture_value - 273.15) ;
37+
}
38+
//fixed the ouuput to 2 digits
39+
result=result.toFixed(2);
40+
//inform the use if the input is not valid
41+
if(isNaN(result))
42+
{
43+
temperture_result.value="Enter a valid number";
44+
}
45+
else
46+
{
47+
temperture_result.value=result;
48+
}
49+
50+
}
51+
52+
//program begins here
53+
function main(argument) {
54+
let convert_button=document.getElementById("convert_button");
55+
convert_button.addEventListener("click",converttemperture);
56+
57+
}
58+
main();

0 commit comments

Comments
 (0)
Please sign in to comment.