se añadio funcion de valicon de datos y seleccion de codigo de pais

Author: com2pa

index.html

@@ -24,7 +24,7 @@ <h1 id="form-title">Validacion</h1>
                 Debe ser el siguiente formato: [email protected]
             </p>
         </div>       
-        <div class="input-div" class="form-input">
+        <div class="input-div" >
             <!-- country codes (ISO 3166) and Dial codes. -->
             <select name="countryCode" id="countries" class="form-input">
                 <option  value="" disabled Selected  >Selecciona un pais</option>

index.js

@@ -10,11 +10,35 @@ const countries = document.querySelector('#countries');
 // paso 2
 const usernameInput = document.querySelector('#username');
 const emailInput=document.querySelector('#email');
+const phoneCode = document.querySelector('#phone-code')
 
 // -- validaciones
 let usernameValidation = false;
+let emailValidation= false;
+// let countriesValidation=false;
 
+// paso3.1
+// funcion para validacion estados input
 
+const validacion=(e, validacion,element)=>{
+   
+    // const texto= usernameInput.parentElement.children[1]
+    const informacion= e.target.parentElement.children[1]
+   
+    if(validacion.value== ''){
+        element.classList.remove('correct')
+        element.classList.remove('incorrect')
+        informacion.classList.remove('show-informacion')
+    }else if(validacion){
+        element.classList.add('correct')
+        element.classList.remove('incorrect')
+        informacion.classList.remove('show-informacion')
+    }else{
+        element.classList.add('incorrect')
+        element.classList.remove('correct')
+        informacion.classList.add('show-informacion')
+    }
+}
 
 // paso 1 
 [... countries].forEach(option=>{
@@ -23,24 +47,18 @@ let usernameValidation = false;
 // paso 3
 // estado
 usernameInput.addEventListener('input',e =>{
-    // console.log(e.target.value);
-    
     usernameValidation= USERNAME_REGEX.test(e.target.value)
-    console.log(usernameValidation);
-    const texto= usernameInput.parentElement.children[1]
-    // const informacion= e.target.parentElement.children[1]
-    console.log(texto);
-    if(usernameValidation.value== ''){
-        usernameInput.classList.remove('correct')
-        usernameInput.classList.remove('incorrect')
-        texto.classList.remove('show-informacion')
-    }else if(usernameValidation){
-        usernameInput.classList.add('correct')
-        usernameInput.classList.remove('incorrect')
-        texto.classList.remove('show-informacion')
-    }else{
-        usernameInput.classList.add('incorrect')
-        usernameInput.classList.remove('correct')
-        texto.classList.add('show-informacion')
-    }
-})
+    validacion(e,usernameValidation,usernameInput)//e= evento, usernameValidation =validacion ,usernameInput = input
+    
+})
+
+emailInput.addEventListener('input',e =>{
+    emailValidation= EMAIL_REGEX.test(e.target.value)
+    validacion(e,emailValidation,emailInput)
+})
+// paso3.2 evento para seleccionar el pais y codigo de telf 
+countries.addEventListener('input',e =>{
+    const optionSelected =[... e.target.children].find(option => option.selected);
+    phoneCode.innerHTML=`+${optionSelected.value}`
+})
+

styles.css

@@ -73,8 +73,25 @@ body{
     cursor: pointer;
     border-radius: 0.5rem;
 }
+.correct{
+    outline:2px solid blue ;
+}
+.incorrect{
+    outline:2px solid red;
+}
+.show-informacion{
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border: 1px solid white;
+    padding: 0.5rem;
+    background-color:#115e59;
+    display: block
+;
+}
 @media (min-width:640px){
     #form{
         width: 60%;
     }
+    
 }