<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" />
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="extra.css" />
  </head>

  <body>
    <header>
      <nav>
        <a href="index.html" class="active">Ejercicio 1</a>
        <a href="index2.html">Ejercicio 2</a>
        <a href="index3.html">Ejercicio 3</a>
      </nav>
    </header>
    
    <section>
      <h1>Validación de email</h1>
      <p><label>Email:</label><input name="email" type="email"></p>
      <p><label>Repetir Email:</label><input name="email2" type="email"></p>
    </section>
    
    <aside>
      <p>Al salir del campo email2 verificar si coincide el valor</p>
      <p>Si es así asignarle la clase "ok" definida extra.css</p>
      <p>Si no es así asignarle la clase "error" definida en extra.css</p>
      <a href="solucion.html">ver solucion.html</a>  
    </aside>
    
    <script>
      //podemos seleccionar por nombre utilizando la sintaxis CSS!
      var email = document.querySelector('input[name=email]');
      var repetir = document.querySelector('input[name=email2]');
      repetir.on____ = ______;
      
      function validarEmail(){
        var sonIguales = false; //comparar!
        if(sonIguales){
          //asignar la clase 'ok'
        }else{
          //asignar la clase 'error'
        }
      }
    </script>
  </body>

</html>
/* Styles go here */

a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

body {
  
}

