Write an app that converts Farenheit to Celcius and back.
This project is part of the Vanilla JS Academy.
Write an app that converts Farenheit to Celcius and back.
This project is part of the Vanilla JS Academy.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Project Template</title> | |
<style type="text/css"> | |
body { | |
margin-left: auto; | |
margin-right: auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
/** | |
* Add box sizing to everything | |
* @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/ | |
*/ | |
*, | |
*:before, | |
*:after { | |
box-sizing: border-box; | |
} | |
/** | |
* Layout | |
*/ | |
.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; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Temperature 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> | |
<script> | |
// Project code... | |
</script> | |
</body> | |
</html> |