Merge pull request #12 from Rafael-M-Silva/Versão-2.2

fix: bug cep corrigido, agora está pegando todos os valores e passand…

index.html

@@ -484,7 +484,7 @@ <h3>Resumo</h3>
                             <p class="desconto">Desconto <span>-R$ 10,00</span></p>
                             <p class="total-compra">Total da compra <span>R$ 27,00</span></p>
                         </div>
-                        <input class="botao-comprar" type="button" value="Comprar">
+                        <input id="finalizar-pedido" class="botao-comprar" type="button" value="Comprar">
                     </div>
                 </div>
             </div>

js/script.js

@@ -1,3 +1,10 @@
+let dadosUsuarioCep = {
+  localidade: ``,
+  bairro: ``,
+  logradouro: ``,
+  numero: ``
+}
+
 const modalOn = () => {
   const modal = document.querySelector('.modal-off')
   const navbar = document.querySelector('.nav-bar')
@@ -23,26 +30,49 @@ const buscaCep = () => {
       return res.json();
     })
     .then((data) => {
-      /* criar um objeto global e depois passar aqui para pegar os dados do cliente
-       */
+      const { localidade, bairro, logradouro } = data;
 
+      dadosUsuarioCep.localidade = localidade;
+      dadosUsuarioCep.bairro = bairro;
+      dadosUsuarioCep.logradouro = logradouro;
 
-      /* falta pegar o numero da casa */
       resumoCep.innerHTML = `
-        <p class="cidade">${data.localidade}</p>
-        <p class="bairro">${data.bairro}</p>
-        <p class="rua">${data.logradouro} <span class="numero"><input class='input-style pequeno' placeholder="Nº" type="number" id="numero"></span></p> 
+        <p class="cidade">${localidade}</p>
+        <p class="bairro">${bairro}</p>
+        <p class="rua">${logradouro} <span class="numero"><input class='input-style pequeno' placeholder="Nº" type="number" id="numero"></span></p> 
       `;
+
+      document.querySelector('#numero').addEventListener('input', pegarNumeroCasa)
     })
     .catch((error) => {
       console.error(error);
       resumoCep.innerHTML = '<h3>CEP Inválido!</h3>'
     });
 }
 
+const pegarNumeroCasa = (event) => {
+  dadosUsuarioCep.numero = event.target.value
+}
+
+const finalizarPedido = () => {
+  alert(`
+  Pedido Finalizado com Sucesso!
+  =========================================
+  Cidade: ${dadosUsuarioCep.localidade}
+  bairro: ${dadosUsuarioCep.bairro}
+  rua: ${dadosUsuarioCep.logradouro} n: ${dadosUsuarioCep.numero}
+  =========================================
+
+  Volte sempre :)
+  `)
+}
+
 
 const carrinhoCompra = document.querySelector('.carrinho-compras')
 carrinhoCompra.addEventListener('click', modalOn)
 
 const botaoCep = document.querySelector('#botao-cep')
-botaoCep.addEventListener('click', buscaCep)
+botaoCep.addEventListener('click', buscaCep)
+
+const botaoFinalizarPedido = document.querySelector('#finalizar-pedido')
+botaoFinalizarPedido.addEventListener('click', finalizarPedido)