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 082e037

Browse files
Using ternary operators
1 parent 2061517 commit 082e037

File tree

4 files changed

+100
-69
lines changed

4 files changed

+100
-69
lines changed

‎app/js/script.js

Lines changed: 49 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,25 @@ Creamos un objeto teniendo en cuenta los parámetros que nos devuelve la API en
33
Link: https://www.pexels.com/es-es/api/documentation/#photos-overview.
44
*/
55
class Photo {
6-
constructor(id, url, src, photographer, alt){
6+
/* constructor(id, url, src, photographer, alt){
77
this.id = id; // Nro identificador de cada foto en particular.
88
this.url = url; // URL de la imagen original subida en Pexels.
99
this.src = src; // URL de la imagen para ser utilizada en nuestro proyecto.
1010
this.photographer = photographer; // Nombre del fotografo.
1111
this.alt = alt; // Texto descriptivo de la imagen el cual usa la API para filtrar y devolver resultados de búsqueda.
12+
} */
13+
// Creamos el constructor de la clase a partir de las propiedades del objeto dado por un json de una API.
14+
constructor (json){
15+
Object.assign(this, json);
16+
}
17+
showModal(){
18+
galleryItem.addEventListener('click', () => {
19+
Swal.fire({
20+
imageUrl: this.src,
21+
imageHeight: 500,
22+
imageAlt: this.alt
23+
});
24+
});
1225
}
1326
}
1427

@@ -18,21 +31,29 @@ const generateId = () => {
1831
return id;
1932
}
2033

21-
// Creamos un array que simule la base de datos donde se almacenan las fotos.
22-
const photos = [
23-
new Photo(generateId(), 'ejemploURL', '/dist/assets/images/caballomontaña.jpg', 'Jose Molina', 'Caballos en montaña'),
24-
new Photo(generateId(), 'ejemploURL', '/dist/assets/images/gatosaltando.jpg', 'Ignacio Fernandez', 'Gato saltando'),
25-
new Photo(generateId(), 'ejemploURL', '/dist/assets/images/formula1.jpg', 'Martin Caro', 'Autos de Formula 1'),
26-
new Photo(generateId(), 'ejemploURL', '/dist/assets/images/buenosaires.jpg', 'Beatriz Quiroga', 'Buenos Aires'),
27-
new Photo(generateId(), 'ejemploURL', '/dist/assets/images/personamontaña.jpg', 'Jose Molina', 'Persona en montaña')
34+
// Creamos un array que simule el json que devuelve una API. Los primeros 8 elementos representan fotos random. El resto representan fotos para ser buscadas.
35+
const apiPhotos = [
36+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (1).jpeg', photographer: '', alt: ''},
37+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (2).jpeg', photographer: '', alt: ''},
38+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (3).jpeg', photographer: '', alt: ''},
39+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (4).jpeg', photographer: '', alt: ''},
40+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (5).jpeg', photographer: '', alt: ''},
41+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (6).jpeg', photographer: '', alt: ''},
42+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (7).jpeg', photographer: '', alt: ''},
43+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/example (8).jpeg', photographer: '', alt: ''},
44+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/caballomontaña.jpg', photographer: 'Jose Molina', alt: 'Caballos en montaña'},
45+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/gatosaltando.jpg', photographer: 'Ignacio Fernandez', alt: 'Gato saltando'},
46+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/formula1.jpg', photographer: 'Martin Caro', alt: 'Autos de Formula 1'},
47+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/buenosaires.jpg', photographer: 'Beatriz Quiroga', alt: 'Buenos Aires'},
48+
{id: generateId(), url: 'ejemploURL', src: '/dist/assets/images/personamontaña.jpg', photographer: 'Jose Molina', alt: 'Persona en montaña'}
2849
];
2950

3051
let errorAlert = document.getElementById('errorAlert');
31-
let inputSearch = document.querySelector('input');
3252
let clearInputButton = document.getElementById('clearInput');
3353
let searchForm = document.getElementById('searchForm');
3454
let gallery = document.getElementById('gallery');
3555
let galleryContainer = document.getElementById('galleryContainer');
56+
let galleryItem = document.getElementsByClassName('gallery__item');
3657

3758
// 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'.
3859
const validateSearch = (word) => {
@@ -53,46 +74,47 @@ const removeAllChild = (parent) => {
5374
}
5475

5576
// Creamos una función que nos permita crear nuevos elementos (fotos) para la galería.
56-
const createNewGalleryItem = (galleryTitle) => {
77+
const createNewGalleryItem = (photoObject) => {
78+
// Creamos un nuevo objeto 'Photo' a partir del objeto que nos dá el 'json'.
79+
const photo = new Photo(photoObject);
5780
// Creamos un nuevo elemento article.
5881
let newGalleryItem = document.createElement('article');
5982
// Le asignamos la clase que define los estilos que poseerán las fotos.
6083
newGalleryItem.classList.add('gallery__item');
61-
// Y le ponemos lo que el usuario quiera mostrar.
62-
newGalleryItem.innerHTML = galleryTitle;
84+
// Y le ponemos una etiqueta img con los datos del objeto para que se muestren.
85+
newGalleryItem.innerHTML = `<img src="${photo.src}" alt="${photo.alt}"></img>`;
6386
// 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.
6487
galleryContainer.prepend(newGalleryItem);
6588
}
6689

6790
// 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.
6891
const filterPhotos = (search) => {
6992
// Filtramos el array de objetos para ver si la palabra buscada se encuentra en el alt de la foto.
70-
let filteredPhotos = photos.filter(photo => photo.alt.toLowerCase().includes(search));
93+
let filteredPhotos = apiPhotos.filter(photo => photo.alt.toLowerCase().includes(search));
7194
/*
7295
Array.filter() devuelve un array nuevo si se cumple la condición y uno vacío si no se cumple.
7396
Comprobamos si el array está vacío, es decir, que la plabra buscada no matcheó con ningún objeto de nuestro array(simulador de base de datos).
7497
*/
75-
if (filteredPhotos.length == 0){
98+
if (filteredPhotos.length === 0){
7699
// Mostramos que ocurrió un error mediante un h2.
77100
gallery.innerHTML = `<h2>No se pudo encontrar ninguna foto relacionada a "${search}".</h2>`;
78101
} else{
79102
// Eliminamos todas las fotos de la gelería.
80103
removeAllChild(galleryContainer);
81-
82104
// Aplicando la función 'forEach' de orden superior. Por cada foto filtrada devolvemos un nuevo elemento para la galería.
83105
filteredPhotos.forEach((photo) => {
84-
// Llamamos la función que crea un nuevo elemento de la galería.
85-
createNewGalleryItem(`<img src="${photo.src}" alt="${photo.alt}"></img>`);
106+
// 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.
107+
createNewGalleryItem(photo);
86108
});
87109
}
88110
}
89111

90112
// Creamos una función que al cargarse la página simule que se trajeron fotos aleatoriamente. La misma cargará 8 fotos.
91-
const getInitialRandomPhotos = () => {
92-
for(let i=1;i<=8;i++){
93-
// Llamamos la función que crea un nuevo elemento de la galería.
94-
createNewGalleryItem(`<img src="/dist/assets/images/example (${i}).jpeg" alt="Foto(${i})"></img>`);
95-
}
113+
const getInitialRandomPhotos = (photosArray) => {
114+
let firstEightItems=photosArray.slice(0,8);
115+
firstEightItems.forEach((photo)=>{
116+
createNewGalleryItem(photo);
117+
});
96118
}
97119

98120
// Eveneto submit del form, donde se llama a una función que trae las fotos a partir de la búsqueda.
@@ -104,10 +126,11 @@ searchForm.addEventListener('submit', (e) => {
104126
clearInputButton.addEventListener('click', () => {
105127
document.getElementById('searchInput').value = '';
106128
removeAllChild(galleryContainer);
107-
getInitialRandomPhotos();
129+
getInitialRandomPhotos(apiPhotos);
108130
errorAlert.innerText = '';
109131
});
110132

133+
111134
// 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).
112135
const getSearchedPhotos = (e) => {
113136
// Evitamos el funcionamiento por defualt del evento submit.
@@ -129,7 +152,7 @@ const getSearchedPhotos = (e) => {
129152

130153
// Cuando se carge la ventana, llamamos a la función que nos carga 8 fotos simulando que son fotos aleatorias.
131154
window.addEventListener('load', () => {
132-
getInitialRandomPhotos();
155+
getInitialRandomPhotos(apiPhotos);
133156
});
134157

135158
// Toggle theme functionality
@@ -152,20 +175,12 @@ const disableDarkTheme = () => {
152175
ball.style.transform = 'translateX(0)';
153176
}
154177

155-
if (theme === 'darkTheme'){
156-
enableDarkTheme();
157-
}else{
158-
disableDarkTheme();
159-
}
178+
theme === 'darkTheme' ? enableDarkTheme() : disableDarkTheme();
160179

161180
// Cuando se aplique el evento click al botón toggle, si el local storage 'theme' no es 'darkTheme', lo habilitamos y sino lo deshabilitamos.
162181
toggleTheme.addEventListener('click', () => {
163182
// Actualizamos el local storage cuando se hace click.
164183
theme = localStorage.getItem('theme');
165-
if (theme != 'darkTheme'){
166-
enableDarkTheme();
167-
}else{
168-
disableDarkTheme();
169-
}
184+
theme != 'darkTheme' ? enableDarkTheme() : disableDarkTheme();
170185
});
171186

‎dist/script.js

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