Web.Jquery.Ejercicio.
Ahora que ya vamos tocando muchas cosas, vamos hacer un ejercicio muy simple. El objetivo es que usemos un poco lo que hemos ido aprendiendo, es decir, HTML, Java Script y BootStrap.
Lo que quiero que haga el ejercicio es un pequeño formulario en el que introduzcamos un número y nos muestra su tabla multiplicar en una tabla. Vamos a intentar hacerlo con efectos y todo, para que quede chulo.
Lo que quiero hacer es que en el mismo ancho de la página estén las dos cosas, es decir, el formulario y la tabla, de forma que sea adaptativo según el tamaño de la pantalla.
Ahora vamos a crear la estructura de como quedará el body. Quiero que en la misma fila aparezca el formulario y la tabla, de forma que siempre ocupe 3 columnas el formulario y 9 la tabla, a excepción de que si el dispositivo es muy pequeño aparezca la tabla debajo del formulario.
Como se ve en la foto, creo un contenedor de la clase container-fluid. Dentro de éste creo otro con la clase “row”, para que muestre el formulario y la tabla en la misma fila.
Ahora creo creo el contenedor con la clase “col-md-3”, donde voy a meter el formulario y después creo otro con la clase “col-md-9” para meter la tabla. Ya dentro de éste último creamos la tabla. Como no hay datos sólo creo los encabezados y el <tbody> lo dejo vacío e iremos creando filas más adelante.
- col-md-3. Para dispositivos medios en adelante, ocupa 3 columnas.
- col-md-9. Para dispositivos medios en adelante, ocupa 9 columnas.
- Para dispositivos muy pequeños, por defecto, son 12 columnas, lo que quiere decir que se mostrará el formulario y debajo la tabla.
Ahora toca crear el formulario y para ello voy a beneficiarme de las clases que me ofrece BootStrap. Prácticamente sólo es copiar, pegar y retocar algunos detalles para adaptarlo a nuestra página.
Simplemente es crear entre las etiquetas <form></form> en el contenedor con la clase “col-md-3” con una clase “form-group” por cada campo que contenga el formulario. En este caso como sólo hay uno, pues borré lo demás que me hacían en el ejemplo de BootStrap.
A continuación creo dos botones uno para calcular y otro para borrar los datos que se muestran.
Ahora toca la parte de Java Script.
$(document).ready(function(){
$("tbody").fadeOut(); /*Al hacer un fadein no aparece los datos, lo mejor es asegurarse de que aparezca cambiando el valor de este efecto */ $("#calcular").attr("disabled",true);
$("#borrar").attr("disabled",true);
$("#numero").keypress(function(tecla) {
if (tecla.which == 13) {
return false;
}
});
});/* Which es un método que sirve para darnos el código ASCII de una tecla. En este caso lo que hago es desactivar la tecla enter en el formulario. Por defecto están desactivados los botones. cada vez que carga la página.*/function borrar() {
var elemento=$("tbody");
elemento.fadeOut("slow", function(){
for (var i=9;i>=0;i--){
$("tbody>tr")[i].remove();
}
$("#numero").val("");
$("#calcular").attr("disabled",true);
$("#borrar").attr("disabled",true);
});
}/* En este función borro las 10 linea de la multiplicación, limpio el campo y reseteo los botones.*/function calcular(){
var tablamul=document.querySelector("#numero").value;
for (var i=1;i<=10;i++){
$("tbody").append("<tr><td>"+tablamul+"</td><td>x</td><td>"+i+"</td><td>=</td><td>"+(i*tablamul)+"</td>");
}
$("#borrar").attr("disabled",false);
$("#calcular").attr("disabled",true);
$("tbody").fadeIn("slow");
}/* Creo un for para ir creando las 10 lineas de cada multiplicación y meterlas en la tabla. Con el método append creo los diferentes tr y td*. /function desactivar() {
if ($("#numero").val().length==0) {
$("#calcular").attr("disabled",true);
$("#borrar").attr("disabled",true);
}
else{
$("#calcular").attr("disabled",false);
$("#borrar").attr("disabled",true);
}
}/* Esta función la uso para activar o desactivar los botones según hayamos escrito algo en el campo del formulario.*/$("#calcular").on("click",calcular);
$("#borrar").on("click",borrar);
$("#numero").on("keyup", desactivar)/* Creo los eventos para los botones y para el campo.*/
