Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit d201056

Browse files
Adding new function to create gallery items
1 parent 10aa56f commit d201056

File tree

3 files changed

+18
-18
lines changed

3 files changed

+18
-18
lines changed

‎app/js/script.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,18 @@ const removeAllChild = (parent) => {
5050
}
5151
}
5252

53+
// Creamos una función que nos permita crear nuevos elementos (fotos) para la galería.
54+
const createNewGalleryItem = (galleryTitle) => {
55+
// Creamos un nuevo elemento article.
56+
let newGalleryItem = document.createElement('article');
57+
// Le asignamos la clase que define los estilos que poseerán las fotos.
58+
newGalleryItem.classList.add('gallery__item');
59+
// Y le ponemos lo que el usuario quiera mostrar.
60+
newGalleryItem.innerHTML = galleryTitle;
61+
// Y por último le agregamos ese nuevo elemento a la galería. Utilicé el 'prepend' ya que quiero que se agregue al principio, para respetar el orden que simulo en el array.
62+
galleryContainer.prepend(newGalleryItem);
63+
}
64+
5365
// Creamos una función que nos permita saber si lo que ingresa el usuario coincide de alguna forma con el atributo 'Alt' de alguna foto.
5466
const filterPhotos = (search) => {
5567
// Filtramos el array de objetos para ver si la palabra buscada se encuentra en el alt de la foto.
@@ -67,14 +79,8 @@ const filterPhotos = (search) => {
6779

6880
// Aplicando la función 'forEach' de orden superior. Por cada foto filtrada devolvemos un nuevo elemento para la galería.
6981
filteredPhotos.forEach((photo) => {
70-
// Creamos un nuevo elemento article.
71-
let newGalleryItem = document.createElement('article');
72-
// Le asignamos la clase que define los estilos que poseerán las fotos.
73-
newGalleryItem.classList.add('gallery__item')
74-
// Y le ponemos en el h2 el atributo 'alt' de la/las fotos filtradas.
75-
newGalleryItem.innerHTML = `<h2>${photo.alt}</h2>`;
76-
// Y por último le agregamos ese nuevo elemento a la galería. Utilicé el 'prepend' ya que quiero que se agregue al principio, para respetar el orden que simulo en el array.
77-
galleryContainer.prepend(newGalleryItem);
82+
// Llamamos la función que crea un nuevo elemento de la galería.
83+
createNewGalleryItem(`<h2>${photo.alt}</h2>`);
7884
});
7985
}
8086
}
@@ -83,14 +89,8 @@ const filterPhotos = (search) => {
8389
// Creamos una función que al cargarse la página simule que se trajeron fotos aleatoriamente. La misma cargará 8 fotos.
8490
const loadInitialRandomPhotos = () => {
8591
for (let i=0; i > 7; i++){
86-
// Creamos un nuevo elemento article.
87-
let galleryItem = document.createElement('article');
88-
// Le asignamos la clase que define los estilos que poseerán las fotos.
89-
galleryItem.classList.add('gallery__item')
90-
// Y le ponemos en el h2 el nombre de 'Foto' y entre paréntesis el número de foto. Ejemplo 'Foto(1)'.
91-
galleryItem.innerHTML = `<h2>Foto(${i})</h2>`;
92-
// Y por último le agregamos ese nuevo elemento a la galería. Utilicé el 'prepend' ya que quiero que se agregue al principio, para respetar el orden que simulo en el array.
93-
galleryContainer.prepend(galleryItem);
92+
// Llamamos la función que crea un nuevo elemento de la galería.
93+
createNewGalleryItem(`<h2>Foto(${i})</h2>`);
9494
}
9595
}
9696

‎dist/script.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/script.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /