<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Temperature Converter App</title>
</head>
<body>
<h1>Farenheit/Celcius Calculator</h1>

<div class="row">
    <div class="grid grid-content">
        <input type="number" name="farenheit" id="farenheit" value="32">
        <label for="farenheit">Farenheit</label>
    </div>
    <div class="grid grid-equals padding text-center"><span class="font-big">=</span></div>
    <div class="grid grid-content">
        <input type="number" name="celcius" id="celcius" value="0">
        <label for="celcius">Celcius</label>
    </div>
</div>
</body>
</html>

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 112.5%;
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
    width: 88%;
    background-color: #DA4A91;
}
.row {
    margin-left: -1.4%;
    margin-right: -1.4%;
}
.grid,
.grid {
    float: left;
    padding-left: 1.4%;
    padding-right: 1.4%;
    width: 100%;
}
.grid-content {
    width: 45%;
}
.grid-equals {
    width: 10%;
}
.row:before,
.row:after {
    display: table;
    content: " ";
}
.row:after {
    clear: both;
}
/**
 * Forms
 */
input {
    font-size: 1.2em;
    padding: 0.5em 1em;
    width: 100%;
}
label {
    background-color: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-top: 0;
    display: block;
    font-weight: bold;
    padding: 0.25em 0.5em;
    width: 100%;
}
/**
 * Utilities
 */
.font-big {
    font-size: 1.2em;
}
.padding {
    padding: 0.5em 0;
}
.text-center {
    text-align: center;
}


















html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}


// Variables
    var farenheit = document.querySelector('#farenheit');
    var celcius = document.querySelector('#celcius');
    // Convert temp
    var convert = function (temp, toFarenheit) {
        if (toFarenheit) {
            return Math.round((parseInt(temp, 10) * 9/5) + 32);
        } else {
            return Math.round((parseInt(temp, 10) - 32) * 5/9);
        }
    };
    // Listen for input changes
    document.addEventListener('input', function (event) {
        if (event.target.value.length < 1) return;
        if (event.target.id === 'farenheit') {
            celcius.value = convert(event.target.value);
        } else {
            farenheit.value = convert(event.target.value, true);
        }
    }, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.