Assessment for Image Gallery

Assessment desired for MDN docs Image Gallery. Link to my code on CodePen: https://codepen.io/trainee45/pen/oNjLMGP
I am unable to get all 5 pics lined up under the displayed pic in thumbnails. The last pic goes to the next ‘line’. Thank you for any insight. And thank you for all the work and effort you put in to teaching HTML JS CSS etc.
Doug D. Victoria BC

Hi @addyer!

Thanks for sending in your code! This looks to be pretty good, and working well. Our version looks like this: https://mdn.github.io/learning-area/javascript/building-blocks/gallery/

In your example, you seem to have 6 thumbnails, which is why one is going onto the next line. In my version I have 5, and they are all set to width: 20%;, so they fit on one line.

Unfortunately, my CSS on this example is painfully out of date. Really we should be using flexbox to do this simple layout. We could do this:

.thumb-bar {
  display: flex;  
}

.thumb-bar img {
  flex: 1;
  cursor: pointer; 
}

And it will now work for any number of thumbnails, not just 5.

Greetings Chris,

I want to thank you for all the time and effort you put in to looking at my code, and more importantly thank you for all the expertise, teaching, and inspiration you and MDN, provide to all the young (younger than myself) coders in the world. You provide a tremendous service…it is very much appreciated, and thank you for it!

Keep well and safe,

Doug Dyer

Victoria BC Canada

addyer@telus.net

1 Like

Addendum:

Solved thanks to your explanation below. I had i=0, but no pic0.jpg in my images folder. (Which I had not supplied you with) (Only pic1.jpg to pic5.jpg. When I set I=1 and I<6 in my for loop all worked as it should.

Greetings Chris,

I want to thank you for all the time and effort you put in to looking at my code, and more importantly thank you for all the expertise, teaching, and inspiration you and MDN, provide to all the young (younger than myself) coders in the world. You provide a tremendous service…it is very much appreciated, and thank you for it!

Keep well and safe,

Doug Dyer

Victoria BC Canada

addyer@telus.net

Ah, perfect, nice work!

Thanks so much Doug — I really appreciate your kind words. It makes all of this worth it, to know we are helping people learn and get inspired. This brought a ray of sunshine to my day!

Someone should kindly assess my Image Gallery project

https://github.com/ehimze007/MDN-Image-Gallery-Assessment-

  • Constructive criticism is very much welcome.

Hi there @Ehimze_Nathanael, and thanks for sending your code in! I have checked it out, and it works perfectly, so well done. The main difference I can see between yours and mine is that yous is done using a do…while loop, whereas ours uses a for loop. But that’s not a bad thing — whatever you choose is fine WRT loops, as long as it works.

1 Like

Greetings Chris,

I notice I am getting emails that I think you intend to be directed at Ehimze_Nathanael…just mentioning this in case Ehimze is not getting the emails?

BTW I will use this opportunity to again let you know how much all of us ‘want to be coders’ appreciate all the time and effort you and the MDN/Learn team put into teaching and mentoring all of us. Thank you again…all keep well and stay safe!

Doug Dyer Victoria

I got some mails. Thanks though.

Yippeeeee. Thanks for the review, you have been most helpful @chrisdavidmills

You are welcome; glad I could help!

@addyer thanks again Doug! This is OK — it’s because you are both on the same forum thread. Usually people start their own thread to ask about an assessment of coding problem on here, but it’s OK if someone joins an existing thread.