Skip to content

Instantly share code, notes, and snippets.

@cferdinandi cferdinandi/README.md
Last active May 5, 2019

Embed
What would you like to do?
Temperature converter app template from https://learnvanillajs.com.

Project Details

Write an app that converts Farenheit to Celcius and back.

Need help?

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.