@@ -15,12 +15,10 @@ class Photo {
1515 Object . assign ( this , json ) ;
1616 }
1717 showModal ( ) {
18- galleryItem . addEventListener ( 'click' , ( ) => {
19- Swal . fire ( {
20- imageUrl : this . src ,
21- imageHeight : 500 ,
22- imageAlt : this . alt
23- } ) ;
18+ Swal . fire ( {
19+ imageUrl : this . src ,
20+ imageHeight : 500 ,
21+ imageAlt : this . alt
2422 } ) ;
2523 }
2624}
@@ -81,6 +79,7 @@ const createNewGalleryItem = (photoObject) => {
8179 let newGalleryItem = document . createElement ( 'article' ) ;
8280 // Le asignamos la clase que define los estilos que poseerán las fotos.
8381 newGalleryItem . classList . add ( 'gallery__item' ) ;
82+ newGalleryItem . setAttribute ( 'photoId' , `${ photo . id } )
8483 // Y le ponemos una etiqueta img con los datos del objeto para que se muestren.
8584 newGalleryItem . innerHTML = `<img src="${ photo . src } ${ photo . alt } ;
8685 // 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.
@@ -97,7 +96,10 @@ const filterPhotos = (search) => {
9796 */
9897 if ( filteredPhotos . length === 0 ) {
9998 // Mostramos que ocurrió un error mediante un h2.
100- gallery . innerHTML = `<h2>No se pudo encontrar ninguna foto relacionada a "${ search } ;
99+ let h2 = document . createElement ( 'h2' )
100+ h2 . innerText = `No se pudo encontrar ninguna foto relacionada a "${ search } ;
101+ gallery . insertBefore ( h2 , galleryContainer ) ;
102+ removeAllChild ( galleryContainer )
101103 } else {
102104 // Eliminamos todas las fotos de la gelería.
103105 removeAllChild ( galleryContainer ) ;
@@ -125,9 +127,13 @@ searchForm.addEventListener('submit', (e) => {
125127// Botón para limpiar el input del form.
126128clearInputButton . addEventListener ( 'click' , ( ) => {
127129 document . getElementById ( 'searchInput' ) . value = '' ;
128- removeAllChild ( galleryContainer ) ;
129- getInitialRandomPhotos ( apiPhotos ) ;
130- errorAlert . innerText = '' ;
130+ if ( gallery . childNodes . length == 3 ) {
131+ removeAllChild ( galleryContainer ) ;
132+ getInitialRandomPhotos ( apiPhotos ) ;
133+ } else {
134+ gallery . childNodes [ 1 ] . remove ( ) ;
135+ getInitialRandomPhotos ( apiPhotos ) ;
136+ }
131137} ) ;
132138
133139
@@ -146,12 +152,15 @@ const getSearchedPhotos = (e) => {
146152 errorAlert . innerText = '' ;
147153 } else {
148154 // Cuando sea 'false', avisamos el error.
149- errorAlert . innerText = 'Debe introducir una palabra mayor a 3 letras' ;
155+ errorAlert . innerText = 'Debe introducir una palabra mayor a 3 letras.' ;
156+ setTimeout ( ( ) => {
157+ errorAlert . innerText = '' ;
158+ } , 1500 ) ;
150159 }
151160}
152161
153162// Cuando se carge la ventana, llamamos a la función que nos carga 8 fotos simulando que son fotos aleatorias.
154- window . addEventListener ( 'load ' , ( ) => {
163+ window . addEventListener ( 'DOMContentLoaded ' , ( ) => {
155164 getInitialRandomPhotos ( apiPhotos ) ;
156165} ) ;
157166
0 commit comments