nav {
  background: rgba(0,0,0,.1);
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav a:hover,
nav a.active {
  border-bottom: 3px solid black;
}

section {
  padding: 1em;
}

aside {
  background: rgba(255,255,0,.15);
  border-left: 2px dashed orange;
  margin: 1em;
  padding: 1em;
}

aside a {
  
}

code {
  background: #dadada;
  display: inline-block;
  color: green;
  padding: .2em;
}
Curso: desarrollador frontend
Clase: 2
Version: 1.0
-
Temas a ejercitar
  eventos y manipulación DOM
  onblur + classList
  onchange + classList
  captcha client side
-
Autor: sergio.minutoli@educacionit.com
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" />
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="extra.css" />
  </head>

  <body>
    <header>
      <nav>
        <a href="index.html">Ejercicio 1</a>
        <a href="index2.html" class="active">Ejercicio 2</a>
        <a href="index3.html">Ejercicio 3</a>
      </nav>
    </header>
    
    <section>
      
      <select name="habitacion">
        <option value="0">Seleccione habitación</option>
        <option value="modesta">Modesta</option>
        <option value="elegante">Elegante</option>
        <option value="lujosa">Lujosa</option>
      </select>
      
      <article class="habitacion habitacion--modesta">
        <h1>Modesta</h1>
        <p>Una de las mejores opciones dentro del bajo costo</p>
        <p>A solo <strong>ar$80.-</strong> la noche</p>
      </article>
      
      <article class="habitacion habitacion--elegante">
        <h1>Elegante</h1>
        <p>Balcón interior, baño privado</p>
        <p>A solo <strong>ar$150.-</strong> la noche</p>
      </article>
      
      <article class="habitacion habitacion--lujosa">
        <h1>Lujosa</h1>
        <p>Para los más exigentes</p>
        <p>A solo <strong>ar$350.-</strong> la noche</p>
      </article>
      
    </section>
    
    <aside>
      <p>Esconder los 3 detalles asignando a cada habitación la clase "esconder" definida en extra.css</p>
      <p>Cuando el usuario selecciona una de las opciones, mostrar la que corresponda (removiendo la clase)</p>
      <p>Si el usuario vuelve a "seleccionar habitación" quedan todas escondidas</p>
      <a href="solucion2.html">ver solucion2.html</a>  
    </aside>
  
    <script>
      var todas; //seleccionar todas las habitaciones
      var select; //seleccionar el select
      
      select.on_____ = mostrarOpcion;
      esconderTodas();
      
      function esconderTodas(){
        for(var i=0; i < todas.length; i++){
          //asignarle la clase escondida a cada una
        }
      }
      function mostrarOpcion(){
        var opcion; //obtener la opción seleccionada
        var elegida = document.querySelector('.habitacion--'); //seleccionar la habitación correspondiente usando un selector dinámico
        elegida.classList.remove('escondida');
      }
    </script>
  </body>

</html>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" data-semver="3.0.1" data-require="normalize@*" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" data-semver="3.0.1" data-require="normalize@*" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/solarized_dark.min.css" rel="stylesheet" data-semver="0.7.3" data-require="highlight.js@*" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" rel="stylesheet" data-semver="0.7.3" data-require="highlight.js@*" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" rel="stylesheet" data-semver="0.7.3" data-require="highlight.js@*" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js" data-semver="0.7.3" data-require="highlight.js@*"></script>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <link href="extra.css" rel="stylesheet" />
  </head>

  <body>
    <header>
      <nav>
        <a class="active" href="index.html">Ejercicio 1</a>
        <a href="index2.html">Ejercicio 2</a>
        <a href="index3.html">Ejercicio 3</a>
      </nav>
    </header>
    <section>
      <h1>Validación de email</h1>
      <p>
        <label>Email:</label>
        <input id="email" type="email" name="email" />
      </p>
      <p>
        <label>Repetir Email:</label>
        <input id="email2" type="email" name="email2" />
      </p>
    </section>
    <aside>
      <p>Al salir del campo email2 verificar si coincide el valor</p>
      <p>Si es así asignarle la clase "ok" definida extra.css</p>
      <p>Si no es así asignarle la clase "error" definida en extra.css</p>
    </aside>
    <script id="scriptSolucion">
    var campoValidar = $('input[name="email2"]');

campoValidar.focusout (function validarEmail(){
    var email = $('input[name="email"]').val();
    var repetir = $('input[name="email2"]').val();

    $('input[name="email2"]').removeClass('ok');
    $('input[name="email2"]').removeClass('error');

    var sonIguales = email === repetir; //comparar!
        if(sonIguales){
            $('input[name="email2"]').addClass('ok');
        }
        else {
            $('input[name="email2"]').addClass('error');
        }
});

    </script>
    <script src="write-solution.js"></script>
  </body>

</html>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" />
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/solarized_dark.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" />
    <script data-require="highlight.js@*" data-semver="0.7.3" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="extra.css">
  </head>

  <body>
    <header>
      <nav>
        <a href="index.html">Ejercicio 1</a>
        <a href="index2.html" class="active">Ejercicio 2</a>
        <a href="index3.html">Ejercicio 3</a>
      </nav>
    </header>
    
    <section>
      
      <select name="habitacion">
        <option value="0">Seleccione habitación</option>
        <option value="modesta">Modesta</option>
        <option value="elegante">Elegante</option>
        <option value="lujosa">Lujosa</option>
      </select>
      
      <article class="habitacion habitacion--modesta">
        <h1>Modesta</h1>
        <p>Una de las mejores opciones dentro del bajo costo</p>
        <p>A solo <strong>ar$80.-</strong> la noche</p>
      </article>
      
      <article class="habitacion habitacion--elegante">
        <h1>Elegante</h1>
        <p>Balcón interior, baño privado</p>
        <p>A solo <strong>ar$150.-</strong> la noche</p>
      </article>
      
      <article class="habitacion habitacion--lujosa">
        <h1>Lujosa</h1>
        <p>Para los más exigentes</p>
        <p>A solo <strong>ar$350.-</strong> la noche</p>
      </article>
      
    </section>
    
    <aside>
      <p>Esconder los 3 detalles asignando a cada habitación la clase "esconder" definida en extra.css</p>
      <p>Cuando el usuario selecciona una de las opciones, mostrar la que corresponda (removiendo la clase)</p>
      <p>Si el usuario vuelve a "seleccionar habitación" quedan todas escondidas</p>
    </aside>
    
    <script id="scriptSolucion">
      var todas = document.querySelectorAll('.habitacion'); //seleccionar todas las habitaciones
      var select = document.querySelector('select[name=habitacion]'); //seleccionar el select
      
      select.onchange = mostrarOpcion;
      esconderTodas();
      
      function esconderTodas(){
        for(var i=0; i < todas.length; i++){
          todas[i].classList.add('esconder');
        }
      }
      function mostrarOpcion(){
        var opcion = select.value; //obtener la opción seleccionada
        esconderTodas();
        if(opcion == 0) return;
        
        var elegida = document.querySelector('.habitacion--'+opcion); //seleccionar la habitación correspondiente usando un selector dinámico
        elegida.classList.remove('esconder');
      }
    </script>
    <script src="write-solution.js"></script>
  </body>

</html>
/*
Este script no es parte del ejercicio, aunque puede venir bien para los que quieran ver un poco de generación
de elementos en tiempo de ejecución :D

sergio.minutoli@educacionit.com
*/

var pre = document.createElement('pre');
var block = document.createElement('code');
pre.appendChild(block);
document.querySelector('aside').appendChild(pre);

block.classList.add('hljs');
block.innerHTML = document.querySelector('#scriptSolucion').textContent;
hljs.highlightBlock(block);
<!DOCTYPE html>
<html>

  <head>
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" />
    <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="extra.css">
  </head>

  <body>
    <header>
      <nav>
        <a href="index.html">Ejercicio 1</a>
        <a href="index2.html">Ejercicio 2</a>
        <a href="index3.html" class="active">Ejercicio 3</a>
      </nav>
    </header>
    
    <section>
      <form action="http://algunlado.com" name="validar">
        <p><input type="text" placeholder="Nombre de usuario"></p>
        <p><input type="password" placeholder="clave"></p>
        <p class="mensaje">¿Cuanto es <strong></strong>?</p>
        <p><input type="number" name="captcha" placeholder="resultado de la cuenta"></p>
        <button type="submit">Ir</button>
      </form>
    </section>
    
    <aside>
      <p>Escribir dentro del ".mensaje strong" una operación</p>
      <p>Al querer enviar el formulario validar que la respuesta del usuario sea correcta</p>
      <p>Si no es correcta cancelar el submit y asignar la clase "error" al campo</p>
    </aside>
  
    <script>
      var form = document.querySelector();
      var texto = document.querySelector();
      var campo = document.querySelector();
      
      var preguntas = ['10 mas 10', '55 menos 5', '20 dividido 4'];
      var respuestas = [20, 50, 5];
      
      var respuesta;
      texto.innerHTML = generarCaptcha();
      
      form.on____ = validarCaptcha;
      
      function generarCaptcha(){
        //seleccionar un indice al azar
        //guardar en la variable respuesta la respuesta que corresponde al mismo indice
        //retornar la pregunta que corresponda al mismo indice
      }
      
      function validarCaptcha(){
        var valor; //obtener el valor que escribio el usuario
        var coincide; //guardar en un booleano si el valor es igual a la respuesta esperada
        if(!coincide){
         //cancelar el evento 
        }
      }
    </script>
  </body>

</html>
section label {
  display: inline-block;
  margin-right: .3em;
  min-width: 110px;
  text-align: right;
}

section input.error {
  border-bottom: 2px solid red;
}

section input.ok {
  border-bottom: 2px solid green;
}

.esconder {
  display: none;
}

.habitacion {
  margin: 20px 0px; /* izq-der arr-aba */
  padding: 10px;
}
.habitacion--modesta {
  background: rgba(0,0,0,.15);
  border-left: 5px dashed gray;
}
.habitacion--elegante {
  background: rgba(255,255,0,.15);
  border-left: 5px dashed yellow;
}
.habitacion--lujosa {
  background: rgba(255,150,0,.15);
  border-left: 5px dashed orange;
}