{"id":107,"date":"2023-08-19T17:41:41","date_gmt":"2023-08-19T20:41:41","guid":{"rendered":"https:\/\/inteligenciaetecnologias.com.br\/?p=107"},"modified":"2023-11-09T12:33:37","modified_gmt":"2023-11-09T15:33:37","slug":"criando-uma-calculadora-de-juros-compostos-em-javascript-com-chatgpt","status":"publish","type":"post","link":"https:\/\/inteligenciaetecnologias.com.br\/index.php\/2023\/08\/19\/criando-uma-calculadora-de-juros-compostos-em-javascript-com-chatgpt\/","title":{"rendered":"Criando uma calculadora de juros compostos em Javascript com ChatGPT"},"content":{"rendered":"

A potencialidade do ChatGPT para a cria\u00e7\u00e3o de c\u00f3digo JavaScript \u00e9 uma \u00e1rea emocionante e revolucion\u00e1ria no desenvolvimento de software. Embora o ChatGPT n\u00e3o seja uma ferramenta de desenvolvimento de software em si, ele pode desempenhar um papel significativo em v\u00e1rias etapas do processo de codifica\u00e7\u00e3o, desde a gera\u00e7\u00e3o de c\u00f3digo at\u00e9 a solu\u00e7\u00e3o de problemas e aprimoramento de algoritmos.<\/p>\n

Neste artigo vamos fazer um simples calculadora de juros compostos. Vamos inserir o seguinte prompt “Crie uma calculadora de juros compostos\u00a0 em javascript e crie o css, js e html separados”. N\u00e3o vamos colocar muitos detalhes e ver como a intelig\u00eancia artificial trabalha. Para rodar o sistema vamos utilizar Replit dispon\u00edvel em\u00a0https:\/\/replit.com\/<\/a>.<\/p>\n

Os juros compostos desempenham um papel significativo no mundo das finan\u00e7as pessoais e empresariais. Entender como esses juros funcionam \u00e9 fundamental para tomar decis\u00f5es 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\u00eas partes distintas: a estrutura HTML, o estilo CSS e a funcionalidade JavaScript.<\/p>\n

Parte 1: Estrutura HTML<\/h3>\n

A primeira etapa \u00e9 criar a estrutura HTML b\u00e1sica para a nossa calculadora de juros compostos. Vamos come\u00e7ar definindo o formul\u00e1rio e os campos de entrada necess\u00e1rios. Aqui est\u00e1 o c\u00f3digo HTML:<\/p>\n

<!DOCTYPE html><\/span>
\n<html lang=”en”><\/span>
\n<head><\/span>
\n<meta charset=”UTF-8″><\/span>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/span>
\n<link rel=”stylesheet” href=”style.css”><\/span>
\n<title>Calculadora de Juros Compostos<\/title><\/span>
\n<\/head><\/span>
\n<body><\/span>
\n<div class=”container”><\/span>
\n<h1>Calculadora de Juros Compostos<\/h1><\/span>
\n<form id=”calculator-form”><\/span>
\n<div class=”form-group”><\/span>
\n<label for=”principal”>Montante Principal (P)<\/label><\/span>
\n<input type=”number” id=”principal” step=”any” required><\/span>
\n<\/div><\/span>
\n<div class=”form-group”><\/span>
\n<label for=”rate”>Taxa de Juros Anual (%)<\/label><\/span>
\n<input type=”number” id=”rate” step=”any” required><\/span>
\n<\/div><\/span>
\n<div class=”form-group”><\/span>
\n<label for=”time”>Per\u00edodo (Anos)<\/label><\/span>
\n<input type=”number” id=”time” step=”any” required><\/span>
\n<\/div><\/span>
\n<div class=”form-group”><\/span>
\n<label for=”result”>Montante Total<\/label><\/span>
\n<input type=”text” id=”result” readonly><\/span>
\n<\/div><\/span>
\n<button type=”submit”>Calcular<\/button><\/span>
\n<\/form><\/span>
\n<\/div><\/span>
\n<script src=”script.js”><\/script><\/span>
\n<\/body><\/span>
\n<\/html><\/span><\/p>\n

 <\/p>\n

Neste c\u00f3digo, criamos um formul\u00e1rio com campos para o montante principal (P), a taxa de juros anual (%) e o per\u00edodo em anos. Tamb\u00e9m inclu\u00edmos um campo de resultado que ser\u00e1 preenchido com o montante total calculado. Certifique-se de que o arquivo HTML referencie os arquivos CSS e JavaScript que criaremos nas pr\u00f3ximas etapas.<\/p>\n

Parte 2: Estilo CSS<\/h3>\n

Agora, vamos adicionar algum estilo \u00e0 nossa calculadora de juros compostos para torn\u00e1-la mais atraente e f\u00e1cil de usar. Foi criado um arquivo style.css<\/code> e adicione o seguinte c\u00f3digo CSS:<\/p>\n

\/* Reset de estilos *\/<\/span>
\n* {<\/span>
\nmargin: 0;<\/span>
\npadding: 0;<\/span>
\nbox-sizing: border-box;<\/span>
\n}<\/span><\/p>\n

\/* Estilos para o corpo da calculadora *\/<\/span>
\nbody {<\/span>
\nfont-family: Arial, sans-serif;<\/span>
\nbackground-color: #f2f2f2;<\/span>
\n}<\/span><\/p>\n

.container {<\/span>
\nmax-width: 400px;<\/span>
\nmargin: 0 auto;<\/span>
\npadding: 20px;<\/span>
\nbackground-color: #fff;<\/span>
\nborder-radius: 5px;<\/span>
\nbox-shadow: 0 0 10px rgba(0, 0, 0, 0.2);<\/span>
\n}<\/span><\/p>\n

h1 {<\/span>
\ntext-align: center;<\/span>
\nmargin-bottom: 20px;<\/span>
\ncolor: #333;<\/span>
\n}<\/span><\/p>\n

\/* Estilos para o formul\u00e1rio *\/<\/span>
\n.form-group {<\/span>
\nmargin-bottom: 15px;<\/span>
\n}<\/span><\/p>\n

label {<\/span>
\ndisplay: block;<\/span>
\nmargin-bottom: 5px;<\/span>
\ncolor: #333;<\/span>
\n}<\/span><\/p>\n

input[type=”number”], input[type=”text”] {<\/span>
\nwidth: 100%;<\/span>
\npadding: 10px;<\/span>
\nborder: 1px solid #ccc;<\/span>
\nborder-radius: 3px;<\/span>
\n}<\/span><\/p>\n

button {<\/span>
\nwidth: 100%;<\/span>
\npadding: 10px;<\/span>
\nbackground-color: #007BFF;<\/span>
\ncolor: #fff;<\/span>
\nborder: none;<\/span>
\nborder-radius: 3px;<\/span>
\ncursor: pointer;<\/span>
\n}<\/span><\/p>\n

button:hover {<\/span>
\nbackground-color: #0056b3;<\/span>
\n}<\/span><\/p>\n

Este CSS define o estilo b\u00e1sico para a calculadora, incluindo formata\u00e7\u00e3o de texto, margens e cores. Certifique-se de que o arquivo CSS esteja vinculado ao arquivo HTML.<\/p>\n

Parte 3: Funcionalidade JavaScript<\/h3>\n

Agora, vamos adicionar a funcionalidade \u00e0 nossa calculadora de juros compostos. Foi criado um arquivo script.js<\/code> e adicione o seguinte c\u00f3digo JavaScript:<\/p>\n

 <\/p>\n

document.addEventListener(“DOMContentLoaded”, function () {<\/span>
\nconst form = document.getElementById(“calculator-form”);<\/span>
\nform.addEventListener(“submit”, function (e) {<\/span>
\ne.preventDefault();<\/span><\/p>\n

const principal = parseFloat(document.getElementById(“principal”).value);<\/span>
\nconst rate = parseFloat(document.getElementById(“rate”).value);<\/span>
\nconst time = parseFloat(document.getElementById(“time”).value);<\/span><\/p>\n

const result = document.getElementById(“result”);<\/span><\/p>\n

if (isNaN(principal) || isNaN(rate) || isNaN(time)) {<\/span>
\nresult.value = “Preencha todos os campos corretamente”;<\/span>
\nreturn;<\/span>
\n}<\/span><\/p>\n

const montanteTotal = principal * Math.pow(1 + rate \/ 100, time);<\/span>
\nresult.value = montanteTotal.toFixed(2);<\/span>
\n});<\/span>
\n});<\/span><\/p>\n

Este c\u00f3digo JavaScript faz o seguinte:<\/p>\n

    \n
  1. Espera at\u00e9 que o documento esteja totalmente carregado antes de adicionar os ouvintes de eventos.<\/li>\n
  2. Captura os elementos do formul\u00e1rio, como o montante principal, a taxa de juros e o per\u00edodo.<\/li>\n
  3. Verifica se todos os campos foram preenchidos corretamente.<\/li>\n
  4. Calcula o montante total usando a f\u00f3rmula dos juros compostos.<\/li>\n
  5. Exibe o montante total calculado no campo de resultado.<\/li>\n<\/ol>\n

    Abaixo podemos visualizar o resultado do c\u00f3digo rodando com total sucesso.<\/p>\n

    \"\"<\/h3>\n

    Conclus\u00e3o<\/h3>\n

    Com esta combina\u00e7\u00e3o de HTML, CSS e JavaScript, criamos uma calculadora de juros compostos funcional. Agora, os usu\u00e1rios podem inserir o montante principal, a taxa de juros e o per\u00edodo para calcular o montante total ap\u00f3s o per\u00edodo especificado. Este projeto n\u00e3o apenas ajuda a entender os conceitos de juros compostos, mas tamb\u00e9m serve como uma introdu\u00e7\u00e3o pr\u00e1tica ao desenvolvimento web com JavaScript.<\/p>\n

    Voc\u00ea pode aprimorar ainda mais esta calculadora adicionando recursos adicionais, como a capacidade de escolher entre juros compostos anuais, mensais, etc., ou gr\u00e1ficos de visualiza\u00e7\u00e3o. O c\u00e9u \u00e9 o limite quando se trata de desenvolvimento web!<\/p>\n

    Assista ao v\u00eddeo<\/span>\u00a0abaixo para praticar.<\/p>\n