@Let_Me_Help_You — thanks for sending your code in!
This is really good; works fine and if anything looks to be slightly more efficient than our version. There are a couple of minor differences — check it out here to explore it in more detail: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js.
Hi, this is my code. The image gallery seems to be working fine and doing what it’s supposed to do.
I do think I skipped the whole find the current image source using the getAttribute() thing. I’m wondering if it matters as long as the image gallery does what it’s meant to do or if there’s a case where it would mess things up?
Anyway, here is my code:
let displayedImage = document.querySelector(’.displayed-img’);
let thumbBar = document.querySelector(’.thumb-bar’);
btn = document.querySelector(‘button’);
let overlay = document.querySelector(’.overlay’);
/* Looping through images */
for (let i=1; i <= 5; i++) {
let thumbPic = ‘images/pic’+ [i] + ‘.jpg’;
let newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, thumbPic);
thumbBar.appendChild(newImage);
function bgImage(){
displayedImage.setAttribute(‘src’, thumbPic)
}
newImage.addEventListener(‘click’, bgImage);
}
/* 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)’
}
}
Hi @mickywagner, thanks for sending in your code! It doesn’t matter if you’ve skipped the getAttribute() part — if anything, it looks like you’ve found a slightly more efficient way to solve the problem than I did when I first wrote the exercise. Nice work!
What is the “let” in the previous code example?
And here is my code. When creating a loop, I used an array of photo names. I think it gives you more freedom to call these photos somehow the way I like it. ))
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
var imgSrc = ['images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg', 'images/pic5.jpg'];
for (var i = 0; i < imgSrc.length; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', imgSrc[i]);
thumbBar.appendChild(newImage);
newImage.onclick = function(e) {
var srcCurrent = e.target.getAttribute('src');
displayImage(srcCurrent);
}
}
function displayImage(srcCurrent) {
displayedImage.setAttribute('src', srcCurrent);
}
/* Wiring up the Darken/Lighten button */
btn.onclick = function() {
var classCrt = btn.getAttribute('class');
if (classCrt === '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)';
}
}Hi @const83z, annd thanks for sending in your code. This works perfectly — well done on some great work.
As for your question, let is basically the modern version of var, with a few differences in how it behaves. Eventually we hope to change all code examples on the course to use let/const, but it is taking a long time.
You can read more about them here:
Thanks for the feedback.
At the start of the JS file, two variables are defined, but for the third line of code, “btn” doesn’t have “var” in front of it. Why is this? Thanks!
var displayedImage = document.querySelector(’.displayed-img’);
var thumbBar = document.querySelector(’.thumb-bar’);
btn = document.querySelector(‘button’);
Hi @hollydavis541,
Hope you are well; thanks for posting to our discourse forum. You have uncovered a minor error in our code. The line is wrong, and should be
var btn = document.querySelector(‘button’);
This is the first time btn appears in the code — where we first initialise and declare it. So really we should give it the proper initialization keyword (var, or in more modern JS you might use const, as the value of btn never changes in the code.)
In many cases, not including the keyword won’t cause any problems, but it is a good practice to always include it as it can cause unexpected behaviour. For example the variable will automatically become part of the global scope, no matter where you initialise it…
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)';
}
}
@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!
thank you for your reply.
Thanks for your response!
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.
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)';
}
}
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.
Hello there @papans.maxkeeble!
I’ve checked your code out, and it looks to be working perfectly. Great work!
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);
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.