JSFiddle - React, Tailwind, and code Playground

by Simplybj

HTML

<form action="" class="svj-form">
  <div class="form-group">
    <label for="inputNumber">
      Enter temprature in Ferenheit
    </label>
    <input type="numver" id="inputNumber" class="btn-primary" placeholder="Type here">
  </div>
  
  <div class="btn-group">
    <button type="button" id="btnConvert"> 
      Convert
    </button>
    <button type="button" id="btnClear">
      Clear
    </button>
  </div>
  
  <div class="form-group">
    <input type="text" id="textCelsius">
  </div>
</form>

SCSS

.svj-form {
  text-align: center;
  .form-group {
    margin-bottom: 20px;
    label {
      display: block;
      margin-bottom: 12px;
    }
    input {
      display: block;
      height: 44px;
      padding: 0 15px;
      width: 100%;
    }
  }
  
  .btn-group {
    margin: 30px 0;
  }
}

JavaScript

function toCelsius(f) {
	return (5/9) * (f - 32);
}


document.getElementById("btnConvert").onclick = (function() {
	var x = document.getElementById("inputNumber").value;
	document.getElementById("textCelsius").value = toCelsius(x);
});

document.getElementById("btnClear").onclick = (function() {
	document.getElementsByClassName("btn-primary").value = "";
  document.getElementById("textCelsius").value = "";
});