"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)';
  }
})
1 Like
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:

74

Image gallery

Hi everyone!Please review my JS code)

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

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

/* Looping through images */

for (var i = 1; i <= 5; i ++) {
  var newImage = document.createElement("img");
  newImage.setAttribute("src", "images/pic" + i + ".jpg");
  thumbBar.appendChild(newImage);  
    
  newImage.onclick = function (e) {      
    var imgAttr = e.target.getAttribute("src");      
    displayedImage.setAttribute("src", imgAttr);
  }     
}
  
/* Wiring up the Darken/Lighten button */
  
btn.onclick = function () {
  var btnAttr = btn.getAttribute("class");
  if (btnAttr === "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)";
   }
}
75

Hi @shurawi!

Iā€™ve tested your code and it works perfectly. Well done!

76

Hi @chrisdavidmills, thank you so much for your assessment!