Reloj digital y alarma sonora
En esta sección se tienen los botones para iniciar un reloj con la hora local y detenerlo, y dos más para activar y detener una alarma
Eventos de Teclado
Shorcuts
Además de la interacción de la bola, en este segmento también se han agregado shortcuts con los atajos alt + (a, c, ó p)
Cuenta Regresiva
Cuenta regresiva al 25 de noviembre de 2022
Responsive con JavaScript
Se utilizó responsive con JS para que se detecte la dimensión de la pantalla, y si por ejemplo, se está en un
dispositivo móvil , no se tengan que consumir recursos de más a la hora de cargar la pag (se ve a los 1024px)
Responsive Tester
La función del formulario es que puede abrir una ventana en la página solicitada (se debe introducir URL) con las
medidas deseadas.
Con el boton "Probar" se abre y con el "Cerrar" se cierra la venta.
Detección de Dispositivos
(User Agent)
Se puede observar que se detecta navegador usado, con su versión y el software.
Detección de la conexión
En esta sección se agregó el mensaje de conexión perdida y reestablecida. Esto se puede ver desconectando el equipo de la red, o entrando a la consola, sección "Aplicaciones", en Service Workers seleccionando la opción "Sin conexión"
Aparecerá cartel de desconectado, y al volver la conexión aparecerá el cartel de reconecta, ambos tienen un tiempo de 2s en pantalla
Detección de la cámara web
En esta sección se agrega el video de la webCam, y si no encuentra el periférico, o hay algun error saldrá por consola o pantalla
Gelocalización
En esta sección se hace uso de la Api de geolocalización para obtener la ubicación aproximada del usuario
Filtros de Búsqueda
En este sección de hace uso de un filtro de búsqueda, filtrando las imagenes por los caracteres ingresados
Sorteo Digital
En esta sección se usa el método random para obtener aleatoriamente un valor de la lista
- Javascript
- PHP
- JAVA
- C
- Python
- Ruby
- Go
- Visual Basic
- Rust
- Perl
Responsive Slider
En esta sección se realiza un responsive Slider, donde está hecho con JS y se acomoda a distintos tamaños de pantalla
Scroll Spy
Panel de pantalla donde va siguiendo los temas que el usuario va leyendo.
Video Inteligente
IntersectionObserver & VisibilityChange
En esta sección se usa el video inteligente. El video se empieza a reproducir y se pausa automaticamente cuando se
deja de ver el 50% del video.
Funciona de igual manera cuando nos vamos a otra pestaña
Validación de Formularios
Validación del formulario para los datos ingresados, en caso de que estos no sean lo pedido se mostrará un mensaje de error dinámico corroborando los datos
También se puede enviar el formulario medianta la página de formsubmit.co, esto es porque es puro JS