Finalizado desafio validação de CPF

index.html

@@ -34,18 +34,23 @@ <h1 class="page-header">Validador de CPF</h1>
             <div class="form-group">
                 <div class="input-group input-group-lg">
                     <span class="input-group-addon" id="sizing-addon1">CPF</span>
+                    <!--Usar o id mostrar pro html que ele tem um identificador nesse componente-->
                     <input type="text" class="form-control" placeholder="Digite o cpf para validação ..."
-                        aria-describedby="sizing-addon1">
+                        aria-describedby="sizing-addon1" id="cpf_digitado">
                 </div>
                 <small class="form-text text-muted">Digite somente numeros</small>
             </div>
-            <button type="button" class="btn btn-info">Validar !</button>
+            <!--Criar evento onclick para chamar a função de validação-->
+            <button type="button" class="btn btn-info" onclick="validacao()">Validar !</button>
         </form>
     </div>
     <div class="container page-header">
+        <!--Alertas associados a função validacao()-->
+        <!--Se validar o cpf-->
         <div id="success" class="alert alert-success" style="display: none;" role="alert">
             <strong>Oba!</strong> Seu CPF é válido
         </div>
+         <!--Se não validar o cpf-->
         <div id="error" class="alert alert-danger" style="display: none;" role="alert">
             <strong>Ops!</strong> Seu CPF não é válido
         </div>
@@ -60,6 +65,7 @@ <h1 class="page-header">Validador de CPF</h1>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"
     integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
 
-
+<!--Conectar o html ao JavaScript-->
+<script src="./script.js"></script>
 
 </html>

script.js

@@ -0,0 +1,96 @@
+//Confirmar conexão entre o .html e .js
+console.log("JavaScript Carregado")
+
+function validaCPF(cpf){
+    console.log("CPF Length " + cpf.length)
+
+    if(cpf.length != 11){
+        //length mostra quantos caracteres tem na string
+
+        return false
+
+    } else { //se tiver 11 caracteres, verificar a validade do cpf
+        var numeros = cpf.substring(0,9) 
+            //substring percorre todo texto
+            //desde caractere 0 até 9
+        var digitos = cpf.substring(9)
+            //substring percorre todo texto
+            //a patir do caractere 9
+            //captura os ultimos dois numeros, digito validador
+        console.log('Números ' + numeros)
+        console.log('Dígitos ' + digitos)
+                //percorrer o texto de trás pra frente
+                //ao tratar uma string como posições de uma lista..
+                //nós conseguimos manipular ela
+
+
+        //validação do meu primeiro digito
+        var soma = 0
+
+            for(var i=10;i>1;i--){
+                soma += numeros.charAt(10-i)*i
+                    // charAT() função que busca cada..
+                    // posição da lista da string 
+                    // e retorna a posição da string na lista
+            }
+            console.log('Soma primeiro digito ' + soma)
+
+            var resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11)
+                //operador ternário teste ? verdadeiro : falso
+                //é possível misturar operadores aritméticos..
+                //e relacionais para simplificar
+
+            if(resultado != digitos.charAt(0)){
+                return false
+            }
+            console.log(digitos.toString().charAt(0) + ' é a primeira posição da var digitos')
+
+
+        //validação do segundo digito
+        soma = 0
+        numeros = cpf.substring(0,10)
+
+            for(var k=11;k>1;k--){
+                soma += numeros.charAt(11-k)*k
+            }
+            console.log('Soma segundo digito ' + soma)
+
+            resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11)
+
+            if(resultado != digitos.charAt(1)){
+                return false
+            }
+            console.log(digitos.toString().charAt(1) + ' é a segunda posição da var digitos')
+
+            return true
+    }
+}
+
+function validacao(){
+    console.log("Iniciando Validação do CPF")
+
+    document.getElementById("success").style.display = 'none'
+    document.getElementById("error").style.display = 'none'
+        //sempre que executar a função validacao()
+        //será ocultada as mensagens de alerta
+        //para evitar monstrar as mensagens erroneamente
+
+    var cpf = document.getElementById("cpf_digitado").value
+        //Ensinar o .js a capturar elementos de dentro do .html
+        //cpf recebe o valor do cpf digitado
+
+    var resultadoValidacao = validaCPF(cpf)
+
+    if (resultadoValidacao){
+            // Alterando diretamente nos alertas no html
+        document.getElementById('success').style.display = 'block'
+            //se validar que o cpf é verdadeiro 
+            //mostra o alerta id=success
+    } else {
+        document.getElementById('error').style.display = 'block'
+            //se não validar o cpf
+            //mostra o alerta id=error
+    }
+} 
+
+