-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (96 loc) · 4.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/fonts/fontAwesome/css/all.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Temparature</title>
</head>
<body>
<div class="background">
<div class="temp_calculator">
<h4 class="title">Temperature Convertor</h4>
<form action="" name="form">
<div class="temp_calculator_inputs">
<div class="calculator_value">
<label for="">Value To Convert:</label>
<input type="text" placeholder="0" name="value" id="input_value">
</div>
<div class="calculator_input">
<label for="">From:</label>
<select name="input" id="input">
<option value="celsius">Celsius (°C)</option>
<option value="fahrenheit">Fahrenheit (°F)</option>
<option value="kelvin">Kelvin (°K)</option>
</select>
</div>
<div class="calculator_input">
<label for="">To:</label>
<select name="output" id="output">
<option value="celsius">Celsius (°C)</option>
<option value="fahrenheit">Fahrenheit (°F)</option>
<option value="kelvin">Kelvin (°K)</option>
</select>
</div>
</div>
<button type="button" id="clear" class="cal-btn" onclick="reset()">Clear</button>
<button type="button" id="convert" class="cal-btn" onclick="convertTemperature()">Convert</button>
<div class="result_area">
<label for="">Answer:</label>
<input type="text" value="" id="result">
</div>
</form>
</div>
</div>
<script>
function convertTemperature(){
let val = document.getElementById("input_value");
let result = document.getElementById("result");
let input = document.getElementById("input");
let output = document.getElementById("output");
val.addEventListener("keyup", convertTemperature);
input.addEventListener("change", convertTemperature);
output.addEventListener("change", convertTemperature);
let inputValue = input.value;
let outputValue = output.value;
//Celsius
if(inputValue === "celsius" && outputValue === "fahrenheit"){
result.value = Number((val.value) * 9/5) + 32;
}else if(inputValue === "celsius" && outputValue === "kelvin"){
result.value = Number(val.value) + 273.15;
}else if(inputValue === "celsius" && outputValue === "celsius"){
result.value = val.value;
}
//Fahrenheit
if(inputValue === "fahrenheit" && outputValue === "celsius"){
result.value = Number((val.value - 32) * 5) / 9;
}else if(inputValue === "fahrenheit" && outputValue === "kelvin"){
result.value = Number((val.value - 32) * 5/9) + 273.15;
}else if(inputValue === "fahrenheit" && outputValue === "fahrenheit"){
result.value = val.value;
}
//Kelvin
if(inputValue === "kelvin" && outputValue === "celsius"){
result.value = Number(val.value) - 273.15;
}else if(inputValue === "kelvin" && outputValue === "fahrenheit"){
result.value = Number((val.value - 273.15) * 9/5) + 32;
}else if(inputValue === "kelvin" && outputValue === "kelvin"){
result.value = val.value;
}
}
function reset(){
convertTemperature();
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>