"Image gallery" assessment

MDN Learn
#62

Thanks for the assessment and tip. Noted.

#63

Hi everyone! Hope youā€™re having fun. I have just finished my image gallery and hope it can be accessed. Do find my main.js file below:

var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');

var btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');

/* Looping through images */

for (let i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', `images/pic${i}.jpg`);
  thumbBar.appendChild(newImage);
  newImage.onclick = function(e) {
    newImage = e.target.getAttribute('src');
    displayedImage.setAttribute('src', newImage);
  }
}

/* Wiring up the Darken/Lighten button */
btn.onclick = function() {
  if (btn.getAttribute('class') === 'dark') {
    btn.setAttribute('class', 'light');
    btn.textContent = 'Lighten';
    overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
  } else {
    btn.setAttribute('class', 'dark');
    btn.textContent = 'Darken';
    overlay.style.backgroundColor = 'rgba(0,0,0,0)';
  }
}

Many thanks.

#64

Hi @samuel,

I just got back off holiday, so having less fun than I was last week :wink:

I looked through your code, and tested it, and it works perfectly. Nice usage of a template literal inside the for loop as well. Iā€™d give this full marks; well done!

1 Like
#65

Good to know youā€™re back @chrisdavidmills. Many thanks for the assessment. Iā€™m loving this.

#67

Hi, hope whoever reads this is doing well.

Hereā€™s my code for the project. I did the project without looking at the suggestions, so itā€™s a little different from the official code. I was hoping someone could assess my code:

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Looping through images */
for (let i = 1; i < 6; i++) {
  const newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' +  i + '.jpg');
  thumbBar.appendChild(newImage);

  newImage.onclick = function () {
    displayedImage.setAttribute('src', this.getAttribute('src'));
  };
}

/* Wiring up the Darken/Lighten button */
btn.onclick = function () {
  if (btn.innerHTML === 'Darken') {
    overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
    btn.innerHTML = 'Lighten';
  } else {
    overlay.style.backgroundColor = 'rgba(0,0,0,0)';
    btn.innerHTML = 'Darken';
  }
};

Thanks a lot. All the best!

#68

@Isaac-Svi hi there, and thanks for sending in your code! I have tested this, and it works really well ā€” probably more efficient than our original version in fact :wink:

Well done on some great work!

#69

Hi, thank you so much for your assessment! Very much appreciated. Have a great day. :smile:

#70

Hereā€™s mine

var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');

var btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');

/* Looping through images */
for(let i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);

  newImage.addEventListener('click', function(e) {
    let src = e.target.getAttribute('src');
    displayedImage.setAttribute('src', src);
  });
}

/* Wiring up the Darken/Lighten button */
btn.addEventListener('click', function() {
  if (btn.getAttribute('class') === 'dark') {
    btn.setAttribute('class', 'light');
    btn.textContent = 'Lighten';
    overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
  } else {
    btn.setAttribute('class', 'dark');
    btn.textContent = 'Darken';
    overlay.style.backgroundColor = 'rgba(0,0,0,0)';
  }
})
#71

Hi there @abdi.faishal, and welcome to our community! Thank you for sending in your code. Iā€™ve tested it, and it works perfectly; well done on some great work!

#72

Hi,

Iā€™m confused about the first point under Adding an onclick handler to each thumbnail image. It says

Using newImage wonā€™t work, as the loop is completed before the event handlers are applied; doing it this way would result in the src value of the last <img> being returned in every case.

However, for me it works just fine. I used

newImage.onclick = function() {
  displayedImage.src = newImage.src;
}

The solution instead uses

newImage.onclick = function(event) {
  displayedImage.src = event.target.src;
}

(The solution also uses getAttribute and setAttribute instead of the dot notation, but this doesnā€™t matter for the above.)

I am confused to what is the difference between using myImage and event.target, when my code works just fine?

#73

@gerfolder thanks for sharing your solution here. The way that I was doing it was just needlessly overcomplicated. Iā€™ve updated the assessment description and files to your solution instead :wink: