Índice del curso de ES6

  1. Introducción al Curso de Javascript
  2. console.log
  3. Comentarios
  4. Variables
  5. Operadores
  6. Estructuras condicionales
  7. Bucle for
  8. Bucle while
  9. Break! - Gran día de repaso
  10. funciones
  11. Arrow functions
  12. Métodos para trabajo con cadenas
  13. Números aleatorios
  14. location.href
  15. Colección de ejercicios
  16. DOM
  17. Efecto Parallax
  18. innerHTML
  19. Propiedad style
  20. Cambiar atributo src
  21. Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase
  22. Create Element
  23. Arrays
  24. Ejercicios avanzados
  25. LocalStorage
  26. Deconstrucción
  27. fetch
  28. Import, export
  29. Modernizr

Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase

Añadir claseobj.classList.add('nombreClase');
Eliminar claseobj.classList.remove('nombreClase');
Cambiar claseobj.classList.toggle('nombreClase');
Evaluar si tiene una claseif (obj.classList.contains('thatClass')) {
    // do some stuff
}

Ejercicio - animate.css

Usando addClass, hacer que al pulsar un botón este coja los estilos necesarios y suministrados por la librería animate.css para que se produzca la animación correspondiente

Para que funcione, habrá que añadir el class animated y el class correspondiente a la animación que queremos emplear y que podemos consultar en animate.css.

Si queremos que pasado un tiempo se elimine el class, usaremos la función timeOut

const eliminaClases = _ => {
	const obj = document.querySelector("#rojo");
	obj.classList.remove('animated','bounce'); 
}
setTimeout(eliminaClases, 2000);

Si queremos que el class se elimine cuando la animación ha concluído, usaremos:

obj.addEventListener('animationend', () => {
	obj.classList.remove('animated','bounce');
});

Ejercicio menú hamburguer

Ejercicio menú hamburguer pulsando en fondo

Ejercicio precarga

Mostrar un icono durante la precarga de la página.

Utilizaremos el siguiente class para hacer la capa container invisible durante el periodo de precarga:

.container.invisible{
	opacity: 0;
	height: 0;
	overflow: hidden;
}
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!