<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="display-4 text-center mb-4 app-title">What's The Temp? <span id="temp" class="fa"></span></h1>
<div class="input-group input-group-lg">
<label class="sr-only" for="farInput">Enter degrees in Farenheit</label>
<input id="farInput" type="number" class="form-control" placeholder="Enter number">
<div class="input-group-addon starter">°F</div>
<div class="input-group-addon result-a"><span id="farToCel"></span> °C</div>
<div class="input-group-addon result-b"><span id="farToKel"></span> °K</div>
</div>
<div class="input-group input-group-lg">
<label class="sr-only" for="celInput">Enter degrees in Celsius</label>
<input id="celInput" type="number" class="form-control" placeholder="Enter number">
<div class="input-group-addon starter">°C</div>
<div class="input-group-addon result-a"><span id="celToFar"></span> °F</div>
<div class="input-group-addon result-b"><span id="celToKel"></span> °K</div>
</div>
<div class="input-group input-group-lg">
<label class="sr-only" for="kelInput">Enter degrees in Kelvin</label>
<input id="kelInput" type="number" class="form-control" placeholder="Enter number">
<div class="input-group-addon starter">°K</div>
<div class="input-group-addon result-a"><span id="kelToFar"></span> °F</div>
<div class="input-group-addon result-b"><span id="kelToCel"></span> °C</div>
</div>
</div>
</div>
<div class="row footer">
<p class="footer-text"><a href="https://melaniemagdalena.com">Made with <span class="heart">❤</span> by M<sup>2</sup></a> | Inspiration from <a href="https://www.youtube.com/watch?v=7l-ZAuU8TXc">"Weight Converter"</a> & <a href="https://www.youtube.com/watch?v=XP-MRCUPZao">"Animated Icons"</a> by Traversy Media</p>
</div>
</div>
body {
background-color: #222222;
}
.app-title {
padding: 30px;
color: #fff;
}
.input-group {
margin-bottom: 10px;
height: 80px;
}
.form-control {
border-radius: 0.5em 0 0 0.5em !important;
width: 50%;
padding: 0 16px !important;
}
.form-control::placeholder {
font-size: 0.8em;
font-style: italic;
}
.input-group-addon {
border-radius: 0.5em !important;
width: 25%;
}
.starter {
border-radius: 0 0.5em 0.5em 0 !important;
width: 15%;
}
.result-a {
margin: 0 0 0 10px;
border-radius: 0.5em 0 0 0.5em !important;
}
.result-b {
border-radius: 0 0.5em 0.5em 0 !important;
}
.footer {
padding: 30px;
color: #f2f2f2;
}
.footer-text a {
color: #fff;
text-decoration: none;
}
.footer-text a:hover {
color: red;
}
.heart {
color: red;
}
@media (max-width: 768px) {
span {
font-size: 0.65em;
font-weight: 600;
text-align: center;
}
}
// Animated Thermometer
function tempLoad () {
let temp = document.getElementById('temp');
temp.innerHTML = "";
setTimeout(function(){
temp.innerHTML = "";
}, 1000);
setTimeout(function(){
temp.innerHTML = "";
}, 2000);
setTimeout(function(){
temp.innerHTML = "";
}, 3000);
setTimeout(function(){
temp.innerHTML = "";
}, 4000);
}
tempLoad();
setInterval(tempLoad, 5000);
// Convert Farenheit to...
document.getElementById('farInput').addEventListener('input', function(e) {
// Use Farenheit to convert
let far = e.target.value;
// Convert to Celsius
document.getElementById('farToCel').innerHTML = ((5/9)*((far*1)-32)).toFixed(2);
// Convert to Kelvin
document.getElementById('farToKel').innerHTML = ((5/9)*((far*1)+459.67)).toFixed(2);
});
// Convert Celsius to...
document.getElementById('celInput').addEventListener('input', function(e) {
// Use Celsius to convert
let cel = e.target.value;
// Convert to Farenheit
document.getElementById('celToFar').innerHTML = ( (cel*1.8) + 32).toFixed(2);
// Convert to Kelvin
document.getElementById('celToKel').innerHTML = ( (cel*1) + 273.15).toFixed(2);
});
// Convert Kelvin to...
document.getElementById('kelInput').addEventListener('input', function(e) {
// Use Kelvin to convert
let kel = e.target.value;
// Convert to Farenheit
document.getElementById('kelToFar').innerHTML = ( 1.8*((kel*1)-273) + 32).toFixed(2);
// Convert to Celsius
document.getElementById('kelToCel').innerHTML = ((kel*1)-273.15).toFixed(2);
});
This Pen doesn't use any external JavaScript resources.