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 8e476f1

Browse files
Adding event
1 parent d201056 commit 8e476f1

File tree

8 files changed

+154
-26
lines changed

8 files changed

+154
-26
lines changed

‎app/js/script.js

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ const validateSearch = (word) => {
3939
}
4040
}
4141

42+
let inputSearch = document.querySelector('input');
43+
let clearInputButton = document.getElementById('clearInput');
44+
let searchForm = document.getElementById('searchForm');
4245
let gallery = document.getElementById('gallery');
4346
let galleryContainer = document.getElementById('galleryContainer');
4447

@@ -87,27 +90,27 @@ const filterPhotos = (search) => {
8790

8891
// Por algún motivo que desconozco no pude hacer funcionar esta función.
8992
// Creamos una función que al cargarse la página simule que se trajeron fotos aleatoriamente. La misma cargará 8 fotos.
90-
const loadInitialRandomPhotos = () => {
93+
const getInitialRandomPhotos = () => {
9194
for (let i=0; i > 7; i++){
9295
// Llamamos la función que crea un nuevo elemento de la galería.
9396
createNewGalleryItem(`<h2>Foto(${i})</h2>`);
9497
}
9598
}
9699

97-
// IMPORTANTE. Mantengo el prompt ya que necesito si o si los eventos para poder leer el input y devolver las fotos.
98-
// Tuve que poner esto ya que, a pesar que todavia no lo vimos, me molestaba bastante que no me cargue la página sino interactuaba con el prompt.
99-
window.onload = () => {
100-
while(true){
101-
// A traves de prompt pedimos el ingreso de una palabra o una frase.
102-
let search = prompt('Introduzca lo que desee buscar:');
103-
// Validamos si el resultado es 'true' o 'false'.
104-
if (validateSearch(search) == true){
105-
// Cuando sea 'true', llamamos a la función que filtra.
106-
filterPhotos(search);
107-
break;
108-
} else{
109-
// Cuando es 'false', lanzamos la alerta de que no cumple la condición.
110-
alert('Debe introducir una palabra mayor a 3 letras');
111-
}
100+
searchForm.addEventListener('submit', (e) => {
101+
getSearchedPhotos(e);
102+
});
103+
104+
const getSearchedPhotos = (e) => {
105+
e.preventDefault();
106+
let inputSearch = e.target.querySelector('input');
107+
const userSearch = inputSearch.value;
108+
if (validateSearch(userSearch) === true){
109+
// Cuando sea 'true', llamamos a la función que filtra.
110+
filterPhotos(userSearch);
111+
} else{
112+
// Cuando es 'false', lanzamos la alerta de que no cumple la condición.
113+
alert('Debe introducir una palabra mayor a 3 letras');
112114
}
113115
}
116+

‎app/scss/components/header.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,20 @@ header{
133133
}
134134
}
135135

136-
i{
136+
.fa-magnifying-glass{
137137
position: absolute;
138138
top: 30%;
139+
color: $clr--primary--1;
139140
left: 1rem;
141+
}
142+
143+
.fa-xmark{
144+
display: none;
145+
position: absolute;
146+
top: 33%;
140147
color: $clr--primary--1;
148+
right: 2rem;
149+
cursor: pointer;
141150
}
142151
}
143152
}

‎dist/script.js

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