inflacao

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

Hide file tree

Showing 4 changed files with 299 additions and 0 deletions.
diff --git a/codigo/inflacao/inflacao.css b/codigo/inflacao/inflacao.css
@@ -0,0 +1,63 @@
+.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 .data-field {
+    width: 100%;
+    min-height: 3em;
+    margin-top: 10px;
+
+
+    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: 120px;
+}
+
+
+#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/inflacao/inflacao.html b/codigo/inflacao/inflacao.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="inflacao.css" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+  <title>Inflação</title>
+</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 mt-3 mx-2-auto">
+    <h2>Calculadora de inflação - IPCA</h2>
+    <P>Coloque o valor e o período para calcular a correção da inflação acumulada</P>
+    <div class="row ">
+        <div class="col-md-12">
+          <form id="formulario-calc-ipca" onsubmit="return false;" class="form">
+            <div class="row">
+              <div class="col-md-12 col-xs-12 mt-3 text-center">
+                <div id="dateStartField" class=" data-field">  
+
+                  <label for="dateStart" class="field-label">Período de início:</label>
+                  <div class="row">
+                  <div class="col-sm-6 col-xs-12">
+
+                    <select id="mesStart" placeholder="mm" class="input date-input mt-2">
+                      <option value="12">01</option>
+                      <option value="01">02</option>
+                      <option value="02">03</option>
+                      <option value="03">04</option>
+                      <option value="04">05</option>
+                      <option value="05">06</option>
+                      <option value="06">07</option>
+                      <option value="07">08</option>
+                      <option value="08">09</option>
+                      <option value="19">10</option>
+                      <option value="10">11</option>
+                      <option value="11">12</option>
+                    </select>
+                  </div>
+                  <div class="col-sm-6 col-xs-12">
+                    <input required id="anoStart" type="text" pattern="[0-9]{4}" placeholder="aaaa"
+                    class="input date-input mt-2" />
+                  </div>
+                    <span class="field-validation">
+                      <span class="validation-message"></span>
+                    </span>
+
+                </div>
+                </div>
+              </div>
+              <div class="col-md-12 col-xs-12 mt-3 text-center">
+                <div id="dateEndField" class=" data-field">
+                  <label for="dateEnd" class="field-label">Período de fim:</label>
+                  <div class="row">
+                    <div class="col-sm-6 col-xs-12">
+                    <select id="mesEnd"  class="input date-input mt-2">
+                      <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="anoEnd" type="text" pattern="[0-9]{4}" placeholder="aaaa"
+                    class="input date-input mt-2" />
+                  </div>
+                  <span class="field-validation">
+                    <span class="validation-message"></span>
+                  </span>
+                </div>
+                </div>
+              </div>
+              <div class="col-md-12 col-xs-12 mt-3 text-center">
+                <div id="valueField" class=" data-field">
+                  <label for="value" class="field-label">Valor na data inicial (<span id="valueCurrency">R$</span>)
+                  </label>
+                  <input required id="value" type="text" pattern="([0-9]{1,3}.)*[0-9]{1,3}(,[0-9]{2})?"
+                    placeholder="999,99" class="input number-input" />
+                </div>
+              </div>
+              <div class="col-md-12 col-xs-12 mt-4 text-center">
+                <div class=" data-field arrow">
+                  <button required id="bntCalcular" name="generate" class="btn ">Calcular</button>
+                </div>
+              </div>
+              <div class="col-md-12 col-xs-12 mt-4 text-center">
+                <div id="tela" class="data-field">
+
+                </div>
+              </div>
+            </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="inflacao.js" ;></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/codigo/inflacao/inflacao.js b/codigo/inflacao/inflacao.js
@@ -0,0 +1,92 @@
+window.onload = () => {
+
+    const btnCalcular = document.getElementById("bntCalcular");
+    const formulario = document.getElementById("formulario-calc-ipca");
+    const telaResultado = document.getElementById("tela");
+
+    btnCalcular.addEventListener('click', () => {
+        if (formulario.checkValidity()) {
+            inflacao();
+        } else {
+            alert("Por favor, preencha todos os campos obrigatórios.");
+        }
+    });
+
+
+        function inflacao () {
+
+        let mesInicio = document.getElementById("mesStart").value;
+        let anoInicio = parseInt(document.getElementById("anoStart").value);
+        let mesFim = document.getElementById("mesEnd").value;
+        let anoFim = document.getElementById("anoEnd").value;
+        let valor = parseFloat(formatarValor(document.getElementById("value").value));
+
+
+        if(mesInicio == "12"){
+            anoInicio--;
+        }
+
+        anoInicio = String(anoInicio)
+
+        let dataInicio = parseInt(anoInicio + mesInicio);
+        let dataFim = parseInt(anoFim + mesFim);
+
+        console.log(dataInicio)
+        console.log(dataFim)
+
+        if(dataInicio < 199406){
+            telaResultado.innerHTML = `<p style="color: red;">Estamos usando apenas a moeda real que entrou em circulação após 07/1994, qualquer valor anterior a essa data dará erro</p>`;
+        }
+        else
+            {
+            console.log(dataInicio)
+            console.log(dataFim)
+
+            let indiceinicio;
+            let indicefim;
+
+            // CÓDIGO QUE EU ACHO QUE VAI DAR CERTO:
+            fetch(`https://servicodados.ibge.gov.br/api/v1/conjunturais?d=s&user=ibge&t=1737&v=2266&p=${dataInicio}&ng=1(1)&c`)
+                    .then(res => res.json())
+                    .then(data => {
+                        indiceinicio = data[0].v;
+                        console.log('Índice de início:', indiceinicio);
+                    })
+                    .catch(error => {
+                        console.error('Erro ao obter o índice de início:', error);
+                        telaResultado.innerHTML = `<p style="color: red;">Erro ao obter o período inicial</p>`;
+                    });
+
+                    fetch(`https://servicodados.ibge.gov.br/api/v1/conjunturais?d=s&user=ibge&t=1737&v=2266&p=${dataFim}&ng=1(1)&c`)
+                    .then(res => res.json())
+                    .then(data => {
+                        indicefim = data[0].v;
+                        console.log('Índice de fim:', indicefim);
+                        if (indiceinicio && indicefim) {
+                            const ipca = calcularIPCA(indiceinicio, indicefim, valor);
+                            console.log("o calculo de ipca é: " + ipca);
+                            telaResultado.innerHTML = `<p>O valor corrigido pela inflação é: <strong>R$ ${ipca.toFixed(2)}</strong></p>`;
+                        } else {
+                            telaResultado.innerHTML = `<p style="color: red;">Erro ao obter os índices necessários para o cálculo. Tente novamente</p>`;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Erro ao obter o índice de fim:', error);
+                        telaResultado.innerHTML = `<p style="color: red;">Erro ao obter o período final</p>`;
+                    });
+
+
+            console.log("o calculo de ipca é: " +calcularIPCA(indiceinicio,indicefim,valor))
+        }
+
+    }
+
+    function calcularIPCA(i1,i2,v){
+        return v*(i2/i1);
+    }
+
+    function formatarValor(valor) {
+        return valor.replace(/\./g, '').replace(',', '.');
+    }
+
+}
diff --git a/codigo/inflacao/logo.png b/codigo/inflacao/logo.png