"Image gallery" assessment

MDN Learn
#50

hello, everyone, I had just finished the assessment ‘Image gallery’, could someone make some comments about my code? thanks.

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

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

function setDisplayedImage(src) {
  displayedImage.setAttribute('src', src);
}

/* Looping through images */
for(let i = 1; i <= 5; ++i) {
  let newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);
  newImage.onclick = function(e) {
    setDisplayedImage(e.target.getAttribute('src'));
  }
}
/* Wiring up the Darken/Lighten button */
btn.onclick = function(e) {
  let btnClass = e.target.getAttribute('class');
  if(btnClass == 'dark') {
    e.target.setAttribute('class', 'light');
    e.target.textContent = 'Lighten';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  }
  else {
    e.target.setAttribute('class', 'dark');
    e.target.textContent = 'Darken';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  }
}
#51

@Tom-Vanderboom hi there!

I’ve had a look at your code, and it works just like we want it to. I don’t really have any specific comments on how you could improve!

#52

thank you for your reply.:wink:

#53

Thanks for your response!

#54

Hi There,

                  I had a similar image gallery on [mysite](http://www.bitwallet.org/) , but i updated that to a new JS based gallery.

thanks for the info.

#55

why does it work properly when i use directly newImage.src in this loop?

image
image.png1363×637 200 KB

#57

Hi, i’m new here pls assess my code

let displayedImage = document.querySelector('.displayed-img');
let thumbBar = document.querySelector('.thumb-bar');
let btn = document.querySelector('button');
let overlay = document.querySelector('.overlay');

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

btn.onclick = function() Preformatted text{
let classCheck = btn.getAttribute('class');
if(classCheck === '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)';
}
}

#58

Hi @740479865 — your code is working because you have used an array to store the image names and then set the src values directly from those in each step. We don’t use an array but use a separate function.

Both techniques work pretty reasonably.

#59

Hello there @papans.maxkeeble!

I’ve checked your code out, and it looks to be working perfectly. Great work!

#60

Hi Guys,
I’m working through the JS course and have just finished the img gallery project.
I had been getting through the course and it’s exercises rather quickly until I got to this one. Found it to be pretty challenging and frustrating at times but I managed to sort it out after 3 days working on it.

Here is my solution:
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 */

var imgArray = [‘images\pic1.jpg’, ‘images\pic2.jpg’, ‘images\pic3.jpg’, ‘images\pic4.jpg’, ‘images\pic5.jpg’];
for (var i = 0; i < imgArray.length; i++) {
var newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, imgArray[i]);
thumbBar.appendChild(newImage);
function imgDisplay(e) {
var newSrc = e.target.getAttribute(‘src’);
displayedImage.setAttribute(‘src’, newSrc);
}
newImage.addEventListener(‘click’, imgDisplay);
}

/* Wiring up the Darken/Lighten button */
function btnAction() {
var btnClassName = btn.getAttribute(‘class’);
if (btnClassName === ‘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)”;
}
}

btn.addEventListener(‘click’, btnAction);

#61

Hello, @Emmanuel_A_Valdez, and welcome to our community! I am so glad that you kept working on this exercise — you have ended up with a really good set of code, which works well.

The only thing I noticed that you should change is as follows — this line uses backslashes in the image paths:

var imgArray = [‘images\pic1.jpg’, ‘images\pic2.jpg’, ‘images\pic3.jpg’, ‘images\pic4.jpg’, ‘images\pic5.jpg’];

You should replace those with forward slashes, like so:

var imgArray = ['images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg', 'images/pic5.jpg'];

This is because web servers in general use forward slashes — this code would break if you tried to run it through a server (and indeed, on my Mac). I’m guessing you are using a Windows machine for your coding? Windows tends to be more permissive when using backslashes.

#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!