# 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 JavascriptThis simple code give us convert Farenheit to Celsius degrees.

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

#### Technologies

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

<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>

<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>
``````
``````
* {
margin: 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%;
transition: border-color .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%;
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;
text-align: center;
margin: 5% 1%;
width: calc(100%/1 - 2*.10rem - 2*1%);
}
``````
``````
function toCelsius(f) {
return ((5/9) * (f-32)).toFixed(2);
}

function getCelsiusDeg() {
var farenheit = document.getElementsByClassName("deg")[0].value;
if(isNaN(farenheit) === true) {
} else if (farenheit === "") {