-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTemperature.html
107 lines (95 loc) · 3.21 KB
/
Temperature.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Converter</title>
<style>
*{
background-color: darkgrey;
/* background: #000; */
padding: 0;
margin: 0 auto;
text-align: center;
}
body{
/* display: flex;
flex-wrap: wrap; */
gap: 2em;
}
h1{
color: mediumslateblue;
text-shadow: 2px 2px 4px mediumslateblue;
}
input{
border: none;
box-shadow: 2px 4px 8px gray,-2px -2px 8px gray;
height: 2.5rem;
width: 15rem;
margin-top: 2rem;
display: flex;
justify-content: start;
justify-content: center;
flex-wrap: wrap;
display: inline;
}
select, button{
height: 2.5rem;
margin-top: 2rem;
border: none;
box-shadow: 2px 4px 8px gray,-2px -2px 8px gray;
width: 10rem;
display: flex;
justify-content: start;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
div{
box-shadow: 3px 3px 8px gray,
-3px -3px 8px gray;
height: 200px;
width: 450px;
margin-top: 2rem;
padding-top: 2rem;
display: flex;
flex-wrap: wrap;
padding-left: 10rem;
}
</style>
</head>
<body>
<h1>Temperature Converter</h1>
<input type="number" id="temperature" placeholder="Enter temperature" required>
<select id="unit">
<option value="Celsius">Celsius</option>
<option value="Fahrenheit">Fahrenheit</option>
<option value="Kelvin">Kelvin</option>
</select>
<button id="convertButton">Convert</button>
<div id="result">Your Answer is here..</div>
<script>
document.getElementById('convertButton').addEventListener('click', function() {
const tempInput = parseFloat(document.getElementById('temperature').value);
const unit = document.getElementById('unit').value;
let convertedTemp;
let resultUnit;
if (isNaN(tempInput)) {
document.getElementById('result').innerText = "Please enter a valid number.";
return;
}
if (unit === "Celsius") {
convertedTemp = (tempInput * 9/5) + 32; // Celsius to Fahrenheit
resultUnit = "Fahrenheit";
} else if (unit === "Fahrenheit") {
convertedTemp = (tempInput - 32) * 5/9; // Fahrenheit to Celsius
resultUnit = "Celsius";
} else if (unit === "Kelvin") {
convertedTemp = tempInput - 273.15; // Kelvin to Celsius
resultUnit = "Celsius";
}
document.getElementById('result').innerText = `Converted Temperature: ${convertedTemp.toFixed(2)} ${resultUnit}`;
});
</script>
</body>
</html>