Asignar una clase con submit - Historial de revisiones

Nacho en 17:55 10 ago 2020

2020-08-10T17:55:52Z

Nacho en 17:52 10 ago 2020

2020-08-10T17:52:21Z

Nacho en 21:39 9 ago 2020

2020-08-09T21:39:37Z

Nacho en 21:30 9 ago 2020

2020-08-09T21:30:07Z

Nacho: Página creada con «Categoría:JavaScript const $home = document.getElementById("home"); $form.addEventListener("submit", event => { event.preventDefault(…»

2020-08-09T21:15:29Z

Página creada con «Categoría:JavaScript <syntaxhighlight lang="js"> const $home = document.getElementById("home"); $form.addEventListener("submit", event => { event.preventDefault(…»

Página nueva

[[Categoría:JavaScript]]
<syntaxhighlight lang="js">
const $home = document.getElementById("home");

$form.addEventListener("submit", event => {
event.preventDefault() //para quitar que el formulario recarge siempre la pagina
$home.classList.add('search-active')
}); </syntaxhighlight>

← Revisión anterior		Revisión del 17:55 10 ago 2020
Línea 33:		Línea 33:
	$elemento.setAttribute(atributo, atributos[atributo]);		$elemento.setAttribute(atributo, atributos[atributo]);
	}}</syntaxhighlight>		}}</syntaxhighlight>
		+	<syntaxhighlight lang="js">
		+	const $featuringContenedor = document.getElementById("featuring");
		+
		+	$form.addEventListener("submit", event => {
		+	event.preventDefault() //para quitar que el formulario recarge siempre la pagina
		+	$home.classList.add('search-active')
		+	const $loader = document.createElement('img'); //crea el elemento img
		+	setAtributos($loader, {
		+	src: 'src/images/loader.gif',
		+	height: 50,
		+	width: 50,
		+	})
		+	$featuringContenedor.append($loader)
		+	});</syntaxhighlight>

← Revisión anterior		Revisión del 17:52 10 ago 2020
Línea 23:		Línea 23:
	$modal.style.animation = 'modalOut .8s forwards'; // Sale 8 segundos		$modal.style.animation = 'modalOut .8s forwards'; // Sale 8 segundos
	}</syntaxhighlight>		}</syntaxhighlight>
		+
		+	== Añadir mas de un objeto ==
		+	La función <code class="alert-info>setAtributos</code> tiene el for que recorre todo el objeto <code class="alert-success>atributos</code> y los incluirá con el nombre y el parámetro que se han declarado. y asigna un <code class="alert-success>atributo</code> por cada objeto.
		+
		+	Con el metodo <code class="alert-info>setAttribute</code> se añaden los objetos al elemento.
		+	<syntaxhighlight lang="js">
		+	function setAtributos($elemento, atributos) {
		+	for (const atributo in atributos) {
		+	$elemento.setAttribute(atributo, atributos[atributo]);
		+	}}</syntaxhighlight>

← Revisión anterior		Revisión del 21:39 9 ago 2020
Línea 14:		Línea 14:
	$modal.style.animation = 'modalIn .8s forwards'; // añade el estilo modalIn de 8 segundos se queda en la posición final.		$modal.style.animation = 'modalIn .8s forwards'; // añade el estilo modalIn de 8 segundos se queda en la posición final.
	}; </syntaxhighlight>		}; </syntaxhighlight>
		+	Cerrar el modal
		+	<syntaxhighlight lang="js">
		+	const $cerrarModal = document.getElementById("cerrar-modal");
		+
		+	$cerrarModal.addEventListener('click', cerrarModal); //al hacer click ejecuta la función cerralModal
		+	function cerrarModal(){
		+	$overlay.classList.remove('active'); // quita la clase activa
		+	$modal.style.animation = 'modalOut .8s forwards'; // Sale 8 segundos
		+	}</syntaxhighlight>

← Revisión anterior		Revisión del 21:30 9 ago 2020
Línea 7:		Línea 7:
	$home.classList.add('search-active')		$home.classList.add('search-active')
	}); </syntaxhighlight>		}); </syntaxhighlight>
		+	Si tenemos que asignar clases o stylos a mas de un elemento lo mejor es realizar una función y llamarla con el Submit.
		+
		+	<syntaxhighlight lang="js">
		+	function showModal() {
		+	$overlay.classList.add('active'); // añade la clase active
		+	$modal.style.animation = 'modalIn .8s forwards'; // añade el estilo modalIn de 8 segundos se queda en la posición final.
		+	}; </syntaxhighlight>