Degree converter (Farenheit to Celsius)

In this example below you will see how to do a Degree converter (Farenheit to Celsius) with some HTML / CSS and Javascript

This simple code give us convert Farenheit to Celsius degrees.

Thumbnail
This awesome code was written by iMitsu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright iMitsu ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Degree converter (Farenheit to Celsius)</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main class="container">
  <section class="wrapper">
    <input type="text" class="deg textfield" placeholder="Enter farenheit degree here" required="true" />

    <button type="submit" class="btn-convert" onclick="getCelsiusDeg()">Convert</button>

    <p class="output">Celsius degree: 0°</p>
  </section>
</main>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/iMitsu/degree-converter-farenheit-to-celsius-ABnKe */
* {
    margin: 0;
    padding: 0;
}

body, html {
  font-family: segoe ui;
  font-size: 100%;
  height: 100%;
}

.container {
  background-image: url(https://subtlepatterns.com/patterns/ricepaper.png);
  display: block;
  min-height: 100%;
  overflow: auto;
}

.wrapper {
  display: block;
  margin: 2% auto;
  max-width: 470px;
  min-width: 470px;
}

.textfield {
    background-color: #fff;
    border: 1px solid #aaa;
    display: inline-block;
    float: left;
    font-family: segoe ui;
    margin: 2.5% 1%;
    padding: .5rem .5rem;
    transition: border-color .35s linear,
    box-shadow .35s linear;
    width: calc(100%/1.5 - 2*1% - 2*.5rem - 2*1px);
}

.textfield:focus {
    border: 1px solid #00bbff;
    box-shadow: 0px 0px 9px 0px #00bbff;
    outline: 0;
}

.btn-convert {
    background-color: #ffd700;
    border: 1px solid #ffd700;
    color: #777;
    cursor: pointer;
    display: inline-block;
    float: left;
    font-family: segoe ui;
    margin: 2.5% 1%;
    padding: .5rem .25rem;
    width: calc(100%/3 - 2*1% - 2*.25rem - 2*1px);
}

.btn-convert:hover {
    background-color: #dcdcdc;
    border: 1px solid #dcdcdc;
}

.btn-convert:focus {
    outline: none;
}

.output {
    background-color: #00bbff;
    box-sizing: border-box;
    clear: both;
    color: #fff;
    display: inline-block;
    font-style: oblique;
    font-size: 1.5rem;
    padding: .10rem;
    text-align: center;
    margin: 5% 1%;
    width: calc(100%/1 - 2*.10rem - 2*1%);
}

/*Downloaded from https://www.codeseek.co/iMitsu/degree-converter-farenheit-to-celsius-ABnKe */
function toCelsius(f) {
    return ((5/9) * (f-32)).toFixed(2);
}

function getCelsiusDeg() {
    var farenheit = document.getElementsByClassName("deg")[0].value;
    if(isNaN(farenheit) === true) {
      alert("El valor ingresado debe ser numérico");
    } else if (farenheit === "") {
        alert("Ingrese un valor en grados farenheit.");
    } else {
      var output = document.getElementsByClassName("output")[0];
      output.innerHTML = "Grados celsius: "+toCelsius(farenheit)+"°";
    }
}

Comments