In this article, we will see Temperature Conversion between Celsius, Fahrenheit & Kelvin using HTML CSS & JavaScript. The Temperature is generally measured in terms of unit degree., i.e. in degrees centigrade, in degrees, Fahrenheit & Kelvin.
- Celsius is a standard unit of temperature on the Celsius scale, & is represented by the °C symbol.
- Fahrenheit uses the degree Fahrenheit as the unit & is represented with the °F symbol.
- Kelvin is an internationally recognized standard for scientific temperature measurement. It is an absolute temperature scale that is obtained by shifting the Celsius scale by −273.15°, in order to coincide the absolute zero to 0K.
Examples depict 0°C in Fahrenheit & Kelvin:
Input: 0 in Celsius
Output: 32 in Fahrenheit and 273.15 in Kelvin
Input: 0 in Fahrenheit
Output: -17.78 in Celsius and 255.37 in Kelvin
Input: 0 in Kelvin
Output: -273.15 in Celsius and -459.67 in Fahrenheit
Formula for converting Celsius scale to Fahrenheit scale and Kelvin scale:
T(°F) = (T(°C) * 9)/5 + 32
T(°K) = T(°C) + 273.15
Formula for converting Fahrenheit scale to Celsius scale and Kelvin scale:
T(°C) = ((T(°F) - 32) * 5) / 9
T(°K) = (T(°F) - 32) * 5 / 9 + 273.15
Formula for converting Kelvin scale to Celsius scale and Fahrenheit scale:
T(°C) = (T(°K) - 273.15
T(°F) = (T(°K) - 273.15) * 9 / 5 + 32;
Approach:
- Create one container in which all the elements are present.
- Inside this container add 3 input fields in which one for Celsius and another for Fahrenheit and Kelvin.
- Now Style which you want I add this container in the center.
- Now added Javascript which converts the following Temperature(Fahrenheit, Celsius, Kelvin) to the corresponding Remaining Two Temperature prints results in the various input fields.
Example: This example illustrates the basic temperature Conversion between Celsius, Fahrenheit & Kelvin using HTML, CSS & JS.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width,initial-scale=1.0" >
< style >
* {
margin: 0;
padding: 0;
font-family:
Verdana, Geneva, Tahoma, sans-serif;
}
.container {
width: 100%;
height: 100vh;
background-image:
linear-gradient(rgb(140, 219, 140),
rgb(20, 141, 20));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
color: green;
font-weight: 700;
font-size: 25px;
text-align: center;
}
.converter-row {
display: flex;
width: 40%;
justify-content: space-between;
align-items: center;
background: rgb(0, 56, 0);
border-radius: 10px;
padding: 50px 20px;
}
.col {
flex-basis: 32%;
text-align: center;
}
.col label {
font-size: 15px;
font-weight: 500;
margin-bottom: 10px;
color: #fff;
}
.col input {
width: 150px;
height: 30px;
background: white;
border-radius: 5px;
text-align: center;
}
</ style >
</ head >
< body >
< div class = "container" >
< h1 >GeeksforGeeks < br >
Temperature Converter</ h1 >
< div class = "converter-row" >
< div class = "col" >
< label >Fahrenheit</ label >
< input type = "number" id = "fahrenheit" >
</ div >
< div class = "col" >
< label >Celsius</ label >
< input type = "number" id = "celsius" >
</ div >
< div class = "col" >
< label >Kelvin</ label >
< input type = "number" id = "kelvin" >
</ div >
</ div >
</ div >
< script >
let celsius =
document.getElementById('celsius');
let fahrenheit =
document.getElementById('fahrenheit');
let kelvin =
document.getElementById('kelvin');
celsius.oninput = function () {
let f = (parseFloat(celsius.value) * 9) / 5 + 32;
fahrenheit.value = parseFloat(f.toFixed(2));
let k = (parseFloat(celsius.value) + 273.15);
kelvin.value = parseFloat(k.toFixed(2));
}
fahrenheit.oninput = function () {
let c = ((parseFloat(
fahrenheit.value) - 32) * 5) / 9;
celsius.value = parseFloat(c.toFixed(2));
let k = (parseFloat(
fahrenheit.value) - 32) * 5 / 9 + 273.15;
kelvin.value = parseFloat(k.toFixed(2));
}
kelvin.oninput = function () {
let f = (parseFloat(
kelvin.value) - 273.15) * 9 / 5 + 32;
fahrenheit.value = parseFloat(f.toFixed(2));
let c = (parseFloat(kelvin.value) - 273.15);
celsius.value = parseFloat(c.toFixed(2));
}
</ script >
</ body >
</ html >
|
Output: