<file_sep>var data = [
  {
    country: 'Peru',
    'code-postal': 51,
    photo: 'peru.svg'
  },
  {
    country: 'Chile',
    'code-postal': 56,
    photo: 'chile.svg'
  },
  {
    country: 'Mexico',
    'code-postal': 52,
    photo: 'mexico.svg'
  },
  {
    country: 'Colombia',
    'code-postal': 57,
    photo: 'colombia.svg'
  }
];
<file_sep>### Reto: Lyft
***

###  Objetivo:

*   Desarrollar una aplicación web de la página de Lyft, para registro de usuario.

###  Descripción:

*  El siguiente proyecto consiste en desarrollar una web-app que replique el sitio de Lyft, en este reto se deberá cumplir los pasos necesarios para que tu usuario pueda registrarse.

### Flujo de la aplicación:

* Vista splash con duración de 2 a 5 segundos que redirecciona a tu vista de inicio.
La vista de inicio cuenta con dos botones, en esta ocasión seguiremos el flujo de SING UP.

    ![splash](assets/docs/splash.png "splash")


* En la siguiente vista tenemos un formulario donde nuestro usuario puede escoger el país y debe ingresar su número de teléfono. El botón de NEXT debe estar deshabilitado hasta que se ingrese un número de 10 dígitos.

    ![ingreso-numero](assets/docs/ingreso-numero.png "ingreso numero")


* Una vez ingresado el número de teléfono se habilita el botón y al dar click debe enviar una alerta con un código generado aleatoriamente (LAB-000) y redireccionar a la siguiente vista.

    ![generacion-codigo](assets/docs/generacion-codigo.png "generacion-codigo")


* En esta vista se debe ingresar el código dado anteriormente y una vez hecho esto se habilita el botón que redirecciona a nuestro usuario a la vista donde ingresa sus datos. (Puede tener la opción de enviar otro código.)

  ![verificacion-numero](assets/docs/verificacion-numero.png "verificacion-numero")


* Para ingresar sus datos necesitamos un formulario que le pida su nombre, apellido y correo electrónico. Deberá también tener un checkbox para que se acepten los términos y condiciones del servicio.

  ![ingreso-datos](assets/docs/ingreso-datos.png "ingreso-datos")


* Ya que se ha realizado lo anterior, sólo se deberá mostrar una vista al usuario que le indique que ha concluido con el registro exitosamente.

  ![final](assets/docs/final.png "final")



**NOTA:** Todas nuestras vistas deben de contar con una manera de regresar a la vista anterior

***
###  Recursos Utilizados:
* HTML5.
* CSS.
* BOOTSTRAP.
* JAVASCRIPT.
* jQuery.
<file_sep>$(document).ready(function() {
  var verifyFistName = false;
  var verifyLastName = false;
  var verifyEmail = false;
  var verifyCheck = false;

  function validateText(event) {
    var patternText = /^[a-zA-Z_áéíóúñ_ÁÉÍÓÚÑ]*$/;
    var centinel = false;
    if (patternText.test(event.key)) {
      centinel = true;
    } else {
      centinel = false;
    }
    return centinel;
  }

  function validateEmail(event) {
    var patternEmail = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
    patternEmail.test(event);
  }

  function verifyCamposText(text) {
    var centinel = false;
    if (text) {
      centinel = true;
      enabledButton();
    } else {
      centinel = false;
      desabledButton();
    }
    return centinel;
  }

  function desabledButton(btn) {
    $(btn).attr('disabled', '');
    $(btn).removeClass('btn-enabled-register-data');
  }

  function enabledButton(btn) {
    $(btn).removeAttr('disabled');
    $(btn).addClass('btn-enabled-register-data');
  }

  function verifyData() {
    if (verifyFistName && verifyLastName && verifyEmail && verifyCheck) {
      enabledButton('.btn-next-register-data');
    } else {
      desabledButton('.btn-next-register-data');
    }
  }

  // Validar firstName y lastName para ingresar solo texto
  $('#firstName').on('keypress', validateText);
  $('#lastName').on('keypress', validateText);

  // Validar cada input ingresado
  $('#firstName').on('input', function() {
    verifyFistName = verifyCamposText($(this).val());
    verifyData();
  });
  $('#lastName').on('input', function() {
    verifyLastName = verifyCamposText($(this).val());
    verifyData();
  });
  $('#email').on('input', function() {
    patternEmail = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
    var resulEmail = patternEmail.test($(this).val());
    if (resulEmail) {
      verifyEmail = true;
    } else {
      verifyEmail = false;
    }
    verifyData();
  });
  $('input[type="checkbox"]').on('click', function(event) {
    if (event.target.checked) {
      verifyCheck = true;
    } else {
      verifyCheck = false;
    }
    verifyData();
  });

  $('.btn-prev-verify-number').click(function() {
    window.location.href = './verifynumber.html';
  });
  $('.btn-next-register-data').on('click', function() {
    window.location.href = './registersuccess.html';
  });
});
<file_sep>$(document).ready(function() {
  // Animación del logo-lyft
  $('img').animate({
    marginBottom: '4in',
    opacity: 0.4
  }, 5000);
  // Abrir la vista singup
  setTimeout(function() {
    window.location.href = './views/singup.html';
  }, 5000);
});
<file_sep>$(document).ready(function() {
  var code = (sessionStorage.code);
  var digitOneCode = code.charAt(0);
  var digitTwoCode = code.charAt(1);
  var digitThreeCode = code.charAt(2);
  var stateDigitOne = false;
  var stateDigitTwo = false;
  var stateDigitThree = false;

  function clearInput() {
    $('.digit-one').val('');
    $('.digit-two').val('');
    $('.tercerDig').val('');
    $('.digit-one').focus();
    desabledButton($('.btn-next-verify-number'));
  }

  function desabledButton(btn) {
    $(btn).attr('disabled', '');
    $(btn).removeClass('btn-enabled-verify');
  }

  function enabledButton(btn) {
    $(btn).removeAttr('disabled');
    $(btn).addClass('btn-enabled-verify');
  }

  function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  function verifyCode() {
    if (stateDigitOne && stateDigitTwo && stateDigitThree) {
      enabledButton($('.btn-next-verify-number'));
    } else {
      desabledButton($('.btn-next-verify-number'));
    }
  }

  function validateOnlyNumber(event) {
    var numberCodeASCII = event.keyCode;
    var centinel = false;
    if (numberCodeASCII >= 48 && numberCodeASCII <= 57) {
      centinel = true;
    }
    return centinel;
  }

  // Inicializando
  desabledButton($('.btn-next-verify-number'));

  // Agregando el número
  $('.help-block').text('Enter the code sent to +' + sessionStorage.number);
  // Validar el código con cada valor ingresado en los input's
  $('.digit-one').on('input', function() {
    var valueDigit = $(this).val();
    if (valueDigit === digitOneCode) {
      stateDigitOne = true;
    } else {
      stateDigitOne = false;
    }
    verifyCode();
  });
  $('.digit-two').on('input', function() {
    var valueDigit = $(this).val();
    if (valueDigit === digitTwoCode) {
      stateDigitTwo = true;
    } else {
      stateDigitTwo = false;
    }
    verifyCode();
  });
  $('.digit-three').on('input', function() {
    var valueDigit = $(this).val();
    if (valueDigit === digitThreeCode) {
      stateDigitThree = true;
    } else {
      stateDigitThree = false;
    }
    verifyCode();
  });

  $('.digit-one').on('keypress', validateOnlyNumber);
  $('.digit-two').on('keypress', validateOnlyNumber);
  $('.digit-three').on('keypress', validateOnlyNumber);

  $('.btn-prev-register-number').click(function() {
    window.location.href = './registernumber.html';
  });
  // Generar otro código y validarlo
  $('.btn-resend').on('click', function() {
    clearInput();
    code = getRandomArbitrary(100, 999);
    alert('Su nuevo código es LAB-' + code);
    sessionStorage.code = code;
    digitOneCode = sessionStorage.code.charAt(0);
    digitTwoCode = sessionStorage.code.charAt(1);
    digitThreeCode = sessionStorage.code.charAt(2);
    verifyCode();
  });

  $('.btn-next-verify-number').click(function() {
    window.location.href = './registerdata.html';
  });
});
<file_sep>$(document).ready(function() {
  $('.btn-singup').click(function() {
    window.location.href = './registernumber.html';
  });
});
