Descripción de la tarea
Integrar en el ejemplo del carrusel realizado con Bootstrap en la última actividad la calculadora desarrollada como entrega P2P final del módulo 5 que utiliza jQuery e incluye todas las teclas de operaciones unitarias, binarias y n-arias.
La calculadora debe estar accesible desde todos los enlaces del carrusel:
- Barra de navegación superior
- Foto de la calculadora en el carrusel
- Botonera inferior
La calculadora integrada debe incluir una barra de navegación adaptable a pantallas estrechas y anchas, similar a la que se incluyo en la integración del puzzle.
Subir el carrusel completo basado en bootstrap con el puzzle y la calculadora integrados a la cuenta de neocities.org
Parte opcional de la entrega:
Para practicar con el uso de jQuery UI, pueden añadir a la calculadora una memoria donde almacenar el valor del cajetín. El contenido de esta memoria deberá hacerse visible en la página Web, por ejemplo cerca del cajetín. Para mover el contenido de uno a otro se deben añadir 2 teclas a la calculadora:
- ToM: mueve el número del cajetín a la memoria
- FromM: mueve el número de la memoria al cajetín
Algunas sugerencias para implementar el arrastre del cajetín a la memoria:
- 1) Usar bloque <div contentEditable=“true” …> en vez de <input type=“text” …> para introducir el número y delimitar el cajetin con los comandos CSS border, hight y width.
- 2) Usar un bloque para la memoria donde guardar el número. Delimitar esta zona también con los comandos CSS border, hight y width.
- 3) Inicializar la función draggable al menos con las opciones {revert: "invalid", helper:"clone"} para que retorne si no llega al destino y para que no desplace el cajetín original.
- 4) Inicializar la función dropable al menos con las opciones {activeClass:"act", drop:function(event, ui){…}} para indicar con activeClass cual es el destino (memoria) y para definir con drop el manejador del ejvento que copia el contenido. El manejador tendrá un código similar al del botón ToM.
Pueden encontrar las instrucciones en:
- http://www.desarrolloweb.com/manuales/manual-jqueryui.html
- https://jqueryui.com/
- http://api.jqueryui.com/