titulo

ICEI-PUCMinas-PSG-SI-TI · Jun 24, 2024 · 24301ba · 24301ba
1 parent b83c9b8
commit 24301ba
Show file tree

Hide file tree

Showing 4 changed files with 219 additions and 0 deletions.
diff --git a/codigo/calculadoraTitulo/calculadoraTitulo.css b/codigo/calculadoraTitulo/calculadoraTitulo.css
@@ -0,0 +1,58 @@
+  html {
+    height: 100%;
+    width: 100%;
+  }
+
+  .navbar {
+    border-bottom: 1px solid;
+  }
+
+
+
+  .nav-item {
+    padding-left: 30px;
+  }
+
+  #bntCalcular{
+    background-color: rgb(199, 199, 199);
+    border: 1px solid;
+    border-radius: 5px;
+    width: 90px;
+    height: 40px;
+  }
+
+  .form {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  }
+
+
+  .form .input {
+      background-color: #EFEFEF;
+      border-color: #ACAAAC;
+      border-style: solid;
+      border-width: 1px;
+      min-height: 50px;
+      border-radius: 5px;
+      font-size: 17px;
+      padding: 10px 13px;
+      max-width: 100px;
+  }
+
+
+  #container-footer {
+    margin-top: 25px;
+    padding: 15px;
+    border-top: 1px solid;
+  }
+
+  #container-footer > a {
+      text-decoration: none;
+      padding-left: 15px;
+      color: black;
+  }
+
+  img{
+    width: 50px;
+  }
diff --git a/codigo/calculadoraTitulo/calculadoraTitulo.html b/codigo/calculadoraTitulo/calculadoraTitulo.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Calculadora de título</title>
+  <link href="calculadoraTitulo.css" rel="stylesheet" type="text/css" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light bb-1">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#"><img src="logo.png" alt="Capital certo"></a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Página Inicial</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Perguntas Frequentes</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Contato</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col">
+          <h2>Calculadora de título </h2>
+          <p>Através de uma simulação com a nossa calculadora, você pode estimar a rentabilidade dos títulos, de acordo com o valor que está planejando investir.</p>
+          <p>O cálculo não considera a inflação.</p>
+          <form id="formularioTitulo" class="form">
+            <label for="rendimento">Rendimento ao ano do título em %:</label>
+            <input required id="rendimento" type="text" class="input" pattern="([0-9]{1,3}.)*[0-9]{1,3}(,[0-9]{2})?" placeholder="Ex:6,5" /> <br>
+            <label for="montante">Montante a ser investido:</label>
+            <input required id="montante" type="text" class="input" pattern="([0-9]{1,3}.)*[0-9]{1,3}(,[0-9]{2})?" placeholder="Ex:900,00" /> <br>
+            <label for="datainicio">Data do investimento:</label>
+            <div class="row">
+              <div class="col-sm-6 col-xs-12 datainicio mb-4">
+                <select id="mesinicio" class="input">
+                  <option value="01">01</option>
+                  <option value="02">02</option>
+                  <option value="03">03</option>
+                  <option value="04">04</option>
+                  <option value="05">05</option>
+                  <option value="06">06</option>
+                  <option value="07">07</option>
+                  <option value="08">08</option>
+                  <option value="09">09</option>
+                  <option value="10">10</option>
+                  <option value="11">11</option>
+                  <option value="12">12</option>
+                </select>
+              </div>
+              <div class="col-sm-6 col-xs-12">
+                <input required id="anoinicio" type="text" pattern="[0-9]{4}" placeholder="aaaa" class="input" />
+              </div>
+            </div>
+
+            <label for="dataRetirada">Data de retirada:</label>
+            <div class="row">
+              <div class="col-sm-6 col-xs-12 dataRetirada mb-4">
+                <select id="mesRetirada" class="input">
+                  <option value="01">01</option>
+                  <option value="02">02</option>
+                  <option value="03">03</option>
+                  <option value="04">04</option>
+                  <option value="05">05</option>
+                  <option value="06">06</option>
+                  <option value="07">07</option>
+                  <option value="08">08</option>
+                  <option value="09">09</option>
+                  <option value="10">10</option>
+                  <option value="11">11</option>
+                  <option value="12">12</option>
+                </select>
+              </div>
+              <div class="col-sm-6 col-xs-12">
+                <input required id="anoRetirada" type="text" pattern="[0-9]{4}" placeholder="aaaa" class="input" />
+              </div>
+            </div>
+
+
+            <button required id="bntCalcular" name="generate" class="btn">Calcular</button>
+
+            <div id="tela">
+
+            </div>
+
+          </form>
+        </div>
+      </div>
+    </div>
+  </main>
+  <footer >
+    <div class="container-fluid" id="container-footer">
+      <a href="#"> &copy Todos os direitos reservados</a>
+    </div>
+  </footer>
+  <script src="calculadoraTitulo.js" ;></script>
+</body>
+
+</html>
diff --git a/codigo/calculadoraTitulo/calculadoraTitulo.js b/codigo/calculadoraTitulo/calculadoraTitulo.js
@@ -0,0 +1,42 @@
+window.onload = () => {
+    const btnCalcular = document.getElementById("bntCalcular");
+    const formulario = document.getElementById("formularioTitulo");
+    const telaResultado = document.getElementById("tela");
+
+    btnCalcular.addEventListener('click', (event) => {
+        event.preventDefault(); 
+        if (formulario.checkValidity()) {
+            calculoDeTitulo();
+        } else {
+            alert("Por favor, preencha corretamente todos os campos obrigatórios.");
+        }
+    });
+
+    function calculoDeTitulo() {
+        let rendimento = parseFloat(formatarValor(document.getElementById("rendimento").value));
+        let montante = parseFloat(formatarValor(document.getElementById("montante").value));
+        let anoRetirada = parseInt(document.getElementById("anoRetirada").value) - 1;
+        let mesRetirada = parseInt(document.getElementById("mesRetirada").value) - 1;
+        let mesinicio = parseInt(document.getElementById("mesinicio").value) - 1;
+        let anoinicio = parseInt(document.getElementById("anoinicio").value);
+        let valor = montante;
+
+        let mesPorRendimento = 1 + (rendimento / 1200);
+
+        if (anoRetirada < anoinicio) {
+            telaResultado.innerHTML = `<p>Erro ano de retirada é menor que o ano do investimento</p>`;
+        } else {
+            let Periodo = ((anoRetirada - anoinicio) * 12) + (12 - mesinicio) +  mesRetirada;
+
+            for (let i = 0; i < Periodo; i++) {
+                valor *= mesPorRendimento;
+            }
+
+            telaResultado.innerHTML = `<p>Valor bruto do resgate é de: <strong>R$ ${valor.toFixed(2)}</strong></p>`;
+        }
+    }
+
+    function formatarValor(valor) {
+        return valor.replace(/\./g, '').replace(',', '.');
+    }
+};
diff --git a/codigo/calculadoraTitulo/logo.png b/codigo/calculadoraTitulo/logo.png