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 b014d1c

Browse files
Adding theme mode toggle button
1 parent 6e34e21 commit b014d1c

File tree

7 files changed

+16
-12
lines changed

7 files changed

+16
-12
lines changed

‎app/js/script.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const validateSearch = (word) => {
4040
}
4141

4242
let gallery = document.getElementById('gallery');
43+
let galleryContainer = document.getElementById('galleryContainer');
4344

4445
// Creamos una función que nos permita eliminar todos los hijos de un elemento.
4546
const removeAllChild = (parent) => {
@@ -58,10 +59,11 @@ const filterPhotos = (search) => {
5859
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).
5960
*/
6061
if (filteredPhotos.length == 0){
61-
alert('No se pudo encontrar ninguna foto relacionada a su búsqueda.');
62+
// Mostramos que ocurrió un error mediante un h2.
63+
gallery.innerHTML = `<h2>No se pudo encontrar ninguna foto relacionada a "${search}".</h2>`;
6264
} else{
6365
// Eliminamos todas las fotos de la gelería.
64-
removeAllChild(gallery);
66+
removeAllChild(galleryContainer);
6567

6668
// Aplicando la función 'forEach' de orden superior. Por cada foto filtrada devolvemos un nuevo elemento para la galería.
6769
filteredPhotos.forEach((photo) => {
@@ -72,11 +74,12 @@ const filterPhotos = (search) => {
7274
// Y le ponemos en el h2 el atributo 'alt' de la/las fotos filtradas.
7375
newGalleryItem.innerHTML = `<h2>${photo.alt}</h2>`;
7476
// 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.
75-
gallery.prepend(newGalleryItem);
77+
galleryContainer.prepend(newGalleryItem);
7678
});
7779
}
7880
}
7981

82+
// Por algún motivo que desconozco no pude hacer funcionar esta función.
8083
// Creamos una función que al cargarse la página simule que se trajeron fotos aleatoriamente. La misma cargará 8 fotos.
8184
const loadInitialRandomPhotos = () => {
8285
for (let i=0; i > 7; i++){
@@ -87,7 +90,7 @@ const loadInitialRandomPhotos = () => {
8790
// Y le ponemos en el h2 el nombre de 'Foto' y entre paréntesis el número de foto. Ejemplo 'Foto(1)'.
8891
galleryItem.innerHTML = `<h2>Foto(${i})</h2>`;
8992
// 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.
90-
gallery.prepend(galleryItem);
93+
galleryContainer.prepend(galleryItem);
9194
}
9295
}
9396

‎app/scss/components/header.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,11 @@ header{
7474

7575
&.fa{
7676
&-moon{
77-
color: pink;
77+
color: #fadadd;
7878
}
7979

8080
&-sun{
81-
color: yellow;
81+
color: #f8f1ae;
8282
}
8383
}
8484
}
@@ -90,6 +90,7 @@ header{
9090
position: absolute;
9191
border-radius: 50%;
9292
transition: transform 0.2s linear;
93+
cursor: pointer;
9394
}
9495
}
9596
}

‎dist/script.js

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