ENGLISH
I did exercises of logic and DOM handling in JavaScript
This Project only has one master branch, it was a small project so it did not need more branches.
💻 A Single One Page with exercise handling the Document Object Model.
- Digital clock and sound alarm
- Keyboard events, to detected when the user press some key, it's use to create the shortcuts
- Countdown
- Responsible responsive design, when the user is seeing a website from a mobile some elements, like videos o maps will have a link to be see, so they do not need to use too much internet to dowunlod the video o the image
- Responsive tester
- User Agent, to detect from where the user is connecting (browser or operating system) and according to that: make redirections to an specific URL or for displaying a particular content
- Connection and disconnection events
- Webcam detection
- Geolocation
- Search filter
- Lottery
- Responsive Slider
- Scroll Spy & Intelligent Video.
- Contact Form validations
- Scroll button.
- Button for Light / Dark theme.
And as an extra I made 3 exercises practising JS vanilla.
-
Battery that detects the keys you press on the keyboard
-
Analog clock that obtains the seconds and performs rotations in CSS.
-
CSS variables, with the EventListener : change and mouseover.
-
Image gallery using CSS and JavaScript, with the EventLlistener: click and transitionend, in addition to using querySelectorAll() to select the labels that have the panel class.
Writing the name of a city or state of the United States, having a filter of the letters entered with a list of Cities and States obtained from the JSON https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities. json, I use promises with fetch() and then().
I also use the EventListener: change and keyup to detect the letters that are entered.
And some array methods, like: .filter() and .map(), along with the use of regular expressions.
-
Canvas, using the HTML canvas to be able to draw with the mouse on the web
-
Dev Tools
-
Checkboxes, the following is a common layout you would see in an email client. When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes in-between those two checkboxes should be checked.
-
Video player with custom buttons.
HTML5 , CSS3 , JAVASCRIPT
If you want to see how this project was, you can do it from: :arrow_right: https://eugenia1984.github.io/ejercicios-dom/
- Share this proyect with others 📢
- Invite a beer 🍺 or a coffee ☕ to someone of the team.
- Thanks a lot 🤓.
I appreciate your interest in this Project ⌨️ with ❤️ by María Eugenia Costa 😊 and follow me at LinkedIn - maria-eugenia-costa
ESPAÑOL
Hice ejercicios de lógica y manejo de DOM en JavaScript.
Este proyecto solo tiene una rama principal
💻 Una sola página con ejercicio de manejo del Modelo de objetos de documento.
- Reloj digital y alarma sonora
- Eventos de teclado, para detectar cuando el usuario presiona alguna tecla, se usa el dedo del pie para crear los accesos directos
- Cuenta regresiva
- Diseño responsive responsable, cuando el usuario está viendo un sitio web desde un móvil algunos elementos, como videos o mapas, tendrán un enlace para ser visto, por lo que no necesita usar demasiado internet para descargar el video o la imagen
- Probador receptivo
- User Agent, para detectar desde dónde se conecta el usuario (navegador o sistema operativo) y según ello: realizar redirecciones a una URL específica o para mostrar un contenido en particular
- Eventos de conexión y desconexión
- Detección de webcam
- Geolocalización
- Filtro de búsqueda
- Sorteo
- Carrusel responsivo
- Scroll Spy & Video inteligente
- Validaciones de formularios
- Botón de desplazamiento.
- Botón para el tema Claro / Oscuro.
Y como extra hice 3 ejerciicos con Vanilla JavaScript:
-
Batería que detecta las teclas que oprimis en el teclado
-
Reloj analogo que obtiene los segundos y realiza rotaciones en CSS.
-
Variables de CSS, con los EventListener : change y mouseover.
-
Array, donde practico algunos métodos de los arrays.
-
Galeria de imagenes utilizando CSS y JavaScript, con los EventLlistener: click y transitionend, además de utilizar querySelectorAll() para seleccionar las etiquetas que tienen la clase panel.
-
Escribiendo el nombre de una ciudad o estado de Estados Unidos, teniendo un filtro de las letras introducidas con un listado de Ciudades y Estados obtenidos del JSON https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json, utilizo promesas con fetch() y then().
También utilizo los EventListener: change y keyup para detectar las letras que se ingresan.
Y algunos métodos de arrays, como: .filter() y .map(), junto a la utilización de expresiones regulares.
-
Canvas, utilizando el canvas de HTML para poder dibujar con el mouse en la web.
-
Dev Tools
-
Checkboxes, es un diseño común que vería en un cliente de correo electrónico. Cuando un usuario hace clic en una casilla de verificación, mantiene presionada la tecla Mayús y luego hace clic en otra casilla de verificación unas filas más abajo, todas las casillas de verificación entre esas dos casillas de verificación deben estar marcadas.
-
Reproductor de video con botones personalizados.
HTML5, CSS3, JAVASCRIPT
Si quieres ver cómo fue este proyecto, puedes hacerlo desde: :arrow_right: https://eugenia1984.github.io/ejercicios-dom/
- Comparte este proyecto con otros 📢
- Invita una cerveza 🍺 o un café ☕ a alguien del equipo.
- Muchas gracias 🤓.
Agradezco su interés en este Proyecto ⌨️ con ❤️ de María Eugenia Costa 😊 y síganme en LinkedIn - maria-eugenia-costa