Commit c52fd79

committed

Adding src atributte to Photo class

1 parent 596ea5a commit c52fd79Copy full SHA for c52fd79

File tree

13 files changed

+27

-19

lines changed

app
- js
  - script.js
- scss
  - components
    - header.scss
  - util
    - theme.scss
dist
index.html

13 files changed

+27

-19

lines changed

`‎app/js/script.js`

Lines changed: 7 additions & 7 deletions

Original file line number	Diff line number	Diff line change
`@@ -20,11 +20,11 @@ const generateId = () => {`
`20`	`20`
`21`	`21`	`// Creamos un array que simule la base de datos donde se almacenan las fotos.`
`22`	`22`	`const photos = [`
`23`		`- new Photo(generateId(), 'ejemploURL', 'ejemploSRC', 'Jose Molina', 'Caballos en montaña'),`
`24`		`- new Photo(generateId(), 'ejemploURL', 'ejemploSRC', 'Ignacio Fernandez', 'Gato saltando'),`
`25`		`- new Photo(generateId(), 'ejemploURL', 'ejemploSRC', 'Martin Caro', 'Autos de Formula 1'),`
`26`		`- new Photo(generateId(), 'ejemploURL', 'ejemploSRC', 'Beatriz Quiroga', 'Buenos Aires'),`
`27`		`- new Photo(generateId(), 'ejemploURL', 'ejemploSRC', 'Jose Molina', 'Persona en montaña')`
	`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')`
`28`	`28`	`];`
`29`	`29`
`30`	`30`	`let errorAlert = document.getElementById('errorAlert');`
`@@ -82,7 +82,7 @@ const filterPhotos = (search) => {`
`82`	`82`	`// Aplicando la función 'forEach' de orden superior. Por cada foto filtrada devolvemos un nuevo elemento para la galería.`
`83`	`83`	`filteredPhotos.forEach((photo) => {`
`84`	`84`	`// Llamamos la función que crea un nuevo elemento de la galería.`
`85`		- createNewGalleryItem(`<h2>${photo.alt}</h2>`);
	`85`	+ createNewGalleryItem(`<img src="${photo.src}" alt="${photo.alt}"></img>`);
`86`	`86`	`});`
`87`	`87`	`}`
`88`	`88`	`}`
`@@ -91,7 +91,7 @@ const filterPhotos = (search) => {`
`91`	`91`	`const getInitialRandomPhotos = () => {`
`92`	`92`	`for (let i=1; i <= 8; i++){`
`93`	`93`	`// Llamamos la función que crea un nuevo elemento de la galería.`
`94`		- createNewGalleryItem(`<h2>Foto ${i}</h2>`);
	`94`	+ createNewGalleryItem(`<img src="/dist/assets/images/example (${i}).jpeg" alt="Foto(${i})"></img>`);
`95`	`95`	`}`
`96`	`96`	`}`
`97`	`97`

`‎app/scss/components/header.scss`

Lines changed: 8 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,10 @@ header{`
`9`	`9`	`background-size: cover;`
`10`	`10`	`background-attachment: fixed;`
`11`	`11`
	`12`	`+ @include mq-down(small){`
	`13`	`+ height: 50vh;`
	`14`	`+ }`
	`15`	`+`
`12`	`16`	`.topbar{`
`13`	`17`	`padding-block: 1rem;`
`14`	`18`
`@@ -94,6 +98,10 @@ header{`
`94`	`98`	`width: 100%;`
`95`	`99`	`height: calc(100% - 225px);`
`96`	`100`
	`101`	`+ @include mq-down(small){`
	`102`	`+ height: calc(100% - 118px);`
	`103`	`+ }`
	`104`	`+`
`97`	`105`	`&__content{`
`98`	`106`	`width: min(100% - 5rem, 500px);`
`99`	`107`	`margin-inline: auto;`

`‎app/scss/util/theme.scss`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`// Header`
`27`	`27`	`--clr-bg-header: #17191f;`
`28`	`28`	`--clr-text-header: #e8e8e8;`
`29`		`- --clr-social-1: #182830;`
	`29`	`+ --clr-social-1: #1a1c22;`
`30`	`30`	`--clr-social-2: #b8c8c8;`
`31`	`31`	`--clr-social-3: #e8e8e8;`
`32`	`32`	`// Gallery`