<!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;
}