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 40e2e84

Browse files
Adding fetch
1 parent f83cca1 commit 40e2e84

File tree

3 files changed

+77
-39
lines changed

3 files changed

+77
-39
lines changed

‎app/js/script.js

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const HEADERS = {
2929
}
3030
}
3131

32+
// Definimos los elementos del DOM que necesitaremos.
3233
let loadMoreBtn = document.getElementById('loadMoreBtn');
3334
let errorAlert = document.getElementById('errorAlert');
3435
let clearInputButton = document.getElementById('clearInput');
@@ -45,10 +46,10 @@ const removeAllChild = (parent) => {
4546
}
4647
}
4748

49+
// Definimos algunas variables globales que necesitaremos.
4850
let pageIndex = 1;
4951
let searchValue;
5052

51-
5253
// Creamos una función que nos permita realizar el fetch a partir de una URL y retornar la 'data' para asi trabajarla como querramos.
5354
const fetchPhotos = async (baseURL) => {
5455
const res = await fetch(baseURL, HEADERS);
@@ -104,28 +105,40 @@ const validateErrors = (data, searchValue) => {
104105
// Creamos una función que nos devuelva las fotos a partir de lo ingresado por el usuario en la barra de búsqueda.
105106
const getSearchedPhotos = async (e) => {
106107
e.preventDefault();
108+
// Capturamos el valor del input mediante el evento.
107109
searchValue = e.target.querySelector('input').value;
110+
// Y lo validamos.
108111
if (validateSearchValue(searchValue) === true){
112+
// Realizamos el fetch de la petición.
109113
const data = await fetchPhotos(`https://api.pexels.com/v1/search?query=${searchValue}&per_page=16`);
114+
// Validamos los errores si los hay.
110115
validateErrors(data, searchValue);
116+
// Vaciamos el contenedor de la galería.
111117
removeAllChild(galleryContainer);
118+
// Cargamos los nuevos items de la galería.
112119
generateHTML(data, 'search');
113120
}
114121
}
115122

116123
// Creamos una función que nos devuelva otras páginas de fotos respecto de la búsqueda anterior.
117124
const getMoreSearchedPhotos = async (index) => {
125+
// Realizamos el fetch de la petición.
118126
const data = await fetchPhotos(`https://api.pexels.com/v1/search?query=${searchValue}&per_page=16&page=${index}`);
127+
// Validamos los errores si los hay.
119128
validateErrors(data, searchValue);
129+
// Cargamos los nuevos items de la galería.
120130
generateHTML(data, 'search');
121131
}
122132

123133
// Creamos una función que nos devuelva fotos aleatorias.
124134
const getInitialRandomPhotos = async (index) => {
135+
// Realizamos el fetch de la petición.
125136
const data = await fetchPhotos(`https://api.pexels.com/v1/curated?per_page=16&page=${index}`);
137+
// Verificamos si no tiene otra página de paginación para no mostrar más el botón.
126138
if (!data.next_page){
127139
loadMoreBtn.style.display = 'none'
128140
}
141+
// Cargamos los nuevos items de la galería.
129142
generateHTML(data, 'curated');
130143
}
131144

@@ -134,49 +147,54 @@ const loadMorePhotos = () => {
134147
let index = ++pageIndex;
135148
let galleryItem = document.querySelector('article');
136149
let dataPhoto = galleryItem.getAttribute('data-photo')
150+
// Según el valor del 'data-photo' se llama a la función que corresponde.
137151
if (dataPhoto == 'curated'){
138-
getInitialRandomPhotos(index);
152+
getInitialRandomPhotos(index);// Función para fotos random.
139153
}else{
140-
getMoreSearchedPhotos(index);
154+
getMoreSearchedPhotos(index);// Función para fotos buscadas.
141155
}
142156
}
143157

144-
145-
/**** EVENTOS ****/
146-
147-
// Evento submit del form, donde se llama a una función que trae las fotos a partir de la búsqueda.
148-
searchForm.addEventListener('submit', (e) => getSearchedPhotos(e));
149-
// Evento click del botón para cargar más fotos mediante las paginaciones de la API.
150-
loadMoreBtn.addEventListener('click', () => loadMorePhotos());
151-
// Cuando se carge la ventana, llamamos a la función que nos carga 8 fotos simulando que son fotos aleatorias.
152-
document.addEventListener('DOMContentLoaded', getInitialRandomPhotos(pageIndex));
153-
154-
// Botón para limpiar el input del form.
155-
clearInputButton.addEventListener('click', () => {
158+
// Creamos una función que nos permita limpiar el 'value' del input además de limpiar la galería según su contenido.
159+
const clearInputAndGallery = () => {
156160
let pageIndex = 1;
157161
// Limpiamos el input.
158162
document.getElementById('searchInput').value = '';
159-
// 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.
160-
if (gallery.childNodes.length === 3){
163+
// Cuando la galería tiene 5 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.
164+
if (gallery.childNodes.length === 5){
161165
// Borra los hijos del contenedor de la galería.
162166
removeAllChild(galleryContainer);
163167
// Carga las fotos aleatorias del principio.
164168
getInitialRandomPhotos(pageIndex);
165169
}else{
166170
// Borra el h2 con el error.
167171
gallery.childNodes[0].remove();
172+
// Borra los hijos del contenedor de la galería.
173+
removeAllChild(galleryContainer);
168174
// Carga las fotos aleatorias del principio.
169175
getInitialRandomPhotos(pageIndex);
170176
}
177+
// Mostramos el botón de cargar más fotos.
171178
loadMoreBtn.style.display = 'flex';
172-
});
179+
}
173180

174181

182+
/**** EVENTOS ****/
183+
184+
// Cuando se carge la ventana, llamamos a la función que nos carga 8 fotos simulando que son fotos aleatorias.
185+
document.addEventListener('DOMContentLoaded', getInitialRandomPhotos(pageIndex));
186+
// Evento submit del form, donde se llama a una función que trae las fotos a partir de la búsqueda.
187+
searchForm.addEventListener('submit', (e) => getSearchedPhotos(e));
188+
// Evento click del botón para cargar más fotos mediante las paginaciones de la API.
189+
loadMoreBtn.addEventListener('click', () => loadMorePhotos());
190+
// Evento click del botón para limpiar el input y la galería.
191+
clearInputButton.addEventListener('click', () => clearInputAndGallery());
175192

193+
/*******************/
176194

177195

178196

179-
// Toggle theme functionality
197+
/**** TOGGLE THEME FUNCIONALITY ****/
180198

181199
let toggleTheme = document.getElementById('toggleTheme');
182200
let ball = document.getElementById('ball');
@@ -205,3 +223,4 @@ toggleTheme.addEventListener('click', () => {
205223
theme != 'darkTheme' ? enableDarkTheme() : disableDarkTheme();
206224
});
207225

226+
/*************************************/

‎dist/script.js

Lines changed: 38 additions & 19 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 によって変換されたページ (->オリジナル) /