A potencialidade do ChatGPT para a criação de código JavaScript é uma área emocionante e revolucionária no desenvolvimento de software. Embora o ChatGPT não seja uma ferramenta de desenvolvimento de software em si, ele pode desempenhar um papel significativo em várias etapas do processo de codificação, desde a geração de código até a solução de problemas e aprimoramento de algoritmos.
Neste artigo vamos fazer um simples calculadora de juros compostos. Vamos inserir o seguinte prompt “Crie uma calculadora de juros compostos em javascript e crie o css, js e html separados”. Não vamos colocar muitos detalhes e ver como a inteligência artificial trabalha. Para rodar o sistema vamos utilizar Replit disponível em https://replit.com/.
Os juros compostos desempenham um papel significativo no mundo das finanças pessoais e empresariais. Entender como esses juros funcionam é fundamental para tomar decisões financeiras informadas e planejar o futuro. Neste artigo, vamos explorar como criar uma calculadora de juros compostos usando JavaScript, HTML e CSS, com a ajuda do ChatGPT. Vamos dividir esse projeto em três partes distintas: a estrutura HTML, o estilo CSS e a funcionalidade JavaScript.
Parte 1: Estrutura HTML
A primeira etapa é criar a estrutura HTML básica para a nossa calculadora de juros compostos. Vamos começar definindo o formulário e os campos de entrada necessários. Aqui está o código HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Calculadora de Juros Compostos</title>
</head>
<body>
<div class=”container”>
<h1>Calculadora de Juros Compostos</h1>
<form id=”calculator-form”>
<div class=”form-group”>
<label for=”principal”>Montante Principal (P)</label>
<input type=”number” id=”principal” step=”any” required>
</div>
<div class=”form-group”>
<label for=”rate”>Taxa de Juros Anual (%)</label>
<input type=”number” id=”rate” step=”any” required>
</div>
<div class=”form-group”>
<label for=”time”>Período (Anos)</label>
<input type=”number” id=”time” step=”any” required>
</div>
<div class=”form-group”>
<label for=”result”>Montante Total</label>
<input type=”text” id=”result” readonly>
</div>
<button type=”submit”>Calcular</button>
</form>
</div>
<script src=”script.js”></script>
</body>
</html>
Neste código, criamos um formulário com campos para o montante principal (P), a taxa de juros anual (%) e o período em anos. Também incluímos um campo de resultado que será preenchido com o montante total calculado. Certifique-se de que o arquivo HTML referencie os arquivos CSS e JavaScript que criaremos nas próximas etapas.
Parte 2: Estilo CSS
Agora, vamos adicionar algum estilo à nossa calculadora de juros compostos para torná-la mais atraente e fácil de usar. Foi criado um arquivo style.css e adicione o seguinte código CSS:
/* Reset de estilos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Estilos para o corpo da calculadora */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
/* Estilos para o formulário */
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #333;
}
input[type=”number”], input[type=”text”] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Este CSS define o estilo básico para a calculadora, incluindo formatação de texto, margens e cores. Certifique-se de que o arquivo CSS esteja vinculado ao arquivo HTML.
Parte 3: Funcionalidade JavaScript
Agora, vamos adicionar a funcionalidade à nossa calculadora de juros compostos. Foi criado um arquivo script.js e adicione o seguinte código JavaScript:
document.addEventListener(“DOMContentLoaded”, function () {
const form = document.getElementById(“calculator-form”);
form.addEventListener(“submit”, function (e) {
e.preventDefault();
const principal = parseFloat(document.getElementById(“principal”).value);
const rate = parseFloat(document.getElementById(“rate”).value);
const time = parseFloat(document.getElementById(“time”).value);
const result = document.getElementById(“result”);
if (isNaN(principal) || isNaN(rate) || isNaN(time)) {
result.value = “Preencha todos os campos corretamente”;
return;
}
const montanteTotal = principal * Math.pow(1 + rate / 100, time);
result.value = montanteTotal.toFixed(2);
});
});
Este código JavaScript faz o seguinte:
- Espera até que o documento esteja totalmente carregado antes de adicionar os ouvintes de eventos.
- Captura os elementos do formulário, como o montante principal, a taxa de juros e o período.
- Verifica se todos os campos foram preenchidos corretamente.
- Calcula o montante total usando a fórmula dos juros compostos.
- Exibe o montante total calculado no campo de resultado.
Abaixo podemos visualizar o resultado do código rodando com total sucesso.
Conclusão
Com esta combinação de HTML, CSS e JavaScript, criamos uma calculadora de juros compostos funcional. Agora, os usuários podem inserir o montante principal, a taxa de juros e o período para calcular o montante total após o período especificado. Este projeto não apenas ajuda a entender os conceitos de juros compostos, mas também serve como uma introdução prática ao desenvolvimento web com JavaScript.
Você pode aprimorar ainda mais esta calculadora adicionando recursos adicionais, como a capacidade de escolher entre juros compostos anuais, mensais, etc., ou gráficos de visualização. O céu é o limite quando se trata de desenvolvimento web!
Assista ao vídeo abaixo para praticar.
Quer saber mais como usar o ChatGPT ? Se você é um professor acesse o link abaixo.
Ebook ChatGPT para professores: Guia prático para uso em sala de aula
Quer aprender mais sobre tecnologias e tecnologias na educação e metodologias ativas? Segue algumas sugestões de livros de autores da área.
Tecnologias e Metodologias Digitais na Educação