Conversor de Temperatura:
Aprenda a criar um conversor de temperatura interativo com este tutorial fácil de seguir usando HTML, CSS e JavaScript.
Este conversor de temperatura permite a conversão entre as escalas Celsius e Fahrenheit, proporcionando uma interface simples e intuitiva para o utilizador.
Ele possui dois campos de entrada: um para a temperatura em Celsius e outro para a temperatura em Fahrenheit. Com base nos valores inseridos, a conversão é realizada ao clicar no botão "Converter", exibindo o resultado nos campos de saída correspondentes.
O botão "Reiniciar" limpa todos os campos, permitindo novos cálculos. O design é moderno, com um esquema de cores em gradiente azul e laranja, e os campos e botões são estilizados para uma melhor usabilidade.
Veja o Conversor de Temperatura em funcionamento neste link. Conversor de Temperatura.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conversor de Temperatura</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>CONVERSÃO DE GRAU</h1>
<div class="converter">
<label>De Celsius:</label>
<input type="number" id="celsiusInput" placeholder="Valor da temperatura em Celsius">
<label>Para Fahrenheit:</label>
<input type="text" id="fahrenheitOutput" readonly>
<label>De Fahrenheit:</label>
<input type="number" id="fahrenheitInput" placeholder="Valor da temperatura em Fahrenheit">
<label>Para Celsius:</label>
<input type="text" id="celsiusOutput" readonly>
<button onclick="converter()">Converter</button>
<button onclick="reiniciar()">Reiniciar</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #3a7bd5, #00d2ff);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.converter {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
margin-bottom: 5px;
font-weight: bold;
}
input {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
background-color: #ff9800;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #3a7bd5;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
function converter() {
// Converter Celsius para Fahrenheit
let celsius = parseFloat(document
.getElementById('celsiusInput')
.value);
let fahrenheitFromCelsius = (celsius *
9 / 5) + 32;
document.getElementById(
'fahrenheitOutput').value =
fahrenheitFromCelsius.toFixed(2);
// Converter Fahrenheit para Celsius
let fahrenheit = parseFloat(document
.getElementById('fahrenheitInput')
.value);
let celsiusFromFahrenheit = (
fahrenheit - 32) * 5 / 9;
document.getElementById(
'celsiusOutput').value =
celsiusFromFahrenheit.toFixed(2);
}
function reiniciar() {
// Limpar todos os campos de input e output
document.getElementById(
'celsiusInput').value = '';
document.getElementById(
'fahrenheitOutput').value = '';
document.getElementById(
'fahrenheitInput').value = '';
document.getElementById(
'celsiusOutput').value = '';
}
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!