"Image gallery" assessment

Emmanuel_A_Valdez · August 2, 2019, 4:23pm

Thanks for the assessment and tip. Noted.

samuel · August 19, 2019, 2:53pm

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.

chrisdavidmills · August 20, 2019, 8:06am

Hi @samuel,

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

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!

samuel · August 20, 2019, 5:49pm

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

Isaac-Svi · December 2, 2019, 4:40pm

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!

chrisdavidmills · December 3, 2019, 11:26am

@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

Well done on some great work!

Isaac-Svi · December 3, 2019, 12:04pm

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

abdi.faishal · December 7, 2019, 2:54pm

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)';
  }
})

chrisdavidmills · December 9, 2019, 6:45am

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!

gerfolder · December 27, 2019, 3:48pm

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?

chrisdavidmills · December 30, 2019, 11:33am

@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

shurawi · July 2, 2020, 4:28pm

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)";
   }
}

chrisdavidmills · July 3, 2020, 9:41am

Hi @shurawi!

I’ve tested your code and it works perfectly. Well done!

shurawi · July 3, 2020, 3:05pm

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