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 d1ba4d7

Browse files
Adding class method functionality
1 parent 5bb49db commit d1ba4d7

File tree

3 files changed

+90
-89
lines changed

3 files changed

+90
-89
lines changed

‎app/js/script.js

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Photo {
1111
this.alt = alt; // Texto descriptivo de la imagen el cual usa la API para filtrar y devolver resultados de búsqueda.
1212
} */
1313
// Creamos el constructor de la clase a partir de las propiedades del objeto dado por un json de una API.
14-
constructor(json){
14+
constructor(json){
1515
Object.assign(this, json);
1616
}
1717
showModal(){
@@ -51,17 +51,7 @@ let clearInputButton = document.getElementById('clearInput');
5151
let searchForm = document.getElementById('searchForm');
5252
let gallery = document.getElementById('gallery');
5353
let galleryContainer = document.getElementById('galleryContainer');
54-
let galleryItem = document.getElementsByClassName('gallery__item');
55-
56-
// Creamos una función que nos permita validar si lo que ingresa el usuario cumple el requisito especificado. Si no lo cumple devuelve 'false', y si lo cumple devuelve 'true'.
57-
const validateSearch = (word) => {
58-
// Verificamos si la palabra posee más de 3 caracteres.
59-
if (word.length < 3){
60-
return false;
61-
} else {
62-
return true;
63-
}
64-
}
54+
6555

6656
// Creamos una función que nos permita eliminar todos los hijos de un elemento.
6757
const removeAllChild = (parent) => {
@@ -84,6 +74,8 @@ const createNewGalleryItem = (photoObject) => {
8474
newGalleryItem.innerHTML = `<img src="${photo.src}" alt="${photo.alt}"></img>`;
8575
// 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.
8676
galleryContainer.prepend(newGalleryItem);
77+
// Retornamos el objeto 'Photo' para poder utilizarlo posteriormente.
78+
return photo;
8779
}
8880

8981
// 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.
@@ -107,46 +99,25 @@ const filterPhotos = (search) => {
10799
// Eliminamos todas las fotos de la gelería.
108100
removeAllChild(galleryContainer);
109101
// Aplicando la función 'forEach' de orden superior. Por cada foto filtrada devolvemos un nuevo elemento para la galería.
110-
filteredPhotos.forEach((photo) => {
102+
filteredPhotos.forEach((photoObject) => {
111103
// Llamamos la función que crea un nuevo elemento de la galería. 'photo' simula un objeto de un json que nos devuelve la API.
112-
createNewGalleryItem(photo);
104+
let photo = createNewGalleryItem(photoObject);
105+
let galleryItem = document.querySelector('article');
106+
galleryItem.addEventListener('click', () => photo.showModal());
113107
});
114108
}
115109
}
116110

117111
// Creamos una función que al cargarse la página simule que se trajeron fotos aleatoriamente. La misma cargará 8 fotos.
118112
const getInitialRandomPhotos = (photosArray) => {
119113
let firstEightItems = photosArray.slice(0, 8);
120-
firstEightItems.forEach((photo) => {
121-
createNewGalleryItem(photo);
114+
firstEightItems.forEach((photoObject) => {
115+
let photo = createNewGalleryItem(photoObject);
116+
let galleryItem = document.querySelector('article');
117+
galleryItem.addEventListener('click', () => photo.showModal());
122118
});
123119
}
124120

125-
// Evento submit del form, donde se llama a una función que trae las fotos a partir de la búsqueda.
126-
searchForm.addEventListener('submit', (e) => {
127-
// Llama a la función principal de la aplicación.
128-
getSearchedPhotos(e);
129-
});
130-
131-
// Botón para limpiar el input del form.
132-
clearInputButton.addEventListener('click', () => {
133-
// Limpiamos el input.
134-
document.getElementById('searchInput').value = '';
135-
// Cuando la galería tiene 3 hijos es porque no se tuvo que crear el h2 para error. Sino, si se tuvo que crear el h2 por lo que tiene más hijos.
136-
if (gallery.childNodes.length == 3){
137-
// Borra los hijos del contenedor de la galería.
138-
removeAllChild(galleryContainer);
139-
// Carga las fotos aleatorias del principio.
140-
getInitialRandomPhotos(apiPhotos);
141-
}else{
142-
// Borra el h2 con el error.
143-
gallery.childNodes[1].remove();
144-
// Carga las fotos aleatorias del principio.
145-
getInitialRandomPhotos(apiPhotos);
146-
}
147-
});
148-
149-
150121
// Creamos una función que nos permita tomar lo que el usuario ingresa en la barra de búsqueda y fijarnos si matchea con alguna de las fotos que tenemos guardadas en el array (simulador de base de datos).
151122
const getSearchedPhotos = (e) => {
152123
// Evitamos el funcionamiento por defualt del evento submit.
@@ -156,12 +127,12 @@ const getSearchedPhotos = (e) => {
156127
// Y también guardamos el value en otra.
157128
const userSearch = inputSearch.value;
158129
// Validamos el value del input.
159-
if (validateSearch(userSearch)===true){
160-
// Cuando sea 'true', llamamos a la función que filtra.
130+
if (userSearch.length>3){
131+
// Llamamos a la función que filtra.
161132
filterPhotos(userSearch);
162133
errorAlert.innerText = '';
163134
} else{
164-
// Cuando sea 'false', avisamos el error.
135+
// Sino, avisamos el error.
165136
errorAlert.innerText = 'Debe introducir una palabra mayor a 3 letras.';
166137
// Creamos un timer que limpie el 'errorAlert' despues de 1.5 segundos.
167138
setTimeout(() => {
@@ -170,11 +141,35 @@ const getSearchedPhotos = (e) => {
170141
}
171142
}
172143

144+
// Evento submit del form, donde se llama a una función que trae las fotos a partir de la búsqueda.
145+
searchForm.addEventListener('submit', (e) => getSearchedPhotos(e));
146+
173147
// Cuando se carge la ventana, llamamos a la función que nos carga 8 fotos simulando que son fotos aleatorias.
174-
window.addEventListener('DOMContentLoaded', () => {
175-
getInitialRandomPhotos(apiPhotos);
148+
document.addEventListener('DOMContentLoaded', getInitialRandomPhotos(apiPhotos));
149+
150+
// Botón para limpiar el input del form.
151+
clearInputButton.addEventListener('click', () => {
152+
// Limpiamos el input.
153+
document.getElementById('searchInput').value = '';
154+
// Cuando la galería tiene 3 hijos es porque no se tuvo que crear el h2 para error. Sino, si se tuvo que crear el h2 por lo que tiene más hijos.
155+
if (gallery.childNodes.length == 3){
156+
// Borra los hijos del contenedor de la galería.
157+
removeAllChild(galleryContainer);
158+
// Carga las fotos aleatorias del principio.
159+
getInitialRandomPhotos(apiPhotos);
160+
}else{
161+
// Borra el h2 con el error.
162+
gallery.childNodes[1].remove();
163+
// Carga las fotos aleatorias del principio.
164+
getInitialRandomPhotos(apiPhotos);
165+
}
176166
});
177167

168+
169+
170+
171+
172+
178173
// Toggle theme functionality
179174

180175
let toggleTheme = document.getElementById('toggleTheme');

‎dist/script.js

Lines changed: 48 additions & 42 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

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