<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">&deg;F</div>
        <div class="input-group-addon result-a"><span id="farToCel"></span> &deg;C</div>
        <div class="input-group-addon result-b"><span id="farToKel"></span> &deg;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">&deg;C</div>
        <div class="input-group-addon result-a"><span id="celToFar"></span> &deg;F</div>
        <div class="input-group-addon result-b"><span id="celToKel"></span> &deg;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">&deg;K</div>
        <div class="input-group-addon result-a"><span id="kelToFar"></span> &deg;F</div>
        <div class="input-group-addon result-b"><span id="kelToCel"></span> &deg;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> &amp; <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);
  
});