From a708e2255ec41754828c7850024cc9acb5b2d352 Mon Sep 17 00:00:00 2001 From: xj4v1x Date: Thu, 8 Aug 2024 15:02:36 +0200 Subject: [PATCH 1/3] Add files via upload --- .../01 Javascript Drum Kit.md | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 01 - JavaScript Drum Kit/01 Javascript Drum Kit.md diff --git a/01 - JavaScript Drum Kit/01 Javascript Drum Kit.md b/01 - JavaScript Drum Kit/01 Javascript Drum Kit.md new file mode 100644 index 0000000000..5ba18e721c --- /dev/null +++ b/01 - JavaScript Drum Kit/01 Javascript Drum Kit.md @@ -0,0 +1,51 @@ +# 01 JavaScript Drum Kit + +Crear, en CSS, 2 o más estilos para los diferentes estados de un mismo elemento. Después con JS podemos modificar, añadir, eliminar, la clase asociada a cada estado del elemento. + + +En este ejercicio, tenemos diferentes elementos ***div*** con la clase ***key*** + + `class = "key"` + +, que se utiliza para dar estilo a cada uno de los "pads" que podemos pulsar. + +Pero cuando pulsamos la tecla correspondiente, se añade la clase ***playing*** para crear el efecto y hacer la animación. + +Cada tecla tiene un código único que podemos comprobar en la web + + + +## Atributos de datos + +Los atributos de datos son un tipo de atributos personalizados que permiten almacenar información dentro de en un elemento HTML. + +Se utilizan como cualquier otro [atributo de HTML](https://developer.mozilla.org/es/docs/Web/HTML/Attributes) y tienen como requisito empezar por ***data-*** + +`data-key = "65"` + + +[Uso de los atributos de datos](https://developer.mozilla.org/es/docs/Learn/HTML/Howto/Use_data_attributes) + +De esta manera, en este ejercicio asociamos cada tecla a un sonido específico. + +`
+    A +    clap +
+....... +....... +` + + + +## Eventos JS + +Un evento es cualquier cosa que pase en el sistema, en este caso en la pantalla de nuestro navegador. Es el propio sistema quien se encarga de producir una señal cuando un evento ocurre. + +Así que simplemente tenemos que estar "escuchando" para saber cuándo ocurre un evento . + +`` \ No newline at end of file From 4e5bfce6efdcea5b02d484903033bebed4e7e1bc Mon Sep 17 00:00:00 2001 From: xj4v1x Date: Thu, 8 Aug 2024 15:03:11 +0200 Subject: [PATCH 2/3] Delete 01 - JavaScript Drum Kit/01 Javascript Drum Kit.md --- .../01 Javascript Drum Kit.md | 51 ------------------- 1 file changed, 51 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/01 Javascript Drum Kit.md diff --git a/01 - JavaScript Drum Kit/01 Javascript Drum Kit.md b/01 - JavaScript Drum Kit/01 Javascript Drum Kit.md deleted file mode 100644 index 5ba18e721c..0000000000 --- a/01 - JavaScript Drum Kit/01 Javascript Drum Kit.md +++ /dev/null @@ -1,51 +0,0 @@ -# 01 JavaScript Drum Kit - -Crear, en CSS, 2 o más estilos para los diferentes estados de un mismo elemento. Después con JS podemos modificar, añadir, eliminar, la clase asociada a cada estado del elemento. - - -En este ejercicio, tenemos diferentes elementos ***div*** con la clase ***key*** - - `class = "key"` - -, que se utiliza para dar estilo a cada uno de los "pads" que podemos pulsar. - -Pero cuando pulsamos la tecla correspondiente, se añade la clase ***playing*** para crear el efecto y hacer la animación. - -Cada tecla tiene un código único que podemos comprobar en la web - - - -## Atributos de datos - -Los atributos de datos son un tipo de atributos personalizados que permiten almacenar información dentro de en un elemento HTML. - -Se utilizan como cualquier otro [atributo de HTML](https://developer.mozilla.org/es/docs/Web/HTML/Attributes) y tienen como requisito empezar por ***data-*** - -`data-key = "65"` - - -[Uso de los atributos de datos](https://developer.mozilla.org/es/docs/Learn/HTML/Howto/Use_data_attributes) - -De esta manera, en este ejercicio asociamos cada tecla a un sonido específico. - -`
-    A -    clap -
-....... -....... -` - - - -## Eventos JS - -Un evento es cualquier cosa que pase en el sistema, en este caso en la pantalla de nuestro navegador. Es el propio sistema quien se encarga de producir una señal cuando un evento ocurre. - -Así que simplemente tenemos que estar "escuchando" para saber cuándo ocurre un evento . - -`` \ No newline at end of file From cd1499b2697c3427d53102c46d47994f65418be7 Mon Sep 17 00:00:00 2001 From: xj4v1x Date: Fri, 9 Aug 2024 09:12:05 +0200 Subject: [PATCH 3/3] Add files via upload --- .../01 Javascript Drum Kit es.md | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 01 - JavaScript Drum Kit/01 Javascript Drum Kit es.md diff --git a/01 - JavaScript Drum Kit/01 Javascript Drum Kit es.md b/01 - JavaScript Drum Kit/01 Javascript Drum Kit es.md new file mode 100644 index 0000000000..e6f99d1450 --- /dev/null +++ b/01 - JavaScript Drum Kit/01 Javascript Drum Kit es.md @@ -0,0 +1,116 @@ +# 01 JavaScript Drum Kit + +Crear, en CSS, 2 o más estilos para los diferentes estados de un mismo elemento. Después con JS podemos modificar, añadir, eliminar, la clase asociada a cada estado del elemento. + +En este ejercicio, tenemos diferentes elementos ***div*** con la clase ***key*** + + `class = "key"` + +, que se utiliza para dar estilo a cada uno de los "pads" que podemos pulsar. + +Pero cuando pulsamos la tecla correspondiente, se añade la clase ***playing*** para crear el efecto y hacer la animación. + +Cada tecla tiene un código único que podemos comprobar en la web + +## Atributos de datos + +Los atributos de datos son un tipo de atributos personalizados que permiten almacenar información dentro de en un elemento HTML. + +Se utilizan como cualquier otro [atributo de HTML](https://developer.mozilla.org/es/docs/Web/HTML/Attributes) y tienen como requisito empezar por ***data-*** + +`data-key = "65"` + +[Uso de los atributos de datos](https://developer.mozilla.org/es/docs/Learn/HTML/Howto/Use_data_attributes) + +De esta manera, en este ejercicio asociamos cada tecla a un sonido específico. + +`
+    A +    clap + +
+..... +..... + +` + +## Eventos JS + +Un evento es cualquier cosa que ocurra en el sistema, en este caso en la pantalla de nuestro navegador. Es el propio sistema quien se encarga de producir una señal cuando se produce un evento. + +Así que simplemente tenemos que estar "escuchando" para saber cuándo ocurre un evento . + +`` + +![Event](.\img\01 JS Drum Kit img_01.png) + +## Query Selector + +Ahora que tenemos el ***keycode*** que nos da el evento, podemos ver a qué tecla corresponde y qué sonido tiene asociado. + +`console.log(e.keyCode);` + +Para ello hacemos una búsqueda dentro de los elementos ***audio*** de nuestra página. + +`const audio = document.querySelector("audio[data-key="${e.keyCode}"]");` + +Haciendo `console.log(audio);` , al pusar la tecla **A**, nos devuelve + `` + +## Reproducir el sonido + +Si la constante audio no ha obtenido ningún valor salimos de la función y no se ejecuta nada más. + +`if (!audio) return;` + +y ejecutando `audio.play();`, justo después, ya podemos escuchar el sonido asociado a cada tecla. + +Para que podamos mantener pulsada una tecla y suene repetidamente el sonido, reiniciamos el sonido cada vez. +`audio.currentTime = "0";` + +## Animación + +Teníamos, en CSS, una clase para cuando la tecla había sido activada `playing`, así que para crear la animación tenemos que añadir esa clase al `div`que corresponda a la tecla pulsada. + +`key.classList.add("playing");` + +Después de la animación tenemos que retirar de nuevo esa clase. + + + +Vamos a ver cuándo termina la animación. + +Para ello, escuchamos + +`const keys = document.querySelectorAll(".key");` + +Ahora, en `keys` tenemos cada una de las teclas, con todos sus atributos, incluido si ha sido activada o no. *clase "playing"* + + + +De esta manera controlamos cuándo termina la transición (si es que ha tenido lugar) en cada una de las teclas. + +[Arrow Functions](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions) + +`keys.forEach(key => key.addEventListener("transitionend", removeTransition));` + + + +La animación tiene diferentes partes: + +    `.playing { +    transform: scale(1.1); +    border-color: #ffc600; +    box-shadow: 0 0 1rem #ffc600; +  }` + +Transforma la escala, modifica el color del borde y la sombra de la caja. + +Lo que nos interesa es la transformación, así que necesitamos detectar cuándo termina. + +`if (e.propertyName != "transform") return; + this.classList.remove("playing");` \ No newline at end of file