Este proyecto se trata del día 1 del reto de Wes Bos's #JavaScript30 aunque yo he experimentado con el modificando y agregando diferentes aspectos del proyecto inicial.
Este proyecto consiste en programar tu propia batería de sonidos y tocarla pulsando teclas del teclado. Una modificación que hice es que se pudiera tocar las teclas también con el ratón para que el usuario pudiera hacerlo de ambas formas. Cada vez que presionas una de las teclas del juego, se añade una animación y cuando acaba, se elimina.
- Esta web ha sido desarrollada con: HTML5, CSS3 y JavaScript Vanilla.
- Se ha usado mediaqueries para hacer la web responsive (diseño adaptable a los distintos dispositivos).
- Para los estilos se ha utilizado: CSS3.
- Para la estructuración de la web: HTML5 y JavaScript ES6.
- Para el control de versiones del proyecto se ha utilizado Git.
¿Qué es la etiqueta kbd de HTML? "El elemento kbd representa una entrada del usuario que puede ser hecha por teclado o cualquier otro medio, como mouse, pantalla táctil o comandos de voz".
¿Cuándo se produce el evento Keydown? "El evento keydown es lanzado cuando una tecla es presionada (hacia abajo). A difencia del evento keypress, el evento keydown es lanzado para las teclas que producen un carácter y también para las que no lo producen".
¿Cuándo se usan los selectores de atributo? "Selecciona elementos basándose en el valor de un determinado atributo. Sintaxis: [atributo] [atributo=value]
¿Para qué sirve el Método audio.play()? "El método play() comienza a reproducir el audio actual. Se usa a menudo junto a método pause().
La etiqueta audio de HTML "La etiqueta de HTML5 especifica una forma estándar de incrustar audio en una página web. Se le pueden añadir atributos de controles de audio como reproducción, pausa y volumen".
¿Para qué se usa la propiedad de currentTime del audio? "La propiedad currentTime establece o devuelve la posición actual (en segundos) de la reproducción de audio. Al configurar esta propiedad, la reproducción saltará a la posición especificada".
¿En qué consiste el evento transitionend? "El evento transitionend es lanzado cuando una transición CSS se ha completado. Si la transición es eliminada antes de haberse completado, como cuando transition-property es eliminado o display se establece a "none", entonces el evento no será generado".