A Pen by David Pinto on CodePen.
Created
April 2, 2021 12:55
-
-
Save davidpinto1979/60e01787d98061dd12bb396aee647a3a to your computer and use it in GitHub Desktop.
Conversor de temperaturas v1.0
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title> | |
Imersão Dev - Aula 01 | |
</title> | |
</head> | |
<body> | |
<div class="container"> | |
<h1 class="page-title"> | |
Conversor de temperaturas | |
</h1> | |
<p class="page-subtitle"> | |
Converter Fahreneit para Celsius | |
</p> | |
<img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/logo-imersao-conversor-de-moedas.svg" class="page-logo" alt=""> | |
<p> | |
<hr> | |
</p> | |
<form> | |
<table id="tabelaCelsFahr"> | |
<thead> | |
<tr> | |
<th colspan="2">Fahrenheit -> Celsius</th> | |
</tr> | |
</thead> | |
<tr> | |
<td><label>Fahrenheit</label></td> | |
<td><input id="idFahr" type="text" /></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td><input id="botaoCalcular" type="button" value="Calcular" onclick="CelsFarh()" class="button" /></td> | |
</tr> | |
<tr> | |
<td><label>Celsius</label></td> | |
<td> | |
<p id="pCels"></p> | |
</td> | |
</tr> | |
<tr> | |
<td></td> | |
<td><input id="botaoNovo" input type="reset" value="Novo Cálculo" class="button" /></td> | |
</tr> | |
</table> | |
</form> | |
</div> | |
<a href="https://alura.com.br/" target="_blank"> | |
<img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"> | |
</a> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function CelsFarh() { | |
// 1.Declarar variaveis | |
var fahr, cels; | |
// 2.Atribuir valores às variaveis | |
fhar = document.getElementById("idFahr").value; | |
// 3. Ver se os inputs sao numeros | |
if (isNaN(fhar) || fhar == "") { | |
cels = "ERRO! Introduza número."; | |
} | |
// 3.1 Calcular resultado | |
else { | |
cels = (parseInt(fhar) - 32) * 0.5556; | |
cels = cels.toFixed(2); | |
} | |
// 3.2 Usar variavel resultado para erro | |
// 4. Escrever o resultado no paragrafo | |
document.getElementById("pCels").innerHTML = cels; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: "Roboto Mono", monospace; | |
min-height: 400px; | |
background-image: url("https://images.unsplash.com/photo-1560977501-7cb367eccebe?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1850&q=80"); | |
background-color: #000000; | |
background-size: 100vh; | |
background-position: center bottom; | |
background-repeat: no-repeat; | |
} | |
.container { | |
text-align: center; | |
padding: 20px; | |
height: 100vh; | |
} | |
.page-title { | |
color: #ffffff; | |
margin: 0 0 5px; | |
} | |
.page-subtitle { | |
color: #ffffff; | |
margin-top: 5px; | |
} | |
.page-logo { | |
width: 200px; | |
} | |
.alura-logo { | |
width: 40px; | |
position: absolute; | |
top: 10px; | |
right: 10px; | |
} | |
#tabelaCelsFahr { | |
margin-left: auto; | |
margin-right: auto; | |
border-collapse: collapse; | |
border: 2px solid black; | |
width: 300px; | |
} | |
#tabelaCelsFahr tr { | |
height: 30px; | |
} | |
/*Título tabela: tipo letra, tamanho, alinhamento*/ | |
#tabelaCelsFahr thead { | |
/*font-family: Verdana;*/ | |
font-size: 20px; | |
text-align: center; | |
color: white; | |
background-color: black; | |
font-weight: bold; | |
} | |
/*1ª coluna: tipo letra, tamanho, cor da letra e do fundo*/ | |
#tabelaCelsFahr td:nth-child(1) { | |
/*font-family: Arial;*/ | |
font-size: 16px; | |
color: white; | |
background-color: black; | |
text-align: center; | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
#tabelaCelsFahr input[type="text"] { | |
width: 192px; | |
} | |
#tabelaCelsFahr .button { | |
border: 1px solid black; | |
padding: 10px 15px; | |
text-align: center; | |
font-size: 12px; | |
transition-duration: 0.4s; | |
width: 200px; | |
} | |
#tabelaCelsFahr .button:hover { | |
background-color: deepskyblue; | |
font-weight: bold; | |
} | |
#pCels { | |
background-color: white; | |
font-weight: bold; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment